在循環中分配點擊處理程序時如何避免閉包陷阱？

常見陷阱：循環中的閉包

使用循環將點擊處理程序分配給多個元素時，很容易陷入無意陷阱中造成封閉。這可能會導致意外行為，如所提供的 JavaScript 程式碼所示。

在給定的範例中，問題在於每個元素的點選處理程序函數。透過將其包含在循環中，我們創建了一個引用循環中變數 i 的閉包。但是，由於 i 隨著每次迭代而變化，因此當單擊事件發生時，它始終會存取 i 的最終值（在本例中為 20），而不是特定元素的預期值。

解決方案:

為了避免這種關閉問題，有必要建立一個封裝所需值的回調函數。使用立即呼叫函數表達式（IIFE），我們可以實現這一點：

function createCallback(i) {
  return function () {
    alert('you clicked ' + i);
  };
}

$(document).ready(function () {
  for (var i = 0; i < 20; i++) {
    $('#question' + i).click(createCallback(i));
  }
});

透過這種方法，回調函數捕獲每次循環迭代的i 的當前值，確保將正確的值傳遞給點擊處理程序。

ES6 的現代解決方案：

在 ES6 中， let 關鍵字可用於為每次循環迭代建立局部變數。這消除了使用回調函數的解決方法的需要：

for (let i = 0; i < 20; i++) {
  $('#question' + i).click(function () {
    alert('you clicked ' + i);
  });
}

此解決方案更加簡潔，並且避免了在循環中處理單擊事件時出現關閉問題的可能性。

以上是在循環中分配點擊處理程序時如何避免閉包陷阱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！