js闭包-简介

最新推荐文章于 2024-09-23 08:37:48 发布

bmxklYzj

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量479

点赞数

分类专栏： js 文章标签：闭包 javascript

本文链接：https://blog.csdn.net/yang_zongjun/article/details/51333073

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js中闭包算是很重要的了吧，然而自己一直不太理解==

参考资料：mdn闭包那一章

昨天看微博上阮老师发了一条，说是es6中的let可以解决经典闭包的问题，我试验了一下，果真可以。

/*for(var i = 0; i < 10; i++) {
        setTimeout(function () {
            console.log(i);
        }, 100*i);
   }
   console.log("finally i:" + i);*/

   /*for(let i = 0; i < 10; i++) {
        setTimeout(function () {
            console.log(i);
        }, 100*i);
   }

第一个全部输出是10，后一个输出0-9

关于es6中的let关键字

经典闭包问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">

<script>

   /*for(var i = 0; i < 10; i++) {
        setTimeout(function () {
            console.log(i);
        }, 100*i);
   }
   console.log("finally i:" + i);*/

   /*for(let i = 0; i < 10; i++) {
        setTimeout(function () {
            console.log(i);
        }, 100*i);
   }
   //console.log("finally i:" + i);*/

   var buttons = document.querySelectorAll("input");

/*
无论最后点击那个button，显示的都是5，因为onclick是异步触发的，
当事件被触发时for循环早已结束，内部函数指向的都是i，此时i是5
所以在onclick事件函数中顺着原型链从内到外查找变量i时，找到的值总是5
 */
   +function () {
        var len = buttons.length;
        for(var i = 0; i < len; i++) {
            buttons[i].onclick = function () {
                console.log(i);
            }
        }
   }();

/*
把每次循环的变量i都封装起来，在onclick事件函数中顺着原型链从内到外查找变量i时，
会先找到被封装在闭包环境中的i，
 */
   /*+function () {
        var len = buttons.length;
        for(var i  = 0; i < len; i++) {
            +function (i) {
                buttons[i].onclick = function () {
                    console.log(i);
                }
            }(i);
        }
   }();*/

</script>
</body>
</html>