js如何實現(xiàn)函數(shù)綁定

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

函數(shù)綁定

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

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

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

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

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

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

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

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

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

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

<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為所有函數(shù)定義了一個原生的bind()方法，進(jìn)一步簡化了操作。

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

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

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