javascript互動如何使用函數綁定程式碼詳解

函數綁定

在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()。然而，被綁定函數與普通函數相比有更多的開銷，它們需要更多內存，同時也因為多重函數呼叫稍微慢一點，所以最好只在必要時使用。

以上是javascript互動如何使用函數綁定程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！