js中for循环变量作用域

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)
}