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

以上就是JavaScript中使用bind()方法讓程式碼更乾淨的詳細介紹的內容，更多相關內容請關注PHP中文網（www.php.cn）！