让用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（不是块），并运行单击处理之前，不会获取设置为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

与在let申报i在循环结束后，for循环将不存在。第二i是独立的，你设置的是9，这就是为什么第二i的值为9

let statement documentation