JavaScript裏call,apply,bind方法簡介

JavaScript裏call,apply,bind方法不太容易理解,其實背後的思想並不算非常複雜,希望本文能幫你更好地瞭解這3個很像,而且看似很神祕的方法。

非要用一個關鍵字來點明它們的背後思想的精髓的話,關鍵字就是:this


因爲通常程序員對C++比較熟,先借用C++,簡單說一下this。

類的成員函數裏,都可以用this來訪問當前類的成員,但問題是成員函數的參數並沒有this這個參數,比如:

Animal a;
a.eat(); 
a.eat("meat"); 

Animal的對象調用無參和單參數成員函數eat。在eat方法裏可以用this訪問其他成員。可問題是eat是個"無參"或“單形參”的方法,並沒有一個叫this的形參。

原因在於編譯器會對類的成員函數進行擴展。

a.eat();        //編譯器會重寫成:Animal::eat(&a);
a.eat("meat");  //編譯器會重寫成:Animal::eat(&a, "meat");
類的每個成員函數(除static成員函數。因爲static是屬於類而非對象的,static和this天生語義不同)都有一個額外的,隱含的形參this。調用成員函數時,形參this初始化爲調用函數的對象的地址。


扯遠了,拉回主題。。。先看JavaScript中的Function.prototype中的call方法

就像C++一樣,函數或方法的接收者是綁定到this的,但有時需要使用自定義接收者來調用函數或方法。call方法就是用於改變this。

function Class1() { 
    this.name = "class1"; 
    this.showName = function() { alert(this.name); } 
} 
function Class2() { 
    this.name = "class2"; 
} 
var c1 = new Class1(); 
var c2 = new Class2(); 

如果你直接在Class2的對象上調用showName一定報錯:

c2.showName();    //Error

編譯器會重寫成:Class2::showName(&c2),顯然Class2裏沒有showName方法將報錯,這一點不奇怪所有人都能理解。


但showName方法太誘人,無論如何都想用呢?有兩個辦法,一個自然是在Class2中自己定義一個showName方法,這沒什麼不好,但有時顯得比較麻煩,且重複代碼維護起來也是個問題。另一種解決方法就是用call:

c1.showName.call(c2);	//class2

編譯器會重寫成:Class1::showName(&c2),隱藏的形參this本來是默認指向Class1的對象的,現在call方法將this改變爲指向Class2的對象。

這樣就將Class1中定義的showName方法實體應用到Class2的對象上,即用c2的上下文替換c1的上下文


理解了call之後,apply就迎刃而解,因爲兩者本質是一樣的,區別在於外在表現:

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

從第二個參數起,call方法參數將依次傳遞給借用的方法作參數,而apply直接將這些參數放到一個數組中再傳遞,最後借用方法的參數列表是一樣的。

因爲上面這個例子的showName方法沒有參數,因此用call和apply是一樣的:

c1.showName.call(c2);	//class2
c1.showName.apply(c2);	//class2

最後是bind。call和apply是改變this,bind同樣不例外,但改變this後還將方法返回,因此bind準確的語義是:獲得具有確定接收者的方法。

它本質上是得到一個方法,方法可以直接調用,也可以被當做參數傳遞給高階函數。

如果直接調用那上面這個例子用bind可以改成:

c1.showName.call(c2);	//class2
c1.showName.apply(c2);	//class2
c1.showName.bind(c2)();	//class2

看到bind後面的一對小括號了嗎?如果沒有那對小括號,c1.showName.bind(c2); 僅僅表示一個方法,然後就沒有然後了。加上那對小括號就是直接調用"通過bind爲方法綁定接收者後返回的方法"

如果只能直接調用,那用call和apply即可,bind就沒有存在的價值了,因此另一個作用就是當做參數傳遞給高階函數,一個常用的例子就是用bind實現函數柯里化(將函數與其參數的一個子集綁定的技術稱爲函數柯里化):

function simpleURL(protocol, domain, path) {
    return protocol + "://" + domain + "/" + path;
}

上面是一個非常普通的生成URL地址的函數。但你覺得其實前兩個參數通常是固定不變的,無非是第三個參數要變來變去,你可以這樣:
var urls = paths.map(function(path) {
    return simpleURL("http", "csdn", path);	//前兩個參數都固定,只有第3個參數會變
});
用bind可以簡化上述代碼:

var urls = paths.map(simpleURL.bind(null, "http", "csdn"));
bind的第一個參數爲方法的接收者,由於simpleURL沒有this,因此設爲null即可,表示忽略接收者。這樣bind將單個參數path調用simpleURL函數委託到simpleURL("http", "baidu", path)函數。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章