Home > Developer > JavaScript
Let's take a look at the phenomenon:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> apply_and_call </title>
</Head>
<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 a click event
This. container. onclick = this. click;
}
ClassA. prototype = {
Click: function (){
Alert (this. );
}
}
</Script>
</Body>
</Html>
When you click DIV, the pop-up box displays undefined.
The reason is that after 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 the attribute, so the undefined pop-up is displayed.
In response to the event method, the programmer intended to point this to classA object a. How can this be achieved? This requires the call or apply method.
Next, familiarize yourself with the call method:
Abstract:
Function. call (thisobj, args ...)
Parameters:
Thisobj
The object that calls the function. In the function body, thisobj is the value of the keyword "this.
Args...
Any number of parameters are passed to the function.
Return Value:
The Return Value of the call function.
Throw:
TypeError
If the object that calls this function is not a function, this exception is thrown.
Description:
Call () calls the specified function as the method of the thisobj object, and passes the parameter after thisobj In the parameter list to it. The return value is the return value after the function is called. In the function body, the keyword "this" references the thisobj object.
If the specified array is used as a parameter to pass to the Function, use the Function. apply () method.
After you are familiar with the call () method, modify code 1 as follows:
Code 2:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> apply_and_call </title>
</Head>
<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>
</Html>
Line 2 and 25 of code: The createDele method is added. This method includes three parameters: fun, obj, arg, they are "methods to be executed", "objects to which this is required in fun", and "parameters in fun ". This method returns an anonymous method.
The anonymous method is responsible for executing the fun method, pointing this in fun to obj, and passing parameters as arg to process the returned results.
When the program executes Row 3 and calls the createDele method to pass in the object method and object itself, createDele receives the parameter and returns an anonymous method, this. clickDele is set to the returned anonymous method. The 16 lines of code will set this. clickDele (anonymous method) is bound to the DOM event. After the program is executed, click DOM (DIV) to trigger the anonymous method. In some cases, fun is the previously passed-in this. click (that is, method. click), obj is the previously passed this (that is, object a), so the call method is used to make this. click (that is, method. in click), this points to obj (Object a), and the final pop-up result is 1. The results are correct and the program's intention is achieved.
Looking back at the number of anonymous methods can make people feel a little strange: Why is fun this when calling anonymous methods. click (that is, method. click). obj indicates what is this (that is, object ). This problem needs to be explained using the closure of JavaScript. We will not introduce the closure for the time being. The article about the closure of JavaScript will be published later. You are welcome to continue your attention!
No matter whether you believe it or not, there is no problem with the principles and procedures! :)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
