Introduction to this binding in Javascript_javascript skills

The specific value of this depends on its calling mode.
* Method calling mode: this is bound to the object.
* Function call mode: this is bound to the global object, and in the case of web pages, it is bound to window
* Constructor call mode: this is bound to the newly generated object.
* There are two cases of event processing calling mode: refer to
* this is bound to the global object

Copy code The code is as follows:

...
Click me!

* this is bound to the DOM object

Copy code The 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;

...

The uncertainty of this is caused by changes in the context of function calls. In order to better clarify this context, you can use the call and apply methods to clarify the value of this binding.
The difference between call and apply is only in the parameters: call accepts any parameter list, and apply accepts a parameter array object. This also allows apply to accept arguments as its second argument.

Copy code The code is as follows:

func.call(obj1,var1,var2,var3)
func.apply(obj1, [var1,var2,var3])
func.apply(obj1, arguments)

But the call and apply methods are executed immediately, if necessary If used later, the conditions will not be met, as in the following example, where lines 13 and 14 cannot get the value we need (42) regardless of whether call is used or not.

Copy code The code is as follows:

This is when the bind method comes into play (the The method has been added to the fifth edition of ECMA-262) and first appeared in the Prototype framework (unconfirmed). Like call and apply, bind also changes the context of function execution, that is, the value of this when the function is executed. The difference is that it returns a function reference for subsequent use. Its simple implementation is as follows:

Copy code The code is as follows:

Function.prototype.bind = function(object) {
var method = this;
return function() {
method.apply(object, arguments);
}
}

In specific implementation, the closure feature is used. When the returned function reference is executed, 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.