javascript - 为什么无论我点击哪一段，都会得到相同的输出？

Question

我想使用 for 循环在段落上分配一个函数。我希望当我单击段落时控制台显示“0”和“1”，但实际输出是“2”。

这是我的代码:

var para = document.getElementsByName('mypara');
for (var i = 0; i < para.length; i++) {
  console.log(i); //this is expected result i.e "0" and "1"
  para[i].addEventListener('click', function() {
    console.log(i) //here it is printing "2" no matter on which para i click
  });
}

<p name="mypara">1</p>
<p name="mypara">2</p>

Answer 1

更改为 let 而不是 var (要走的路)

<script>
      var para = document.getElementsByName('mypara');
      for (let i = 0; i < para.length; i++) {
        console.log(i); //this is expected result i.e "0" and "1"
        para[i].addEventListener('click', function() {
          console.log(i) 
        });
      }

</script>

或者，如果你想保留 var，请创建一个闭包(避免它)

<script>
  var para = document.getElementsByName('mypara');
  for (var i = 0; i < para.length; i++) {
    ((i) => {
      console.log(i); //this is expected result i.e "0" and "1"
      para[i].addEventListener('click', function() {
        console.log(i) 
      });

    })(i)
  }

</script>

说明:

这是因为，在调用 click 方法时，for 循环已经完成，并且变量 i 的值已经为 2，

为了使其工作，您需要在 for 循环的每次迭代中捕获 i 的值，将其传递到新创建的函数对象(闭包)中。

参见:执行上下文、变量对象、激活对象、内部作用域闭包和循环...

正如答案下面的评论指出的那样，永远不要使用 var，依赖 const 和 let