First look at the phenomenon:
Copy Code code as follows:
<title>apply_and_call</title>
<body onload= "init ()" >
<div id= "Testdiv" style= "Position:absolute; border:1px solid Gray; width:100px; height:100px "></div>
<script type= "Text/javascript" >
function init () {
var el = document.getElementById ("Testdiv");
var a = new ClassA (EL);
}
function ClassA (EL) {
THIS.A = 1;
This.container = El;
Bind order hit Event
This.container.onclick = This.click;
}
Classa.prototype = {
Click:function () {
alert (THIS.A);
}
}
</script>
</body>
When the div is clicked, the pop-up box displays undefined.
The reason is that when a DOM object responds to a click event, the This keyword in the event method points to a DOM object, and the DOM object does not have a property, so it pops up the undefined.
And the programmer is meant to respond to this in the event method this point is ClassA object A, how can this be achieved? This requires that you use the call or Apply method.
Let's familiarize yourself with the call method below:
Summary:
Function.call (thisobj, args ...)
Parameters:
Thisobj
The object that invokes the function. In the body of a function, Thisobj is the value of this keyword.
Args ...
Any number of parameters that are passed to function functions.
return value:
Invokes the return value of the function functions.
Thrown:
TypeError
If the object that calls the function is not a function, the exception is thrown.
Describe:
Call () invokes the specified function functions as Object thisobj, passing the thisobj argument in the argument list to it, and the return value is the return value after the function is invoked. In the function body, the keyword this refers to the Thisobj object.
Use the Function.apply () method if the specified array is used as a parameter passed to the function.
After you are familiar with the call () method, modify code 1 as follows:
Code 2:
Copy Code code as follows:
<title>apply_and_call</title>
<body onload= "init ()" >
<div id= "Testdiv" style= "Position:absolute; border:1px solid Gray; width:100px; height:100px "></div>
<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);
}
}
</script>
</body>
Code 2 25 Lines: The main addition of the Createdele method, which contains three parameters: Fun, obj, ARG, is the method to execute, the object to be pointed to in fun, and the parameters in the incoming fun. This method returns an anonymous method.
The anonymous method is responsible for executing the fun method, pointing to obj in the fun, and using as Arg to pass in the arguments, processing the result return.
When the program execution goes to line 15th to call the Createdele method, the method of the object and the object itself, Createdele returns an anonymous method after receiving the parameter, This.clickdele is set as the returned anonymous method, and 16 lines of code will This.clickdele (anonymous method) is bound to a DOM event, the program executes and the DOM (DIV) is clicked to trigger the anonymous method, while the anonymous method fun the previously passed This.click (that is, method A.click), and obj is the previously passed in (that is, object a), So the call method is used to make this point in This.click (that is, method A.click) to obj (that is, object a), which eventually pops up to 1. The result is correct and achieves the original meaning of the program.
It can be a bit weird to look back at how anonymous methods are called: When an anonymous method is invoked fun why it is This.click (that is, method A.click), obj What is this (that is, object a). This problem needs to use JavaScript closure to explain, here is not to introduce closure, there will be a description of JavaScript closure of the article published, welcomed the interest of friends to continue to pay attention!
Whether you reader letter or not, anyway, the truth and procedure is no problem! ：）
