关于 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 变量，其值在事件被触发时保持不变。
以上就是for 循环和 onclick 事件中，循环变量 i 的值始终为 3，为什么？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1494586.html
微信扫一扫 
支付宝扫一扫 
