js如何實現函數綁定

這篇文章給大家分享的是有關js如何實現函數綁定的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

函數綁定

在javascript與DOM交互中經常需要使用函數綁定，定義一個函數然后將其綁定到特定DOM元素或集合的某個事件觸發程序上，綁定函數經常和回調函數及事件處理程序一起使用，以便把函數作為變量傳遞的同時保留代碼執行環境。

<button id="btn">按鈕</button>
<script>var handler = {
    message: "Event handled.",
    handlerFun: function() {
      alert(this.message);
    }
  };
  btn.onclick = handler.handlerFun;</script>

上面的代碼創建了一個叫做handler的對象。handler.handlerFun()方法被分配為一個DOM按鈕的事件處理程序。當按下該按鈕時，就調用該函數，顯示一個警告框。

雖然貌似警告框應該顯示Event handled，然而實際上顯示的是undefiend。這個問題在于沒有保存handler.handleClick()的環境，所以this對象最后是指向了DOM按鈕而非handler。

可以使用閉包來修正這個問題

<button id="btn">按鈕</button>
<script>var handler = {
    message: "Event handled.",
    handlerFun: function() {
      alert(this.message);
    }
  };
  btn.onclick = function() {
    handler.handlerFun();
  }</script>

當然這是特定于此場景的解決方案，創建多個閉包可能會令代碼難以理解和調試。更好的辦法是使用函數綁定。

一個簡單的綁定函數bind()接受一個函數和一個環境，并返回一個在給定環境中調用給定函數的函數，并且將所有參數原封不動傳遞過去。

function bind(fn, context) {
    return function() {
        return fn.apply(context, arguments);
    }
}

這個函數似乎簡單，但其功能是非常強大的。在bind()中創建了一個閉包，閉包使用apply()調用傳入的函數，并給apply()傳遞context對象和參數。當調用返回的函數時，它會在給定環境中執行被傳入的函數并給出所有參數。

<button id="btn">按鈕</button>
<script>function bind(fn, context) {
    return function() {
      return fn.apply(context, arguments);
    }
  }
  var handler = {
    message: "Event handled.",
    handlerFun: function() {
      alert(this.message);
    }
  };
  btn.onclick = bind(handler.handlerFun, handler);</script>

ECMAScript5為所有函數定義了一個原生的bind()方法，進一步簡化了操作。

只要是將某個函數指針以值的形式進行傳遞，同時該函數必須在特定環境中執行，被綁定函數的效用就突顯出來了。它們主要用于事件處理程序以及setTimeout()和setInterval()。

然而，被綁定函數與普通函數相比有更多的開銷，它們需要更多內存，同時也因為多重函數調用稍微慢一點，所以最好只在必要時使用。

感謝各位的閱讀！關于“js如何實現函數綁定”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！