JavaScript I learn eight fickle this---function execution context

This article is Jin Xu-liang teacher NetEase Cloud Class of course notes, record down, for memo.

Function Execution Context

When the function runs, through this, the function can get information about the external environment that it needs to run (such as the value of a variable, a reference to another object, etc.).

The object referenced by this will "change"!

Each call to a function has a context object, which refers to the this keyword. If the function belongs to an object, the This keyword refers to this object, which is the context of this function call.

1         varobj = {2Funcfunction () {3Console.info ("func (): this=" + This);4             }5         };6Obj.func ();//func (): This=[object Object]7         varref =Obj.func;8Ref ();//func (): This=[object window]

Call methods for function Objects

• All functions have a call method that dynamically specifies the context object of the function invocation (this refers to it)
• Pager the first parameter of the method represents the context object at runtime of this function, followed by the arguments of the argument function call (if any).

1Window.color = "Red";2         varo = {color: ' Blue ' };3         functionSaycolor () {4Console.info ( This, This. color);5         }6Saycolor ();//window "Red"7Saycolor.call ( This);//window "Red"8Saycolor.call (window);//window "Red"9Saycolor.call (o);//Object "Blue"

Apply method for function object

• Call can receive a variable number of parameters, and apply can only receive two parameters, the first is a context object, and the other is an array of parameters, which can contain multiple parameters.
• The Apply method parameter is a context object and an array

1       functionPerson (name) {2              This. name = name;//The THIS.name property is the person object, and name is an argument, and two different individuals have the same name. 3         }4         varSay =function(message) {5Console.info (( This. name | | ' Anonymous ') +6"said" "+ (Message | | ' I don't want to say anything ') + "". ");7         }8Say ();//John Doe said, "I don't want to say anything."9         varP1 =NewPerson ("Qiu");TenSay.apply (P1, ["This is Qiu"]);//Qiu said: "This is Qiu said drip."  OneWindow.name = "Tang Monk";  ASay.apply (NULL, ["You want to say, you say, you do not say I said"]);//Tang's monk said: "You want to say you say, you do not say I said." 

This in the callback function

The execution context of the callback function Showtime, consistent with the callback function setinterval, is the window. Example

1
2<script type= "Text/javascript" >3             ////What is a callback? 4             varOutput = document.getElementById (' Output ');5             //functions that are called callbacks6             functionShowTime () {7Console.info ( This);8                 if(!! Output) {//Convert to a Boolean value9output.innerhtml =NewDate (). tolocalestring ();Ten                 } One             } A             //functions that are responsible for callbacks -SetInterval (ShowTime, 1000); -</script>

The execution context object for the callback function

So the question is, what if this method needs to access the properties of an object when it calls back to the method of an object?

1         varobj = {2OutputElem:document.getElementById (' Output '),3ShowTime:function () {4                  This. outputelem.innerhtml =NewDate (). tolocalestring ();5             }6         };7         //When you callback an object's method, if this method requires access to the properties in the object8         //the error will be reported9SetInterval (obj.showtime, 1000);

There is no Outputelem property in the Window object, so the ShowTime () method performs an error!

You must use the bind () method to specify that the callback function executes on a specific context object.

1       // set the callback function, bind to obj 2         var callbackfunc = obj.showTime.bind (obj); 3         // //now works fine!  4         setinterval (callbackfunc, 1000);

JavaScript I learn eight fickle this---function execution context