JavaScript中apply与call的用法、意义及区别详解

apply与call的基本概念与语法

apply和call方法的核心作用是将函数绑定到另一个对象上运行，它们的主要区别仅在于定义参数的方式不同。

Function.prototype.apply(thisArg, argArray);

Function.prototype.call(thisArg[, arg1[, arg2…]]);

从函数原型可以看出，第一个参数均命名为thisArg，这意味着所有函数内部的this指针都会被赋值为thisArg，从而实现了将函数作为另一个对象的方法运行的目的。除了thisArg参数外，这两个方法都用于向Function对象传递其他参数。以下代码说明了apply和call方法的工作机制：

 
//定义一个函数func1，具有属性p和方法A
function func1(){
this.p="func1-";
this.A=function(arg){
alert(this.p+arg);
} 
} 
//定义一个函数func2，具有属性p和方法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"); //显示func1-byA
obj2.B("byB"); //显示func2-byB
obj1.A.apply(obj2,["byA"]); //显示func2-byA，其中[“byA”]是仅有一个元素的数组，下同
obj2.B.apply(obj1,["byB"]); //显示func1-byB
obj1.A.call(obj2,"byA"); //显示func2-byA
obj2.B.call(obj1,"byB"); //显示func1-byB

apply与call的工作机制示例

可以看出，当obj1的方法A被绑定到obj2运行时，整个函数A的运行环境就转移到了obj2，即this指针指向了obj2。同样，obj2的函数B也可以绑定到obj1对象去运行。代码的最后4行展示了apply和call在函数参数形式上的区别。

与arguments对象的length属性不同，函数对象还有一个length属性，它表示函数定义时所指定参数的个数，而非调用时实际传递的参数个数。例如下面的代码将显示2：

 
function sum(a,b){ return a+b;}

call方法的参数详解与使用

调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

参数

thisObj

可选项。将被用作当前对象的对象。

arg1, arg2, , argN

可选项。将被传递方法参数序列。

说明

call方法可以用来代替另一个对象调用一个方法。call方法可将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象。

如果没有提供thisObj参数，那么Global对象被用作thisObj。

简单来说，其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

引用网上一个代码段，运行后自然就明白其道理。

 <input type="text" id="myText" value="input text">  

call函数和apply方法的第一个参数都是要传入给当前对象的对象，即函数内部的this。后面的参数都是传递给当前对象的参数。

运行如下代码：

可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

apply与call的参数传递区别

对于apply和call两者在作用上是相同的，但两者在参数上有区别。

对于第一个参数意义都一样，但对第二个参数：

apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

如func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入

补充

apply方法的补充说明与应用场景

funObj.apply([thisObj[,argArray]])

应用某一对象的一个方法，用另一个对象替换当前对象。

functionObj的方法执行时，函数中的this对象会被thisObj替换掉。

thisObj可选项。将被用作当前对象的对象。

argArray可选项。将被传递给该函数的参数数组。

 
//apply在对象继承方面的应用，不使用prototype，隐式的将父对象属性赋给了子对象
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可以在通用的方法调用方面进行使用
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)