JavaScript for循环与onclick事件交互的陷阱
本文分析在使用for循环为多个元素添加onclick事件时，经常遇到的一个问题：点击事件总是输出循环结束后的变量值。 这与JavaScript的变量作用域和闭包机制密切相关。
以下代码片段展示了三个具有box类的div元素，尝试在for循环中为每个元素添加点击事件处理程序。 然而，无论点击哪个box元素，console.log(i)始终输出3，即循环结束后的i值。
这是因为使用var声明的变量具有函数作用域。onclick函数并非立即执行，而是作为回调函数在点击事件触发时才执行。此时，for循环已结束，i的值已变为3。所有onclick函数都引用同一个i变量，其值在事件触发时始终为3。
立即学习“Java免费学习笔记（深入）”；
这并非var的全局污染或变量提升问题，而是闭包造成的。每个onclick函数都创建了一个闭包，包含对i变量的引用，但这个引用指向的是同一个i变量，而不是每次迭代时创建的新变量。
解决方法是使用let关键字声明循环变量i。let声明的变量具有块级作用域，每次循环迭代都会创建一个新的i变量。这样，每个onclick函数都引用自身迭代时对应的i变量，从而输出正确的值。 修改后的代码如下：
var boxs = document.getElementsByClassName('box');
for (let i = 0; i < boxs.length; i++) {
boxs[i].onclick = function() {
console.log(i);
};
}
使用let关键字，确保每个onclick函数拥有独立的i变量副本，从而正确记录点击事件对应的索引值。
