javascript:在 for 循环中使用闭包到 'freeze' i 的值

Question

此问题取自此处已接受答案中的第一个问题:https://stackoverflow.com/questions/1684917/what-questions-should-a-javascript-programmer-be-able-to-answer

<a href="#">text</a><br><a href="#">link</a>
 <script>
 var as = document.getElementsByTagName('a');
 for ( var i = as.length; i--; ) {
    as[i].onclick = function() {
        alert(i);
        return false;
    }
 }
</script>

为什么 anchor 在单击时会发出警报 -1，而不是循环内各自的计数器？如何修复代码以便它确实提醒正确的号码？ (提示:关闭)

Answer 1

当 onclick 触发时，i 的值为 -1(因为这是 i 的最后一个值)得到)。

解决方案是创建一个闭包，将迭代的该步骤中的 i 值绑定(bind)到 onclick-listener。

解决此问题的一种可能方法是:

for ( var i = as.length; i--; ) {
    as[i].onclick = (function(actually_i) {
        return function () {
            alert(actually_i);
            return false;
        }
    }(i)) // pass in i
}

<小时/>

这段代码还有其他问题。这是我的写法:

for (var i; i < as.length; i += 1) {
    as[i].addEventListener("click", (function(actually_i) {
        return function (event) {
            event.preventDefault();
            alert(actually_i);
        }
    }(i)) // pass in i
}

• i-- 构造过于聪明，会导致错误
• 最好使用 addEventListener 而不是分配 onclick(模块化问题)。
• preventDefault 的目的是，而不是 stopPropagation。 return false 两者兼而有之，而且总是错误的。