javascript - javascript：在块中本地化变量

Question

我尝试理解 Javascript 中的变量范围。这是我正在做的事情：

<script>
for (var i = 0; i < 3; i++) {
  document.getElementById(i).onclick = function() {
    console.log(i);
  }
}
</script>

输出始终为 3，我理解这是因为i已通过引用保留。我如何本地化i，以便它可以记录增量值？

谢谢！

更新

感谢大家快速而体面的回应。解决方案确实有帮助！

最初，我正在尝试与@GrailsGuy 类似的方法，这里是：

<script>
for (var i = 1; i <= 3; i++) {
    document.getElementById(i).onclick = function() {
        console.log(logCall(i));
    }
}
function logCall(i) {
    return i;
}
</script>

但它似乎i没有被本地化。想不通为什么！

Answer 1

创建新范围

for (var i = 0; i < 3; i++) {
  (function(i) {
    document.getElementById(i).onclick = function() {
      console.log(i);
    }
  }(i));
}

Answer 2

在 Javascript 中，范围不是由方括号创建的（与类似 C 的语法相反）。但是，作用域是在函数中创建的，因此一种方法是将调用提取到函数中（更新）：

<script>
for (var i = 0; i < 3; i++) {
    logCall(i);
}

function logCall(i) {
    document.getElementById(i).onclick = function() {
        console.log(i);
    }
}
</script>

这具有使代码更具可重用性的额外好处。