ES6标准中用let代替闭包实现给按钮绑定事件监听

最新推荐文章于 2021-03-10 23:43:03 发布

JohnKeatinghhh

最新推荐文章于 2021-03-10 23:43:03 发布

阅读量524

点赞数

分类专栏： javascript学习笔记文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_41604040/article/details/109124499

版权

javascript学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

ES6标准中用let代替闭包实现给按钮绑定事件监听

let const var 是一个老生常谈的话题了，ES6中let/const与之前的var的区别在于：

只在块级作用域有效，避免了不同作用域互相污染；
不能重复声明；
不会预处理声明，不存在奇怪的变量提升。

具体内容可以参考：阮一峰大佬的ES6 入门教程
这里mark一个十分浅显的例子，记录一下。

我要给三个不同的<button>绑定不同的监听函数，每个函数都alert一下i，如果我写成：

<body>
    <button id="btn01">btn01</button>
    <button id="btn02">btn02</button>
    <button id="btn03">btn03</button>
    <script>
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            var btn = btns[i];
            btn.onclick = function(){
            	alert(i)
            }
        }
    </script>
</body>

那么根据浏览器的运行逻辑，绑定给onclick的回调函数只有在单击响应按钮被触发时，才会被其他线程异步处理，然后把函数放进消息队列，交给主线程执行。而这个时候，主线程上的同步JS代码已经执行完了，也就是说i已经等于3退出循环了，所以这时候3个回调函数中的alert(i)中的i，都是window.i，等于3。

在没有let之前，我们可以通过闭包来解决这个问题：即设置一个IIFE（立即执行函数表达式），通过这个函数的闭包来解决。

    <button id="btn01">btn01</button>
    <button id="btn02">btn02</button>
    <button id="btn03">btn03</button>
    <script>
        var btns = document.getElementsByTagName('button');
        for (var i = 0; i < btns.length; i++) {
            var btn = btns[i];
            (function (i) {
                btn.onclick = function () {
                    alert(i+1)
                }
            })(i)
        }
    </script>

这个IIFE会被执行3次，每次都会接收一个变量window.i并深拷贝成自己作用域的i。IIFE函数的内部嵌套着一个回调函数，这个函数用到了外部函数IIFE作用域的i，因此每个IIFE的i都会被保留下来，直到btn.onclick = null闭包死亡。

ES6中的let提供了一个优雅的解决方案：

```html
    <button id="btn01">btn01</button>
    <button id="btn02">btn02</button>
    <button id="btn03">btn03</button>
    <script>
        var btns = document.getElementsByTagName('button');
        for (let i = 0; i < btns.length; i++) {
            var btn = btns[i];
            btn.onclick = function () {
                alert(i + 1)
            }
        }
    </script>

因为let i的作用域仅限于for循环后的代码块，回调函数alert(i+1)不会用去找全局的i，而是找块级作用域里的i因此不会出现var i的三个按钮都返回同一个数的情况。

JohnKeatinghhh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6标准中用let代替闭包实现给按钮绑定事件监听

ES6标准中用let代替闭包实现给按钮绑定事件监听let const var 是一个老生常谈的话题了，ES6中let/const与之前的var的区别在于：只在块级作用域有效，避免了不同作用域互相污染；不能重复声明；不会预处理声明，不存在奇怪的变量提升。具体内容可以参考：阮一峰大佬的ES6 入门教程这里mark一个十分浅显的例子，记录一下。我要给三个不同的<button>绑定不同的监听函数，每个函数都alert一下i，如果我写成：<body> <but
复制链接

扫一扫