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));
}