在循环中分配点击处理程序时如何避免闭包陷阱？

常见陷阱：循环中的闭包

使用循环将点击处理程序分配给多个元素时，很容易陷入陷阱无意中造成封闭。这可能会导致意外行为，如所提供的 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中文网其他相关文章！