您的位置：首页 > Web前端 > JavaScript

欢迎使用CSDN-markdown编辑器

2017-01-19 16:58 169 查看

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
</head>

<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</body>
<script>
var nodeList = document.getElementsByTagName('li');

for (var i = 0; i < nodeList.length; i++) {
nodeList[i].onclick = function() {
console.log(i);
}
}
</script>

</html>

此时当点击任意li时，控制台输出的都是4。

onclick

是个异步事件。而循环本身执行快的多，等到循化结束后i值为4，此时不管点击哪一个输出都是4。

将

for

循环中的

var

改为

let

时，则正常输出。

let

是严格模式定义变量，每次循环的i的引用是不同的，能正确的把每次循环里面正确的i值传递到

onclick

里面，按

for

表达式

let i = 0; i < nodeList.length; i++

的定义，哪个标签被点击，就输出对应的i值。

for (var i = 0; i < nodeList.length; i++) {
nodeList[i].num = i;
nodeList[i].onclick = function() {
console.log(this.num);
}
}

li增加一个新的属性是

num

，此时的num并没有在onclick事件函数中，所以num属性直接被赋值为0，1，2，3，当事件函数值执行的时候，输出的是对应的li的num的值，而这个时候的num已经在上一步的时候被执行了。

for (var i = 0; i < nodeList.length; i++) {
nodeList[i].onclick = (function() {
return function() {
console.log(i);
}
})(i)
}

使用立即执行函数解决该问题。此时

输出的结果为0，1，2，3。

此外也可以使用增加属性的方法使得i的值理想输出。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript 闭包

相关文章推荐

新的分享

章节导航