javascript - 为什么在示例中 "for loop"与 "let"配合良好，而不与 "var"配合使用？

Question

有人可以向我解释为什么第一个代码总是打印 3 第二个代码运行良好吗？

var buttons = document.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function() {
        console.log('You clicked button #' + i);
      });
    }

对比

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
  let j = i;
  buttons[j].addEventListener('click', function() {
    console.log('You clicked button #' + j);
  });
}

here is my codepen

Answer 1

当您添加事件监听器时，您正在创建一个从封闭范围引用 i 变量的函数。该变量在循环中递增，当执行该函数时，您将在循环结束时获得该变量的值。

通过在循环内创建另一个变量，您可以在执行循环时复制该值。