Introduction to this binding in Javascript

The specific value of this depends on the call mode.
* Method call mode: this is bound to this object.
* Function call mode: this is bound to a global object. A webpage is bound to a window.
* Constructor call mode: this is bound to the newly generated object.
* The event processing call mode can be divided into two situations:
* This is bound to a global object.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function click_handler (){
Alert (this); // alerts the window object
}
</Script>
...
<Button id = 'thebutton 'onclick = 'click _ handler () '> click me! </Button>

* This is bound to a DOM object.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function click_handler (){
Alert (this); // alerts the button DOM node
}
Function addhandler (){
Document. getElementById ('thebutton'). onclick = click_handler;
}
Window. onload = addhandler;
</Script>
...
<Button id = 'thebutton'> Click me! </Button>

This uncertainty is caused by changes in the context of function calls. To better clarify the context of this, you can use the call and apply methods to clarify the value bound to this.
The difference between call and apply lies only in the parameter difference: call accepts any parameter list, and apply accepts a parameter array object. This allows apply to accept arguments as its second parameter.
Copy codeThe Code is as follows:
Func. call (obj1, var1, var2, var3)
Func. apply (obj1, [var1, var2, var3])
Func. apply (obj1, arguments)

However, the call and apply methods are executed immediately. If you need to use them later, the conditions cannot be met, as shown in the following example, among the 13 rows and 14 rows, no matter whether or not call is used, we cannot get the value (42) we need ).
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function BigComputer (answer ){
This. the_answer = answer;
This. ask_question = function (){
Alert (this. the_answer );
}
}
Function addhandler (){
Var deep_thought = new BigComputer (42 ),
The_button = document. getElementById ('thebutton ');
// The_button.onclick = deep_thought.ask_question;
The_button.onclick = deep_thought.ask_question.call (deep_thought );
}
Window. onload = addhandler;
</Script>

This is the bind method to show their skills (this method has been added to the fifth edition of the ECMA-262), first appeared in the Prototype framework (unconfirmed ). Like call and apply, bind is also the context for changing function execution, that is, the value of this during function execution. The difference is that it returns a function reference for subsequent use. Its simple implementation is as follows:
Copy codeThe Code is as follows:
Function. prototype. bind = function (object ){
Var method = this;
Return function (){
Method. apply (object, arguments );
}
}

The closure feature is used in specific implementation. During execution of the returned function reference, you can access the method and object parameters when creating the function reference, instead of using this, this will be re-bound during execution, instead of the original method value.