学习Javascript闭包（Closure）

Posted 2020-07-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习Javascript闭包（Closure）相关的知识，希望对你有一定的参考价值。

闭包作用

1.让变量驻留在内存中

2.函数外部可以读取函数内部的私有变量

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>匿名函数+Closure</title>
 6     <script type="text/javascript">
 7 
 8     window.onload = function(){
 9         var elems=document.getElementsByTagName(‘a‘);
10         for (var i = 0; i < elems.length; i++) {
11             (function(lockIndex){
12                 elems[lockIndex].addEventListener(‘click‘, function(event) {
13                      // body...  
14                      console.info(lockIndex); //
15                 }, false);  
16             })(i);
17         };
18     }
19     </script>
20 </head>
21 <body>
22     <a href="#none">用闭包保存状态</a><br/>
23     <a href="#none">和普通function执行的时候传参数一样，自执行的函数表达式也可以这么传参，因为闭包直接可以引用传入的这些参数，利用这些被lock住的传入参数，自执行函数表达式可以有效地保存状态。</a><br/>
24     <a href="#none">这个代码是错误的，因为变量i从来就没背locked住</a><br/>
25     <a href="#none">这个是可以用的，因为他在自执行函数表达式闭包内部</a>
26 </body>
27 </html>

模拟私有变量

 1     function Counter( start ){
 2         var count = start;
 3         return {
 4             increment : function(){
 5                 ++count;
 6             },
 7             getCount : function(){
 8                 return count;
 9             }
10         }
11     }
12 
13     var obj = Counter(10);
14 
15     obj.increment(); //count 自加
16 
17     var count = obj.getCount(); //11
18 
19     obj.increment(); //count 自加
20 
21     var count2 = obj.getCount(); //12

这里，Counter 函数返回两个闭包，函数 increment 和函数 get。这两个函数都维持着对外部作用域 Counter 的引用，因此总可以访问此作用域内定义的变量 count.

 1     for(var i = 0, len = 3; i < len; i++){
 2         (function(lockIndex){       
 3             var count = lockIndex ;  //匿名函数 init 初始化 时 -- 将循环变量i的copy 赋值给 变量 count    
 4             setTimeout(function(){
 5                 console.log(‘count‘+count);
 6             }, 1500)
 7         })(i)
 8     }
 9 
10 
11    for(var i = 0, len = 3; i < len; i++){
12         setTimeout((function(lockIndex){
13             var count = lockIndex ;  //循环变量i的copy
14             console.log(‘count‘+count);
15         })(i), 1500)
16     }

以上是关于学习Javascript闭包（Closure）的主要内容，如果未能解决你的问题，请参考以下文章

学习Javascript闭包（Closure）