Use of call in JavaScript

The use of call in JavaScript is very tangled, according to the document is very well understood, it is difficult to determine whether you really understand.

Call method
Apply to: Function Object
Invokes one method of an object, replacing the current object with another object.
Call ([thisobj[,arg1[, arg2[, [,. ArgN]]])
Parameters:
Thisobj
Options are available. The object that will be used as the current object.
Arg1, Arg2,, ArgN
Options are available. The method parameter sequence will be passed.
Description
The call method can be used to invoke a method in place of another object. The call method can change the object context of a function from the initial context to a new object specified by Thisobj. If the Thisobj parameter is not provided, then the Global object is used as the thisobj.

1. The most basic understanding: Example 1

Customizes a class that has a method showtxt to display the name value of the current object.

An object is created, and the name value of the object is equal to Test1.

Using the call method, the newly created object, obj, adds the Showtxt method of the Class1 class, that is, the this in the this.showtxt of the Class1 class is specified as obj, so that obj has the Showtxt method. Eject "Test1".

function Class1 () {
This.showtxt = function () {alert (this.name)}
}
var obj = new Object ();
Obj.name= "Test1"
Class1.call (obj);
Obj.showtxt ();//test1
alert (obj.showtxt);//function () {alert (this.name)}

This example is easy to understand.

2. Look at a slightly more in-depth understanding

Example 2: Create an instance of Class1 and let the instance call the Showtxt method to return the name value of this instance because the implementation does not have a name value so it returns undefine.

function Class1 () {
This.showtxt = function () {alert (this.name)}
}
var class1 = new Class1 ();
Class1.showtxt ();//undefined
alert (class1.showtxt);//function () {alert (this.name)}

Example 3: add a Name value to Class1, and then Class1 calls the Showtxt method, which returns Class1 because the name value is added to the class, so the name of the instance is also changed from Undefine to Class1.

function Class1 () {
this.name = ' class1 ';//Add Name Value
This.showtxt = function () {alert (this.name)}
}
var class1 = new Class1 ();
Class1.showtxt ();//class1
alert (class1.showtxt);//function () {alert (this.name)}

Example 4: This operation of Class1.call (obj) replaces the Class1 in this.name,this.showtxt with obj, so it becomes obj.name= ' Class1 ', So Obj.showtxt returns Class1 at execution time.

function Class1 () {
this.name = ' class1 ';//Add Name Value
This.showtxt = function () {alert (this.name)}
}
function Class2 () {
this.name = ' class2 ';
}
var class2 = new Class2 ();
Class1.call (Class2);
alert (class2.showtxt);//function () {alert (this.name)}
Class2.showtxt ();//class1

Example 5: if in Class1.call (obj), then add obj.name = ' test1 ', the final result will be entered test1, for obvious reasons.

function Class1 () {
this.name = ' class1 ';//Add Name Value
This.showtxt = function () {alert (this.name)}
}
function Class2 () {
this.name = ' class2 ';
}
var class2 = new Class2 ();
Class1.call (Class2);
Class2.name = ' test1 ';//redefine Obj.name value
alert (class2.showtxt);//function () {alert (this.name)}
Class2.showtxt ();//test1

The above example call is an instance of an object, and the next case is to change the object's instance directly into a function to see what happens to the execution result.

3. Change the first parameter of the call method from an instance to a function to see how

Example 6: Class2 is a reference to a function object, and the this in This.showtxt is replaced with Class2 when executing Class1.call (CLASS2). So Class2 has the Showtxt method, Class2.showtxt () returns the value of Class2.name when it executes, because CLASS2 does not define a name value, so it returns undefined.

The this.name in the CLASS2 function is the name value of the instance created by Class2, not class2.name, and these two values sometimes confuse me.

function Class1 () {
This.showtxt = function () {alert (this.name)}
}
function Class2 () {
this.name = ' class2 ';
}
Class1.call (CLASS2);
alert (class2.showtxt);//function () {alert (this.name)}
Class2.showtxt ();//undefined

4. Then look at the following example

Example 7:Class1.showTxt.call (Class2), Class2 is returned because function () {alert (this.name)} Here is designated as Class2 by call. becomes alert (class2.name), so it returns CLASS2.

Alert (class2.showtxt) returns undefined, stating that the Class2.showtxt method is not defined.

function Class1 () {
This.showtxt = function () {alert (this.name)}
}
function Class2 () {
this.name = ' class2 ';
}
var class1 = new Class1 ();
var class2 = new Class2 ();
Class1.showTxt.call (class2);//class2
alert (class2.showtxt);//undefined

This error is prompted because and adds the Showtxt method to the Class2. If you add Class1.call (Class2) before this call, the call will be OK.

Class1.call (Class2);
Class2.showtxt ();//class1

Example 8: This example will return undefined

function Class1 () {
This.showtxt = function () {alert (this.name)}
}
function Class2 () {
this.name = ' class2 ';
}
var class1 = new Class1 ();
Class1.showTxt.call (CLASS2);//undefined
alert (class2.showtxt);//undefined

5. What happens if the calling function does not have this when using call

Example 9:

function Add (A, b) {
alert (A+B);
}
function Sub (A, b) {
Alert (A-B);
}
Add.call (sub,3,1);//4

The result returns 4,add.call (sub,3,1), in the execution of the sub as a substitute for this in the Add function, but because the this is not used in Add, the sub function is ignored directly, so the result is 4.

So the actual execution is as follows: Returns 4.

function Add (A, b) {
alert (A+B);
}
Add (3,1);//4

6. Well, then understand a weird form

Example 10:

Function F1 () {
Alert (1);
}
function F2 () {
Alert (2)
}
var f3 = F1.call;
F1.call (F2);//1
F3.call (F2);//2

F1.call (F2); better understand, if you do not understand the case above, but how to understand F3.call (F2) will return 2, in order to facilitate understanding of the equivalent change to F1.call.call (F2), At this point it will be found that the F1.call method called call F2, that F1 how to have the calling method? Call, Apply is a method of Function.prototype, which is implemented internally by the JavaScript engine because it belongs to Function.prototype, so each function object instance, that is, each method has a call , apply property.

In understanding F1.call.call (F2), we first need to know how the call method executes, so that F1.call.call (F2) can be executed.

Example 11:

A reference to JK writes a method that uses apply to implement call:

function Jscall (othis) {//The jscall here is call
var argsnew = [];
for (Var i=1;i<arguments.length;i++) {
Argsnew.push (Arguments[i]);
}
Return this.apply (othis,argsnew);
}
Function.prototype.jsCall = Jscall;

or simply Write

function Jscall (othis) {//The jscall here is call
var argsnew = [].slice.call (arguments,1)
Return this.apply (othis,argsnew);
}
Function.prototype.jsCall = Jscall;

This gives you a jscall that is as functional as call.

Next, build two functions F1,f2

Function F1 (a) {
alert ([This,a, ' F1 ']);
}
F1 (one);//[object window],11,f1
function F2 (a) {
alert ([This,a, ' F2 ']);
}
F2 (//[object window],11,f2);

Use Jscall to replace this in F1 with F2

Function F1 (a) {
alert ([This,a, ' F1 ']);
}
function F2 (a) {
alert ([This,a, ' F2 ']);
}
F1.jscall (f2,11);//function F2 (a) {alert ([This, A, "F2"]);},11,f1

Execution results found [object Window] replaced with F2 function

function Jscall (othis) {//The jscall here is call
var argsnew = [].slice.call (arguments,1)
Return this.apply (othis,argsnew);
}
Function.prototype.jsCall = Jscall;
Function F1 (a) {
alert ([This,a, ' F1 ']);
}
function F2 (a) {
alert ([This,a, ' F2 ']);
}
F1.jsCall.jsCall (f2,11);//11,,f2

In the execution of F1.jsCall.jsCall (f2,11), when returning 11,,f2, why would this result be returned, the emphasis is on:)

F1.jscall Method:

alert (F1.jscall);
Return
function Jscall (othis) {
var argsnew = [].slice.call (arguments, 1);
Return this.apply (Othis, argsnew);
//}

So F1.jsCall.jsCall can replace the Jscall.jscall to see the results of the execution.

function Jscall (othis) {//The jscall here is call
var argsnew = [].slice.call (arguments,1)
Return this.apply (othis,argsnew);
}
Function.prototype.jsCall = Jscall;
Function F1 (a) {
alert ([This,a, ' F1 ']);
}
function F2 (a) {
alert ([This,a, ' F2 ']);
}
Jscall.jscall (f2,11);//11,,f2

Then analyze

Jscall in the process of execution, return this.apply (othis,argsnew), the This is replaced by the f2,11 as a parameter passed (othis,argsnew), into the f2.apply (11);

function Jscall (othis) {//The jscall here is call
var argsnew = [].slice.call (arguments,1)
Return this.apply (othis,argsnew);
}
Function.prototype.jsCall = Jscall;
Function F1 (a) {
alert ([This,a, ' F1 ']);
}
function F2 (a) {
alert ([This,a, ' F2 ']);
}
F2.apply (one);//11,,f2

The return result is the same as F1.jsCall.jsCall (f2,11).

Look back.

Function F1 () {
Alert (1);
}
function F2 () {
Alert (2)
}
var f3 = F1.call;
F1.call (F2);//1
F3.call (F2);//2

This makes it easy to understand that when F1.call.call (F2) is implemented, the this in call during F1.call execution is replaced by F2 with F2.call (), because there is no reference to this in F2, so the execution result is 2.

F2.call ()//2

It is important to note that F1.call is a method, and F1 is a function object, which is different when you call.

Use of call in JavaScript