for循环中i的值的问题

发表于 | 分类于 |

JavaScript创建十个a标签，点击每个a标签弹出对应的序号。

先来看错误的版本👇

1
2
3
4
5
6
7
8
9
10
11
12
let i, a
for (i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'

    a.addEventListener('click', function (e) {
        e.preventDefault() //默认事件行为将不再触发。
        alert(i)
    })

    document.body.appendChild(a)
}

这样子最终点击每个a标签弹出的都是10，因为给a标签绑定点击事件的时候并没有触发alert(i)的函数，而alert(i)真正执行实在a标签被点击了之后，这时 i 作为一个全局变量已经是10了。

使用let块级作用域

1
2
3
4
5
6
7
8
9
10
let a
for (let i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click', function (e) {
        e.preventDefault()
        alert(i)
    })
    document.body.appendChild(a)
}

利用 let 来声明 i，这样每次循环都会产生一个 i 的块级作用域，每个块级作用域中的 i 的值是不同的。每次触发点击事件，alert(i)都会取对应的块级作用域中找 i 的值。从而避免了都是10的错误结果。

使用立即执行函数

1
2
3
4
5
6
7
8
9
10
11
12
let a, i
for (i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i + '<br>';
    (function (j) {
        a.addEventListener('click', function (e) {
            e.preventDefault()
            alert(j)
        })
    })(i)
    document.body.appendChild(a)
}