快捷導(dǎo)航

JavaScript中apply與call的用法意義及區(qū)別說明

更新時間：2010年04月01日 14:15:49 作者：

JavaScript中有一個call和apply方法，其作用基本相同，但也有略微的區(qū)別。

apply和call，它們的作用都是將函數(shù)綁定到另外一個對象上去運行，兩者僅在定義參數(shù)的方式有所區(qū)別：
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);
從函數(shù)原型可以看到，第一個參數(shù)都被取名為thisArg，即所有函數(shù)內(nèi)部的this指針都會被賦值為thisArg，這就實現(xiàn)了將函數(shù)作為另外一個對象的方法運行的目的。兩個方法除了thisArg參數(shù)，都是為Function對象傳遞的參數(shù)。下面的代碼說明了apply和call方法的工作方式：

復(fù)制代碼代碼如下:

 
//定義一個函數(shù)func1，具有屬性p和方法A 
function func1(){ 
this.p="func1-"; 
this.A=function(arg){ 
alert(this.p+arg); 
} 
} 
//定義一個函數(shù)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”]是僅有一個元素的數(shù)組，下同 
obj2.B.apply(obj1,["byB"]); //顯示func1-byB 
obj1.A.call(obj2,"byA"); //顯示func2-byA 
obj2.B.call(obj1,"byB"); //顯示func1-byB 

可以看出，obj1的方法A被綁定到obj2運行后，整個函數(shù)A的運行環(huán)境就轉(zhuǎn)移到了obj2，即this指針指向了obj2。同樣obj2的函數(shù)B也可以綁定到obj1對象去運行。代碼的最后4行顯示了apply和call函數(shù)參數(shù)形式的區(qū)別。

與arguments的length屬性不同，函數(shù)對象還有一個屬性length，它表示函數(shù)定義時所指定參數(shù)的個數(shù)，而非調(diào)用時實際傳遞的參數(shù)個數(shù)。例如下面的代碼將顯示2：

復(fù)制代碼代碼如下:

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

下面來看看JS手冊中對call的解釋：

call 方法
調(diào)用一個對象的一個方法，以另一個對象替換當前對象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數(shù)
thisObj
可選項。將被用作當前對象的對象。
arg1, arg2, , argN
可選項。將被傳遞方法參數(shù)序列。
說明
call 方法可以用來代替另一個對象調(diào)用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。
如果沒有提供 thisObj 參數(shù)，那么 Global 對象被用作 thisObj。

說明白一點其實就是更改對象的內(nèi)部指針，即改變對象的this指向的內(nèi)容。這在面向?qū)ο蟮膉s編程過程中有時是很有用的。

引用網(wǎng)上一個代碼段，運行后自然就明白其道理。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

call函數(shù)和apply方法的第一個參數(shù)都是要傳入給當前對象的對象，及函數(shù)內(nèi)部的this。后面的參數(shù)都是傳遞給當前對象的參數(shù)。
運行如下代碼：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

可見分別彈出了func和var。到這里就對call的每個參數(shù)的意義有所了解了。

對于apply和call兩者在作用上是相同的，但兩者在參數(shù)上有區(qū)別的。
對于第一個參數(shù)意義都一樣，但對第二個參數(shù)：
apply傳入的是一個參數(shù)數(shù)組，也就是將多個參數(shù)組合成為一個數(shù)組傳入，而call則作為call的參數(shù)傳入（從第二個參數(shù)開始）。
如 func.call(func1,var1,var2,var3)對應(yīng)的apply寫法為：func.apply(func1,[var1,var2,var3])

同時使用apply的好處是可以直接將當前函數(shù)的arguments對象作為apply的第二個參數(shù)傳入

javascript apply用法 補充
funObj.apply([thisObj[,argArray]])
應(yīng)用某一對象的一個方法，用另一個對象替換當前對象。
functionObj的方法執(zhí)行時，函數(shù)中的this對象會被thisObj替換掉。
thisObj 可選項。將被用作當前對象的對象。
argArray 可選項。將被傳遞給該函數(shù)的參數(shù)數(shù)組。

復(fù)制代碼代碼如下:

 
//apply在對象繼承方面的應(yīng)用，不使用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可以在通用的方法調(diào)用方面進行使用 
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) 