关于 for 循环和 onclick() 事件中循环变量的问题
在一个学习案例中，使用以下代码为三个.box元素添加点击事件：
var boxs = document.getelementsbyclassname('box');
for (var i = 0; i < boxs.length; i++) {
boxs[i].onclick = function () { // i = 1,2,3
console.log(i); // i = 3
}
}然而，发现 onclick 事件中 i 的值始终是循环最终的值 3。为什么会发生这种情况？
问题的根源
问题产生的原因与 javascript 中 var 变量在函数作用域和全局作用域中所遵循的不同规则有关。
当用 var 声明变量时，它在整个函数中都有效。这意味着，在 for 循环内用 var 声明的变量 i 实际上被提升到了函数作用域（在本例中即全局作用域）。
因此，对于循环中的每一次迭代，都会将 i 的值提升到全局作用域。当点击事件被触发时，它访问的 i 是全局变量，此时的值已经更新为 3，也就是循环的最后一次迭代。
解决方案
为了解决这个问题，可以改用 let 或 const 来声明循环变量 i，以便将变量的作用域限制在循环内。例如：
var boxs = document.getElementsByClassName('box');
for (let i = 0; i < boxs.length; i++) {
boxs[i].onclick = function () { // i = 0,1,2
console.log(i); // i = 0,1,2
}
}使用 let 或 const，循环内的每个迭代都会创建一个新的 i 变量，其值在事件被触发时保持不变。
