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>

这样可以使代码更具可重用性。

javascript：在块中本地化变量

2 个答案: