块级作用域、闭包、for循环绑定事件

最新推荐文章于 2021-04-12 23:09:02 发布

chexian8938

最新推荐文章于 2021-04-12 23:09:02 发布

阅读量117

点赞数

原文链接：https://my.oschina.net/u/3499937/blog/907696

版权

用纯JS实现，点击一个列表时，输出对应的索引

<body>
<ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
    <li>test6</li>
    <li>test7</li>
    <li>test8</li>
    <li>test9</li>
    <li>test10</li>
</ul>
<script>
    var lis = document.querySelectorAll('ul li');
    for(var i = 0, len = lis.length; i < len; i++) {
        lis[i].addEventListener('click', function () {
            console.log(i);
        }, false);
    }
</script>
</body>

你运行一下代码会发现，无论你点击哪个列表，控制台都是输出10。这是因为var声明的变量是函数作用域的，而不是块级作用域的。也就是说，for循环10次，每次都是改变同一个i，所以它的值会从0一直加到10。还有个问题是闭包导致的，闭包保存的是外部变量的引用，而不是值。也就是说，循环10次监听器创建了10 个闭包，它们里面的i引用的是同一个啊。所以全部都指向了10.
要解决这个问题有两种方法。一种是使用ES6的let来替代 var i = 0 里面的var，因为let支持块级作用域。改成如下就正常了。

    for(let i = 0, len = lis.length; i < len; i++) {
        lis[i].addEventListener('click', function () {
            console.log(i);
        }, false);
    }

还有一种方法，就是很多经典书本都提到的，使用立即执行函数来切断闭包对外部变量i的引用：

    for(var i = 0, len = lis.length; i < len; i++) {
        (function (i) {
            lis[i].addEventListener('click', function () {
                console.log(i);
            }, false);
        })(i)
    }

当然啦，如果对闭包不是很熟练，还可以通过事件委托来避开这个陷阱哈，代码如下：

    var ul = document.querySelector('ul');
    var lis = document.querySelectorAll('ul li');
    ul.addEventListener('click', function (e) {
        var target = e.target;
        if(target.nodeName.toLowerCase() === 'li') {
            console.log([].indexOf.call(lis, target));
        }
    }, false);

转载于:https://my.oschina.net/u/3499937/blog/907696