JavaScript call apply uses the method of the JavaScript object to bind to the DOM event after this points to the problem

JavaScript call apply uses the method of the JavaScript object to bind to the DOM event after this points to the problem_javascript tips

WBOY

Release： 2016-05-16 18:01:39

Original

993 people have browsed it

Let’s take a look at the phenomenon first:

Copy the code The code is as follows:

apply_and_call

When the DIV is clicked, the pop-up box displays undefined.
The reason is that when the DOM object responds to the click event, the this keyword in the event method points to the DOM object. At this time, the DOM object does not have an attribute, so undefined pops up.
The programmer’s original intention is that this in the response event method points to object a of classA. How can this be achieved? This requires using the call or apply method.
Let’s get familiar with the call method:
Summary:
function.call(thisobj, args…)
Parameters:
thisobj
The object of the calling function. In the function body, thisobj is the value of the keyword this.
args…
Any number of parameters, these parameters will be passed to the function function.
Return value:
The return value of calling function function.
Throws:
TypeError
If the object calling the function is not a function, this exception is thrown.
Description:
call() calls the specified function function as the method of object thisobj, and passes the parameters after thisobj in the parameter list to it. The return value is the return value after calling the function. Within the function body, the keyword this refers to the thisobj object.
If the specified array is passed as a parameter to the function, please use the Function.apply() method.
After becoming familiar with the call() method, modify code 1 as follows:
Code 2:

Copy code The code is as follows :

apply_and_call

< script type="text/javascript">
function init() {
var el = document.getElementById("testDiv");
var a = new classA(el);
}
function classA(el) {
this.t = 1;
this.clickDele = createDele(this.click, this);
el.onclick = this.clickDele;
}
classA.prototype = {
click:function() {
alert(this.t);
}
}
function createDele(fun, obj, arg) {
return function() {
return fun.call(obj, arg);
}
}

Line 25 of code 2: The createDele method is mainly added. This method contains three parameters: fun, obj, and arg, which are respectively "the method to be executed" and "the object that this in fun needs to point to." , "Parameters passed into fun". This method returns an anonymous method.
The anonymous method is responsible for executing the fun method, pointing this in fun to obj, passing in parameters as arg, and processing the results to return.
When the program execution reaches line 15, the createDele method is called, passing in the object's method and the object itself. createDele returns an anonymous method after receiving the parameters. This.clickDele is set to the returned anonymous method. Line 16 of the code changes this. clickDele (anonymous method) is bound to the DOM event. After the program is executed, click on the DOM (DIV) to trigger the anonymous method. At this time, fun in the anonymous method is this.click (ie: method a.click) passed in before, and obj is This was passed in before (i.e. object a), so the call method is used at this time to make this in this.click (i.e. method a.click) point to obj (i.e. object a), and the final pop-up result is 1. The result is correct and the original intention of the program is achieved.
Looking back at anonymous methods makes people feel a little weird: why fun is this.click (ie: method a.click) and why obj is this (ie: object a) when calling anonymous methods. This problem needs to be explained using JavaScript closures. Closures will not be introduced here for now. An article introducing JavaScript closures will be published later. Interested friends are welcome to continue to pay attention!
Whether you believe it or not, there is no problem with the principles and procedures! :)