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

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《for 循环和 onclick 事件中，循环变量 i 的值始终为 3，为什么？》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

关于 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，为什么？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！