A detailed description of the call method in JavaScript.

With regard to the call method in JavaScript, there is always no detailed information on the web. To summarize the online view, call has two magical properties:

1: Inheritance. (Not too fond of this way of inheriting.) )

2: Modify the This pointer when the function is run.

The explanation of the call in JS is as follows:

JS about call this document is easy to confuse people. The JavaScript authoritative guide's description of call is easier to understand.

Notice the part of the Red box, F.call (O), whose principle is to store f as a temporary property M of O by o.m = f, then execute m, and delete the M attribute after execution is complete.

such as function f () {

var a = "name";

this.b = "Test1";

This.add = function () {return ' add '}

}

function O () {

This. c = "C";

}

F.all (o);

Figure 1

Figure 1 in F.call (o) is actually equivalent to: function O () {

THIS.C = "C";

var a = "name";

this.b = "Test1";

This.add = function () {return ' add '}

}

To put it bluntly, the method of f is to go through the O, but not to save. Since we do not save, how do you use call implementation to inherit and modify the function when running the this pointer and other magical functions? The key is this, yes, the key or the scope of this. As stated in the previous article, this scope is not the scope of the function that defines it, but the scope at which it is executed.

Here's an example:

Figure 2

2, before executing a.call (this), the output of this does not contain any properties and methods, then inherits the properties and methods of a. As explained in the above method, after executing a.call (this), the B constructor is as follows: the scope at which this represents execution, or B.

function B ()

{

Console.log (this);

This.test1 = "Test1";

This.test2 = "Test2";

This.add = function () {return this.test1 + this.test2;}

Console.log (this);

}

Because the this scope has changed since the call to A.call (this), it represents B (), even if the method and property in A are executed, this also represents the scope B () at execution time, so that inheritance is implemented, and the property assignment and method definitions in a () are defined in B ( ) and go through it again. It also modifies the this pointer when the function is run.

For the second refinement of call, modify the this pointer when the function is run:

Here, a big God in the answer, do a test example, in fact, it should be JS in the definition of each traversal.

Figure 3

3, the first call to the FN method directly, where the function scope is not defined, the output of this represents the Window object, the global object. The second one is executed by Fn.call (Array[index], index, Array[index]) and the FN method is placed in the Array[index] scope, and this for the output represents the Array[index] object.

A different perspective:

Figure 4

4, traversal can be implemented by invoking the call method in each method. We assume that Array[index] is a collection of DOM elements, such as all of the collections labeled Li, assuming that FN is our way of customizing implementations, isn't that the way we use each to traverse DOM elements?

Figure 5

5, the simple code implements each method of traversing the DOM element.

A detailed description of the call method in JavaScript.