js中bind、call、apply函數的用法

最近一直在用 js 寫遊戲伺服器，我也接觸 js 時間不長，大學的時候用 js 做過一個 H3C 的 web的項目，然後在騰訊實習的時候用 js 寫過一些奇怪的程式，自己也用 js 寫過幾個的網站。但真正大規模的使用 js 這還是第一次。我也是初生牛犢不怕虎，這次伺服器居然抛棄 C++ 和 lua 的正統搭配，而嘗試用 nodejs 來寫遊戲伺服器，折騰的自己要死要活的我也是醉了。

在給我們項目組的其他程式介紹 js 的時候，我準備了很多的内容，但看起來效果不大，果然光講還是不行的，必須動手。前幾天有人問我關于代碼裡 call() 函數的用法，我讓他去看書，這裡推薦用js 寫伺服器的程式猿看 《javascript程式設計精粹》 這本書，crockford大神果然不是蓋的。之後我在 segmentfault 上又看到了類似的問題，那邊解答之後幹脆這裡記一筆。

首先，關于 js 定義類或對象的方法，請參看 w3school 的這裡，寫的非常詳細和清晰，我不再贅言了。

為了介紹 bind、call、apply 這三個函數的用法，不得不介紹 js 裡函數的一些設定。關于這部分推薦通讀 《javascript程式設計精粹》 的第四章，這裡我所說的在書裡都能找到。

關于這三個函數的詳細介紹，可以參看 MDN 的文檔：bind、call、apply。

下面開始搬磚，修改自我之前在 segmentfault 上的答案：

js 裡函數調用有 4 種模式：方法調用、正常函數調用、構造器函數調用、apply/call 調用。

同時，無論哪種函數調用除了你聲明時定義的形參外，還會自動添加 2 個形參，分别是 this 和arguments。

arguments 不涉及到上述 3 個函數，是以這裡隻談 this。this 的值，在上面 4 中調用模式下，分别會綁定不同的值。分别來說一說：

方法調用：

這個很好了解，函數是一個對象的屬性，比如

var a = {    
    v : 0,    
    f : function(xx) {                
        this.v = xx;    
    }
}
a.f(5);      

這個時候，上面函數裡的 this 就綁定的是這個對象 a。是以 this.v 可以取到對象 a 的屬性 v。

正常函數調用：

依然看代碼

function f(xx) {        
    this.x = xx;
}
f(5);      

這個時候，函數 f 裡的 this 綁定的是全局對象，如果是在浏覽器運作的解釋器中，一般來說是 window 對象。是以這裡 this.x 通路的其實是 window.x ，當然，如果 window 沒有 x 屬性，那麼你這麼一寫，按照 js 的坑爹文法，就是給 window 對象添加了一個 x 屬性，同時指派。

構造器函數調用：

構造函數一直是我認為是 js 裡最坑爹的部分，因為它和 js 最初設計的基于原型的面向對象實作方式格格不入，就好像是特意為了迎合大家已經被其他基于類的面相對象實作給慣壞了的習慣。

如果你在一個函數前面帶上 new 關鍵字來調用，那麼 js 會建立一個 prototype 屬性是此函數的一個新對象，同時在調用這個函數的時候，把 this 綁定到這個新對象上。當然 new 關鍵字也會改變return 語句的行為，不過這裡就不談了。看代碼

function a(xx) {        
    this.m = xx;
}
var b = new a(5);      

上面這個函數和正常調用的函數寫法上沒什麼差別，隻不過在調用的時候函數名前面加了關鍵字 new罷了，這麼一來，this 綁定的就不再是前面講到的全局對象了，而是這裡說的建立的新對象，是以說這種方式其實很危險，因為光看函數，你不會知道這個函數到底是準備拿來當構造函數用的，還是一般函數用的。是以我們可以看到，在 jslint 裡，它會要求你寫的所有構造函數，也就是一旦它發現你用了 new 關鍵字，那麼後面那個函數的首字母必須大寫，這樣通過函數首字母大寫的方式來區分，我個人隻有一個看法：坑爹：）

apply/call 調用：

我們知道，在 js 裡，函數其實也是一個對象，那麼函數自然也可以擁有它自己的方法，有點繞，在js 裡，每個函數都有一個公共的 prototype —— Function，而這個原型自帶有好幾個屬性和方法，其中就有這裡困惑的 bind、call、apply 方法。先說 apply 方法，它讓我們構造一個參數數組傳遞給函數，同時可以自己來設定 this 的值，這就是它最強大的地方，上面的 3 種函數調用方式，你可以看到，this 都是自動綁定的，沒辦法由你來設，當你想設的時候，就可以用 apply()了。apply 函數接收 2 個參數，第一個是傳遞給這個函數用來綁定 this 的值，第二個是一個參數數組。看代碼

function a(xx) {        
    this.b = xx;
}
var o = {};
a.apply(o, [5]);
alert(a.b);    // undefined
alert(o.b);    // 5      

是不是很神奇，函數 a 居然可以給 o 加屬性值。當然，如果你 apply 的第一個參數傳遞 null，那麼在函數 a 裡面 this 指針依然會綁定全局對象。

call() 方法和 apply() 方法很類似，它們的存在都是為了改變 this 的綁定，那 call() 和apply() 有什麼差別呢？就我個人看來，沒啥鳥差別。。。開玩笑！剛剛說了，上面 apply() 接收兩個參數，第一個是綁定 this 的值，第二個是一個參數數組，注意它是一個數組，你想傳遞給這個函數的所有參數都放在數組裡，然後 apply() 函數會在調用函數時自動幫你把數組展開。而 call()呢，它的第一個參數也是綁定給 this 的值，但是後面接受的是不定參數，而不再是一個數組，也就是說你可以像平時給函數傳參那樣把這些參數一個一個傳遞。是以如果一定要說有什麼差別的話，看起來是這樣的

function a(xx, yy) {    
    alert(xx, yy);    
    alert(this);    
    alert(arguments);
}
a.apply(null, [5, 55]);
a.call(null, 5, 55);      

僅此而已。

最後再來說 bind() 函數，上面講的無論是 call() 也好， apply() 也好，都是立馬就調用了對應的函數，而 bind() 不會， bind() 會生成一個新的函數，bind() 函數的參數跟 call() 一緻，第一個參數也是綁定 this 的值，後面接受傳遞給函數的不定參數。 bind() 生成的新函數傳回後，你想什麼時候調就什麼時候調，看下代碼就明白了

var

m = {   

"x"

: 1

};

function

foo(y) {

alert(

this

.x + y);

}

foo.apply(m, [5]);

foo.call(m, 5);

var

foo1 = foo.bind(m, 5);

foo1();

末了來個吐槽，你在 js 裡想定義一個函數，于是你會這麼寫:

function
 
jam() {};      

其實這是 js 裡的一種文法糖，它等價于：

var
 
jam = 
function
() {};      

然後你想執行這個函數，腦洞大開的你會這麼寫：

function
 
jam() {}();      

(
function
 
jam() {}());