There is a call and apply method in JavaScript, which basically works the same, but also has a slight difference. Apply and call. They are used to bind the function to another object for running. The two are different only when defining parameters:
Function. prototype. apply (thisArg, argArray );
Function. prototype. call (thisArg [, arg1 [, arg2…]);
From the function prototype, we can see that the first parameter is named thisArg, that is, the this pointer inside all functions will be assigned thisArg, this achieves the purpose of running a function as another object. The two methods except the thisArg parameter are the parameters passed for the Function object. The following code illustrates how the apply and call methods work:
The Code is as follows:
// Define A function func1 with the property p and method
Function func1 (){
This. p = "func1 -";
This. A = function (arg ){
Alert (this. p + arg );
}
}
// Define a function func2 with the property p and method B
Function func2 (){
This. p = "func2 -";
This. B = function (arg ){
Alert (this. p + arg );
}
}
Var obj1 = new func1 ();
Var obj2 = new func2 ();
Obj1.A ("byA"); // display func1-byA
Obj2. B ("byB"); // display func2-byB
Obj1.A. apply (obj2, ["byA"]); // display the func2-byA, where ["byA"] is an array with only one element, the same below
Obj2. B. apply (obj1, ["byB"]); // display func1-byB
Obj1.A. call (obj2, "byA"); // display func2-byA
Obj2. B. call (obj1, "byB"); // display func1-byB
It can be seen that after method A of obj1 is bound to obj2 for running, the runtime environment of function A is transferred to obj2, that is, this Pointer Points to obj2. Similarly, function B of obj2 can be bound to the obj1 object for running. The last four lines of the Code show the differences between the parameters of the apply and call functions.
Different from the length attribute of arguments, the function object also has an attribute length, which indicates the number of parameters specified during Function Definition, rather than the number of parameters actually passed during the call. For example, the following code shows 2:
The Code is as follows:
Function sum (a, B) {return a + B ;}
Let's take a look at the call explanation in the JS manual:
Call Method
Call a method of one object to replace the current object with another object.
Call ([thisObj [, arg1 [, arg2 [, [,. argN])
Parameters
ThisObj
Optional. Will be used as the object of the current object.
Arg1, arg2, and argN
Optional. The method parameter sequence will be passed.
Description
The call method can be used to call a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by thisObj.
If the thisObj parameter is not provided, the Global object is used as thisObj.
The white point is actually to change the internal pointer of the object, that is, to change the content that this points to of the object. This is sometimes useful in Object-Oriented js programming.
Reference a code segment on the Internet. After running the code, you will naturally understand the truth.
<Input type = "text" id = "myText" value = "input text"> script function Obj () {this. value = "object! ";}Var value =" global variable "; function Fun1 () {alert (this. value);} window. fun1 (); // global variable Fun1.call (window); // global variable Fun1.call (document. getElementById ('mytext'); // input text Fun1.call (new Obj (); // object! Script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The first parameter of the call function and the apply method is the object to be passed into the current object, and this in the function. The following parameters are the parameters passed to the current object.
Run the following code:
Script var func = new function () {this. a = "func"} var myfunc = function (x) {var a = "myfunc"; alert (this. a); alert (x);} myfunc. call (func, "var"); script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
It can be seen that func and var are displayed respectively. So far, I have understood the meaning of each call parameter.
The apply and call functions are the same, but they have different parameters.
The meaning of the first parameter is the same, but for the second parameter:
The apply parameter is an array of parameters, that is, multiple parameters are combined into an array and the call parameter is passed in (starting with the second parameter ).
For example, the apply method for func. call (func1, var1, var2, var3) is: func. apply (func1, [var1, var2, var3]).
The advantage of using apply is that the arguments object of the current function can be directly passed as the second parameter of apply.
Javascript apply usageSupplement
FunObj. apply ([thisObj [, argArray])
Apply a method of an object and replace the current object with another object.
When the functionObj method is executed, this object in the function will be replaced by thisObj.
ThisObj is optional. Will be used as the object of the current object.
ArgArray is optional. Array of parameters that will be passed to the function.
The Code is as follows:
// Apply applies to Object Inheritance. If prototype is not used, the parent object attribute is implicitly assigned to the sub-object.
Function par (name)
{
This. parname = name;
}
Function child (chname, parname ){
This. chname = chname;
Par. apply (this, new Array (parname ));
};
Var o = new child ("john", "Mr john ");
Alert (o. parname + ";" + o. chname );
// Apply can be used in general method calls.
Window. onunload = function ()
{
Alert ("unload event is fired! ");
}
Function sayBye (name, toName)
{
Alert (name + "says bye to" + toName );
}
Function sayEndBiz (name, toName, content)
{
Alert (name + "ends his talk about" + content + "with" + toName );
}
Function addTo (args, func)
{
Var oldHandler = window. onunload | function (){};
Window. onunload = function ()
{
Func. apply (window, args );
OldHandler. apply (window, args );
}
}
AddTo (new Array ("John", "everyone"), sayBye );
AddTo (new Array ("John", "everyone", "deveopment strategy of the company"), sayEndBiz)
