<!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>
result.png
此时当点击任意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++) {
(function(i) {
nodeList[i].onclick = function() {
console.log(i);
}
})(i)
}
使用立即执行函数解决该问题。此时i输出的结果为0，1，2，3。
此外也可以使用增加属性的方法使得i的值理想输出。
网友评论