為什麼 JavaScript 循環中的事件處理程序需要閉包？

JavaScript 循環中的事件處理程序：對閉包的需求

在JavaScript 中，在循環中使用事件處理程序時，可能需要實現閉包以確保正確的參數傳遞。考慮以下程式碼：

<code class="javascript">for (var i = 0; i < blah.length; i++) {
  var select = document.createElement('select');
  select.onchange = function() {
    onStatusChanged(select, callid, anotherid);
  };
}</code>

在這種情況下，當 onchange 事件觸發時，傳遞給 onStatusChanged() 的值在所有 中保持一致。元素，儘管 callid 和 anotherid 在循環的每次迭代中應該具有不同的值。

發生這種情況是因為 JavaScript 事件處理程序會建立閉包，並且函數內對 callid 和 anotherid 的引用引用最終值循環完成後。為了解決這個問題，需要一個閉包來捕獲每次迭代期間參數的當前值。

為參數傳遞實現閉包

複製每次迭代期間的參數，實現閉包如下：

<code class="javascript">for (var i = 0; i < blah.length; i++) {
  var select = document.createElement('select');
  select.onchange = function(s, c, a) {
    return function() {
      onStatusChanged(s, c, a);
    };
  }(select, callid, anotherid);
}</code>

在此更新的程式碼中：

• 使用自執行函數return function() { } 建立閉包
• 事件處理函數接受三個參數：s（元素）、c （目前callid）和a（目前anotherid）
• 閉包立即呼叫函數，傳入s、c 和a 的目前值

當onchange 事件觸發時，閉包執行，確保onStatusChanged() 接收每個 的正確值。元素的迭代。

以上是為什麼 JavaScript 循環中的事件處理程序需要閉包？的詳細內容。更多資訊請關注PHP中文網其他相關文章！