JavaScript中apply與call的用法意義及區別說明

來源:互聯網
上載者:User

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

可以看出,obj1的方法A被綁定到obj2運行後,整個函數A的運行環境就轉移到了obj2,即this指標指向了obj2。同樣obj2的函數B也可以綁定到obj1對象去運行。代碼的最後4行顯示了apply和call函數參數形式的區別。

與arguments的length屬性不同,函數對象還有一個屬性length,它表示函數定義時所指定參數的個數,而非調用時實際傳遞的參數個數。例如下面的代碼將顯示2: 複製代碼 代碼如下:function sum(a,b){ return a+b;}

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

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">
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

call函數和apply方法的第一個參數都是要傳入給當前對象的對象,及函數內部的this。後面的參數都是傳遞給當前對象的參數。
運行如下代碼:
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

可見分別彈出了func和var。到這裡就對call的每個參數的意義有所瞭解了。

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

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

javascript 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)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.