JavaScript call & apply 區(qū)別

網(wǎng)上就傳著一個等式來介紹這兩家伙:

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3)

方法說明


call方法:

語法
call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
定義

調(diào)用一個對象的一個方法,以另一個對象替換當(dāng)前對象。

說明

call 方法可以用來代替另一個對象調(diào)用一個方法。call 方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象。 如果沒有提供 thisObj 參數(shù),那么 Global 對象被用作 thisObj。

apply方法:

語法
apply([thisObj[,argArray]]) 
定義

應(yīng)用某一對象的一個方法,用另一個對象替換當(dāng)前對象。

說明

如果 argArray 不是一個有效的數(shù)組或者不是 arguments 對象,那么將導(dǎo)致一個 TypeError。 如果沒有提供 argArray 和 thisObj 任何一個參數(shù),那么 Global 對象將被用作 thisObj, 并且無法被傳遞任何參數(shù)。

實例理解


實例1

/* 定義一個animal類 */
function Animal() {
    this.name = "Animal";
    this.showName = function() {
        alert(this.name);
    }
}
/*定義一個Cat類*/
function Cat() {
    this.name = "Cat";
}
/*創(chuàng)建兩個類對象*/
var animal = new Animal();
var cat = new Cat();
//通過call或apply方法,將原本屬于Animal對象的showName()方法交給當(dāng)前對象cat來使用了。
//輸入結(jié)果為"Cat"
animal.showName.call(cat);
//animal.showName.apply(cat,[]);

實例2

//創(chuàng)建一個A類
function A() {
    this.message = "message of a";
    this.getMessage = function() {
        return this.message;
    }
}

//創(chuàng)建一個A類實例對象
var a = new A();

//調(diào)用類實例getMessage方法獲得message值
alert(a.getMessage());

//創(chuàng)建一個B類
function B() {
    this.message = "message of b";
    this.setMessage = function(msg1, msg2) {
        this.message = msg1 + msg2;
    }
}
//創(chuàng)建一個B類實例對象
var b = new B();

//給對象a動態(tài)指派b的setMessage方法,注意,a本身是沒有這方法的!
b.setMessage.call(a, "a的消息", "!");
// b.setMessage.apply(a, ["a的消息", "!"]);

//下面將顯示"a的消息"
alert(a.getMessage());
//給對象b動態(tài)指派a的getMessage方法,注意,b本身也是沒有這方法的!

實例3

function print(a, b, c, d) {
    alert(a + b + c + d);
}

function example(a, b, c, d) {
    //用call方式借用print,參數(shù)顯式打散傳遞
    print.call(this, a, b, c, d);
    //用apply方式借用print, 參數(shù)作為一個數(shù)組傳遞,
    //這里直接用JavaScript方法內(nèi)本身有的arguments數(shù)組
    print.apply(this, arguments);
    //或者封裝成數(shù)組
    print.apply(this, [a, b, c, d]);
}
//下面將顯示"九四安寧"
example("九", "四", "安", "寧");

實例4

function print(a, b, c, d) {
    alert(a + b + c + d);
}

//當(dāng)參數(shù)明確時可用call
//print.call(window, "九", "四", "安", "寧");

//foo參數(shù)可能為多個,當(dāng)參數(shù)不明確時可用apply給合arguments 
function foo() {
    print.apply(window, arguments);
}
foo("九", "四", "安", "寧");

以上無論是采用 animal.showName.call 還是 animal.showName.apply 方法,運行的結(jié)果都是輸出一個 Cat 的字符串。說明 showName 方法的調(diào)用者被換成了 cat 對象,而不是最初定義它的 animal 了。這就是 callapply 方法的妙用!

總結(jié)


  • 相同點

兩個方法產(chǎn)生的作用是完全一樣的

  • 不同點

方法傳遞的參數(shù)不同

Ps.參考鏈接:
http://www.iteye.com/topic/599108
http://www.jb51.net/article/28013.htm

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容