js中for循环变量作用域

最新推荐文章于 2024-12-04 00:36:20 发布

lalifeier

最新推荐文章于 2024-12-04 00:36:20 发布

阅读量3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Gushiyuta/article/details/92433503

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了JavaScript中函数作用域与全局作用域的特点，分析了for循环中使用var关键字导致的作用域问题，并提供了使用立即执行函数和let声明解决此问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中作用域只有函数作用域和全局作用域，没有块级作用域

错误示例：

var i
for (i = 0; i < 10; i++) {
    var a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function (e) {
        e.preventDefault()
        alert(i)
    })
    document.body.appendChild(a)
}

无论点击哪个按钮，都是显示10

在函数内部，i的值为10，这是因为for循环没有块级作用域的概念，在通过作用域链引用i时引用的是全局变量对象中的i，在全局作用域中只有一个确定的i值，也就是for循环完毕之后的i的值。

正确示例1

把i作为一个参数传进去，直接将立即执行函数赋值给click事件。

var i
for (i = 0; i < 10; i++) {
    (function (i) {
        a.innerHTML = i + '<br>'
        a.addEventListener('click', function (e) {
            e.preventDefault()
        alert(i)
        })
    document.body.appendChild(a)
    })(i)
}

正确示例2

click事件的父级作用域的上级是for循环，在每次循环中let声明变量i，而不是同一个变量i被重新赋值

let声明,当前的变量只在本轮循环有效，所以每一次循环的i其实都是一个新的变量

for (let i = 0; i < 10; i++) {
    var a = document.createElement('a')
    a.addEventListener('click', function (e) {
        e.preventDefault()
        alert(i)
    })
    document.body.appendChild(a)
}