输入Javascript。混乱

Question

我对这段代码真的很困惑

var box = document.getElementsByClassName('box-value');

for(let i = 0; i < box.length; i++){
    box[i].onclick = function(){
        console.log(i);
    }
    console.log("End loop. i:" + i);
}

let i = 0;
box[i].onclick = function(){
    console.log(i);
}
i = 9;

box[0].onclick();

在第一个块中，i 为 0

但是在第二个块中，i 是 9。

我真的不明白为什么？

Answer 1

因为您的第一个

i

位于 块 中并且之后 不会更改，而您的第二个

i

（不在块中）并且在运行单击处理程序之前设置为

9

。您可以通过执行以下操作来模拟循环的行为

{
    let i = 0; // one variable that stays constant
    box[i].onclick = function(){
        console.log(i);
    };
}
let i = 9; // a different variable

您还可以通过将范围置于循环周围来模拟赋值的改变行为：

let i = 0;
for(; i < box.length; i++) {
    box[i].onclick = function() {
        console.log(i);
    };
    console.log("End loop. i:" + i);
}

Answer 2

在

i

循环中用

let

声明的

for

在循环结束后将不存在。第二个

i

是单独的，您将其设置为 9，这就是为什么第二个

i

的值为 9。

let

声明文档