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;

闭包内部循环和局部变量

1 个答案: