JavaScript中使用bind()方法讓程式碼更乾淨

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

幾個星期前，我寫了一篇關於如何在一個迴圈中關閉呼叫非同步函式的影響以及處理這個問題的若干方法。

在我最近的編碼中，我發現了一個更簡單的方法。在這個過程中，它消除了匿名函式並刪除了linting錯誤，“不要在迴圈中寫函式”。

你看，我一直在使用JavaScript中的bind()試驗。事實證明，我們可以在多個場合，包括處理我幾周前提到的閉包問題中，使用bind。

什麼是bind（）？

bind函式最近才新增到JavaScript的規範說明中，所以它只能工作於最新的瀏覽器上。你可以檢視相容性表看看哪些瀏覽器實現bind()以及其他JavaScript功能。我仔細地看了看名單，我關注的瀏覽器沒有不支援bind()的。當然你的情況可能會有所不同。

bind所做的就是自動封裝函式在函式自己的閉包中，這樣我們可以捆綁上下文（this關鍵字）和一系列引數到原來的函式。

你最終得到的是另一個函式指標。

function add(a,b){
    return a + b;
}
var newFoo = add.bind(this,3,4);

請注意，我們不僅捆綁this到foo()函式，而且我們也捆綁了兩個引數。所以，當我們呼叫newFoo()的時候，返回值將是7。

但是，如果我們在呼叫之前newFoo更改的引數的話，會發生什麼？

更改bind引數

如果我們使用變數繫結引數到foo()，然後在呼叫newFoo()前改變變數，你覺得值會變為什麼呢？

function add(a,b){
    return a + b;
}
var a = 3;
var b = 4;
var newFoo = add.bind(this,a, b);
a = 6;
b = 7;
console.log(newFoo());

返回值仍然是7，因為bind()繫結的是引數的值，而不是實際變數的值。

這是好訊息，就像我說的，我們可以在程式碼中利用這個巨大的優勢。但是，對我而言它最有用的地方是在callbacks中。

bind和callbacks

還記得那篇文章中我們在迴圈中處理callbacks的解決方案之一就是，圍繞我們想要呼叫的函式建立匿名函式。

for(var i = 0;i < 10;i++){
    (function(ii){
        setTimeout(function(){
            console.log(ii);
        },1000);
    })(i);

但是我們可以使用bind，大大簡化程式碼。

function consoleLog(i){
  console.log(i);
}
for(var i = 0;i < 10;i++){
    setTimeout(consoleLog.bind(this,i),1000);
}

這是因為每次呼叫bind就會給出一個新的函式指標，並且保留原來的函式不變。

同時，我們還刪除了linting錯誤“不要在迴圈寫函式”，因為我們不是在迴圈中創造的函式，我們只是指向了我們在迴圈外建立的函式。

bind用於事件處理程式

bind()可以讓你的程式碼乾淨起來的另一個地方是在事件處理程式。大家都知道，或者應該知道，當一個事件處理程式被呼叫時，它訪問的上下文會生成事件，而不是在建立事件處理程式的物件中。通過使用bind，可以肯定的是，函式會被訪問正確的上下文。

function ClassName(){
   this.eventHandler = (function(){
   }).bind(this);
}

不是說你要像那樣寫程式碼，這只是為了說明要點。

Currying

什麼？！

OK。我會是第一個承認，自己的函數語言程式設計知識是有限的。我能給出的關於Currying的最佳定義是，它允許你在多個步驟中傳遞引數。

使用bind，我們就可以像這樣寫程式碼實現Currying：

function add(a,b,c) {
  return a+b+c;
}
var addAgain = add.bind(this, 1, 2);
var result = addAgain(3);