JavaScript的for循环闭包

最新推荐文章于 2023-05-31 13:31:53 发布

galler717

最新推荐文章于 2023-05-31 13:31:53 发布

阅读量375

点赞数 1

分类专栏： JavaScript 文章标签： JavaScript 闭包

本文链接：https://blog.csdn.net/preserve717/article/details/54617834

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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)
}

使用立即执行函数解决该问题。此时i输出的结果为0，1，2，3。
此外也可以使用增加属性的方法使得i的值理想输出。