经典的闭包问题

最新推荐文章于 2022-06-26 17:17:11 发布

一如既往的坚持

最新推荐文章于 2022-06-26 17:17:11 发布

阅读量315

点赞数

分类专栏： javascript 文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/hylwan8884658/article/details/121776203

版权

javascript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

这里使用 var 关键字声明了循环迭代变量 i，但这个变量并不会被限制在 for 循环的块级作用域内。因此，渲染到页面上之后，点击每个div都会弹出元素总数。这是因为在执行单击处理程序时，迭代变
量的值是循环结束时的最终值，即元素的个数。而且，这个变量 i 存在于循环体外部，随时可以访问。

<html>
    <body>
        <div style="width: 100px; height: 100px; background-color: red;">
            <button>点击按钮1</button>
        </div>

        <div style="width: 100px; height: 100px; background-color: red;">
            <button>点击按钮1</button>
        </div>

        <div style="width: 100px; height: 100px; background-color: red;">
            <button>点击按钮1</button>
        </div>
    </body>
    <script type="text/javascript">
        let divs = document.querySelectorAll('div');
        // 达不到目的！
        for (var i = 0; i < divs.length; ++i) {
            divs[i].addEventListener('click', function() {
                alert(i);
            });
        }
    </script>
</html>

用户触发的onclick事件之前，for循环已经执行结束了，而for循环执行完的时候i=3。。无论点击哪个弹框，都显示为3
使用立即执行函数解决

let divs = document.querySelectorAll('div');
 for (var i = 0; i < divs.length; ++i) {
     divs[ii].addEventListener('click', (function(frozenCounter) {
         return function() {
             alert(frozenCounter);
         };
     })(ii));
 }

在立即执行函数执行的时候，i 的值被赋值给 ii，此后 ii 的值一直不变,i 的值从 0 变化到 3，对应3 个立即执行函数，这 3个立即执行函数里面的 ii 「分别」是 0、1、2。
点击第一个按钮，显示0，第二个按钮显示1，第三个显示2

let也可以实现上述的功能，仅仅是将for循环中的var换成let

let divs = document.querySelectorAll('div');
for (let i = 0; i < divs.length; ++i) {
    divs[i].addEventListener('click', function(frozenCounter) {
        return function() {
            alert(frozenCounter);
        };
    });
}

一如既往的坚持

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
经典的闭包问题

这里使用 var 关键字声明了循环迭代变量 i，但这个变量并不会被限制在 for 循环的块级作用域内。因此，渲染到页面上之后，点击每个div都会弹出元素总数。这是因为在执行单击处理程序时，迭代变量的值是循环结束时的最终值，即元素的个数。而且，这个变量 i 存在于循环体外部，随时可以访问。<html> <body> <div style="width: 100px; height: 100px; background-color: red;">
复制链接

扫一扫