为什么 JavaScript 循环在绑定事件处理程序时会产生意外行为？

了解臭名昭著的 JavaScript 循环问题

在 JavaScript 中，使用循环生成元素并将其绑定到事件处理程序时会出现常见问题。下面的代码举例说明了这个问题：

function addLinks() {
    for (var i=0, link; i<5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;
        link.onclick = function () {
            alert(i);
        };
        document.body.appendChild(link);
    }
}

此代码旨在生成 5 个链接，每个链接在单击时显示自己的索引。但是，单击后，所有链接都将显示“链接 5”。这种异常源于 JavaScript 中的闭包机制。

在第一个片段中，循环事件处理程序中定义的内部函数维护对变量 i 的引用。但是，循环完成后，i 的值为 5。因此，当事件处理程序调用alert(i) 时，i 的值始终为 5，从而导致不正确的行为。

在第二个代码中通过将内部函数包含在立即调用的函数表达式 (IIFE) 中可以解决此问题：

link.onclick = function (num) {
    return function () {
        alert(num);
    };
}(i);

IIFE 确保创建内部函数的新实例对于每次迭代，从而将 i 的期望值保留在其范围内。当事件处理程序执行时，它会使用从 IIFE 捕获的 i 值来警告正确的索引。

或者，更有效的方法是将 i 的当前值直接分配给 DOM 节点的属性，在事件处理程序执行期间启用轻松访问：

link.i = i;
link.onclick = function () {
    alert(this.i);
};

此解决方案无需为每个链接创建新的函数对象。

以上是为什么 JavaScript 循环在绑定事件处理程序时会产生意外行为？的详细内容。更多信息请关注PHP中文网其他相关文章！