下面的代码中,为什么 elems[i]的结果是 undefined?
代码及运行效果也可在 JS Bin 中查看:https://jsbin.com/tixujoyibu/edit?html,css,js,console,output
JS Bin
var elems = document.getElementsByTagName("a");
for(var i = 0; i < elems.length; i++ ){
elems[i].addEventListener("click",function(){
console.log("i = " + i);
//运行结果:"I am link # undefined",为什么得到的 elems[i]是 undefined 呢?
console.log("I am link # " + elems[i]);
});
}
for(var i = 0; i < elems.length; i++ ){
->
for(let i = 0; i < elems.length; i++ ){
知识点: 作用域 闭包
闭包。你都有输出 i 了。
把 var 改为 let
闭包,for 执行完之后 i == elems.length
作为初中教师资格证持有者, 详解一下:
```
for(var i = 0; i < 4; i++){
elems[i].addEventListener("click",function(){
console.log("i = " + i);
});
}
```
1. 当 for 循环执行时, 在外层作用域定义了一个 i, 初始值是 0.
2. 事件监听函数会从外部引入一个变量 i. (所谓闭包)
3. 每次 i < 4 判断成功之后, 都执行一次 i++, 所以 i = 3 时, 后面跟着执行了 i++, 此时 i = 4. 下次再判断时不再成立, 所以 i 停留在 4.
4. 数组长度为 4, 只有 0,1,2,3. 所以 elems[4] 就是 undefined.
或许换成以下这样你能理解:
```
var i = 0;
for(; i < 4; i++){
elems[i].addEventListener("click", test);
}
function test(){
console.log("i = " + i);
}
```
把 var i 换成 let i
自从看了 var let 的区别,反正我是完全抛弃了 var
都提到了闭包,看来是我没掌握闭包