JS闭包

什么是JS闭包？

　　一个可以访问到其他函数内部变量的函数与它访问的函数和变量整体形成一个闭包。

1 function a() {
2     var num = 1;
3     return function b() {
4         return num;
5     }
6 }

上述代码是闭包最常见的一种表现形式，可以说函数b就是闭包吗？闭包的含义中还要包含上num、函数a才更准确。

　　闭包常与变量作用域一起讨论。通常情况下，一个函数是无法访问另一个函数内部变量的，闭包就是为了解决这个问题的。

　　实际使用中，常常不小心就会出错。例如，点击一个列表，生成对应的索引：

 1 <body>
 2     <ul>
 3         <li>test1</li>
 4         <li>test2</li>
 5         <li>test3</li>
 6         <li>test4</li>
 7         <li>test5</li>
 8         <li>test6</li>
 9         <li>test7</li>
10         <li>test8</li>
11         <li>test9</li>
12         <li>test10</li>
13     </ul>
14     <script>
15         var list = document.querySelectorAll('ul li');
16         for(var i = 0, len = list.length; i < len; i++) {
17             lis[i].addEventListener('click', function () {
18                 console.log(i);
19             }, false);
20         }
21     </script>
22 </body>

上述代码每次打印的都是10。有两种方法避免：

1、加入立即执行

1         for(var i = 0, len = list.length; i < len; i++) {
2             (function (i) {
3                 list[i].addEventListener('click', function () {
4                     console.log(i);
5                 }, false);
6             })(i)
7         }

2、使用ES6的let代替var，执行变量声明

闭包与全局变量是导致内存泄漏的两大原因

闭包的用处：

模块化编程
提升到父级处理。

有一个按钮，点击按钮时，处理这个事件，也可以将这个事件转发到父组件中处理。这时就会用到闭包。

posted @ 2019-05-10 17:21  鱼儿鱼儿不要飞  阅读(119)  评论(0)    收藏  举报