下面的代码中，为什么 elems[i]的结果是 undefined?

2019-05-21 21:25:21 +08:00
 manyfreebug
下面的代码中，为什么 elems[i]的结果是 undefined?

代码及运行效果也可在 JS Bin 中查看:https://jsbin.com/tixujoyibu/edit?html,css,js,console,output

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="link">
    <a href="#">壹</a>
    <a href="#">贰</a>
    <a href="#">叁</a>
    <a href="#">肆</a>
  </div>
</body>
</html>

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]); 
  });
    
}
3002 次点击
所在节点    JavaScript
8 条回复
rabbbit
2019-05-21 21:29:35 +08:00
for(var i = 0; i < elems.length; i++ ){
->
for(let i = 0; i < elems.length; i++ ){

知识点: 作用域 闭包
ted94
2019-05-21 21:37:49 +08:00
闭包。你都有输出 i 了。
molvqingtai
2019-05-21 22:00:30 +08:00
把 var 改为 let
wi
2019-05-21 22:09:56 +08:00
闭包，for 执行完之后 i == elems.length
iugo
2019-05-21 22:41:33 +08:00
作为初中教师资格证持有者, 详解一下:

```
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);
}
```
brust
2019-05-22 09:09:00 +08:00
把 var i 换成 let i
chenyu0532
2019-05-22 09:42:31 +08:00
自从看了 var let 的区别，反正我是完全抛弃了 var
manyfreebug
2019-05-22 18:08:21 +08:00
都提到了闭包，看来是我没掌握闭包

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/566347

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX