循环和局部变量内的闭包[重复]

Question

我是一名 JS 新手，我正在阅读有关闭包的内容，由于误解闭包的工作原理而出现的常见问题以及“在循环中设置处理程序”就是一个很好的例子。我也看到并理解了解决这个问题的方法，即通过调用另一个函数，将循环变量作为参数传递并返回一个函数。然后我试了一下，看看是否有其他方法可以解决这个问题，我创建了以下代码。

var i;

var inpArr = new Array();

for(i = 0; i < 10; ++i) {
  inpArr.push(document.createElement("input"));
  inpArr[i].setAttribute("value", i);
  inpArr[i].onclick = function() {
    var index = i;
    alert("You clicked " + index);
  }
  document.body.appendChild(inpArr[i]);
}

我猜它不起作用，但我不明白为什么。我了解i 已被捕获并可供生成的所有函数表达式使用。但是为什么把捕获的变量赋值给局部变量index之后还是不行呢？分配i 与将i 作为参数传递给另一个函数不同吗？我的意思是，i 不是原语，不应该被复制吗？

我很困惑，如果有人能告诉我这里发生了什么，我将不胜感激。

Answer 1

我认为您期望var index = i; 在循环的每次迭代中都被执行，通过为不同的index 变量设置不同的值，这不是发生的情况。在每次迭代期间，仅将函数分配给处理程序，函数不会运行。

这句话只有在你点击时才会执行，到那时i 的值已经是你循环中的最高值了。您阅读的解决方案可以解决这个确切的问题。

循环期间发生了什么：

inpArr[0].onclick = <a function>; //(local)index=undefined; i=0;
inpArr[1].onclick = <a function>; //(local)index=undefined; i=1;
inpArr[2].onclick = <a function>; //(local)index=undefined; i=2;
inpArr[3].onclick = <a function>; //(local)index=undefined; i=3;
.
.
inpArr[9].onclick = <a function>; //(local)index=undefined; i=9;

当你点击时

index = i; //i=9; (local)index=9;