for 循环和 onclick 事件中，循环变量 i 的值始终为 3，为什么？

var boxs = document.getelementsbyclassname('box');  for (var i = 0; i <p>然而，发现 onclick 事件中 i 的值始终是循环最终的值 3。为什么会发生这种情况？</p><p><strong>问题的根源</strong></p><p>问题产生的原因与 JavaScript 中 var 变量在函数<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/35787.html" target="_blank">作用域</a>和全局作用域中所遵循的不同规则有关。</p><p>当用 var 声明变量时，它在整个函数中都有效。这意味着，在 for 循环内用 var 声明的变量 i 实际上被提升到了函数作用域（在本例中即全局作用域）。</p><p>因此，对于循环中的每一次迭代，都会将 i 的值提升到全局作用域。当点击事件被触发时，它访问的 i 是全局变量，此时的值已经更新为 3，也就是循环的最后一次迭代。</p><p><strong>解决方案</strong></p><p>为了解决这个问题，可以改用 let 或 const 来声明循环变量 i，以便将变量的作用域限制在循环内。例如：</p><pre class="brush:php;toolbar:false">var boxs = document.getElementsByClassName('box');  for (let i = 0; i <p>使用 let 或 const，循环内的每个迭代都会创建一个新的 i 变量，其值在事件被触发时保持不变。</p>