在 JavaScript 中，循环中的事件处理函数可能会导致一些问题。例如，当我们使用 for 循环遍历数组并将每个元素绑定到 click 事件上时，点击任何一个元素都始终返回相同的值。这是因为在循环中，事件处理函数共享了相同的变量作用域，导致最后一个元素的值覆盖了所有其他元素的值。
那么如何解决这个问题呢？一个常见的解决方案是使用闭包。闭包是指能够访问其包含函数作用域中变量的函数。通过创建闭包，可以将每个事件处理函数绑定到其自己的变量中，从而保证每个元素都有自己的值。
下面是一个示例代码，演示了如何使用闭包来解决循环中事件处理函数共享变量作用域的问题。
-- -------------------- ---- -------
--- ---- - - -- - - -- ---- -
--------- --- -
--- --- - ---------------------------------
------------- - ------- - - --
----------- - -------- -- -
------------------- - - - - - -----------
--
-------------------------------
------
-在上述代码中，我们使用了一个立即执行函数，在其中创建一个闭包来保存当前循环变量的值。通过将当前循环变量作为参数传递给立即执行函数，我们可以确保每个事件处理函数都绑定到它自己的变量中。
需要注意的是，在 ES6 中引入了块级作用域 let 和 const 关键字，它们可以创建一个新的变量作用域，因此也可以解决循环中事件处理函数共享变量作用域的问题。下面是使用 let 关键字来实现上述示例代码的改写版本：
for (let i = 0; i < 5; i++) {
var btn = document.createElement("button");
btn.innerHTML = "Button " + i;
btn.onclick = function () {
console.log("Button " + i + " clicked.");
};
document.body.appendChild(btn);
}在这个版本的代码中，我们使用了 let 关键字来声明循环变量 i，它会在每次迭代中创建一个新的变量作用域。这样，每个事件处理函数都可以访问其自己的变量作用域中的 i 变量，从而避免了共享变量作用域的问题。
总之，当编写循环中的事件处理函数时，需要注意变量作用域的问题。通过使用闭包或块级作用域，可以有效地解决循环中事件处理函数共享变量作用域的问题，提高程序的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27425