让我们在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();

在第一个区块中，我是0

但在第二个区块，我是9。

我真的不明白为什么？

Answer 1

因为您的第一个i位于块和doesn't get changed afterwards中，而您的第二个i（不在块中）并且设置为{在单击处理程序运行之前{1}}。您可以通过执行

来模拟循环中的行为

9

并且您还可以通过将范围放在循环周围来模拟赋值的更改行为：

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

Answer 2

循环结束后，i循环中let声明的for将不存在。第二个i是独立的，您将其设置为9，这就是第二个i的值为9的原因。

let statement documentation