JavaScript中for循环使用var绑定点击事件全部弹出#5原因查询

出现这个现象的核心是var关键字的作用域特性和异步回调的执行时机共同导致的，具体原因拆分如下：

• var声明的变量没有块级作用域，你在for循环头部用var i = 0声明的变量i，实际是挂载在全局作用域下的同一个变量，整个循环的5次迭代共享这一个i。
• 绑定给div的onclick回调函数不会在循环执行时就运行内部代码，只会在你触发点击动作的时候才执行。循环执行的过程中只是把5个回调函数分别绑定给了对应的div，并不会立刻读取i的值。
• 当for循环完全执行完毕时，i会完成最后一次自增变成5（循环终止条件为i < 5不成立，此时i的值就是5）。后续不管点击哪个div触发回调，函数里读取的都是全局作用域下已经变成5的i，所以所有点击都会弹出#5的提示。

如果你改用let声明循环变量i就可以得到预期结果：let支持块级作用域，每次循环迭代都会生成一个独立的、仅属于当前迭代块的i变量，每个绑定的回调都会捕获对应迭代的i值，点击时就能正确输出0~4对应的序号。

问题对应复现代码 #

HTML代码 #

<div id="box"></div>

JS代码 #

var div;
var box = document.getElementById('box');
for (var i = 0; i < 5; i++) {
  div = document.createElement('div');
  div.onclick = function() {
    alert('this is box # ' + i);
  }
  box.appendChild(div);
}

内容的提问来源于stack exchange，提问作者Ana kamilova