JavaScript闭包应用的整理（一）

0 什么是JavaScript闭包？

当函数定义内部的函数被保存到外部时，就会形成闭包。闭包会导致作用域链不释放，造成内存泄漏。

1 获取局部变量

【练习目的】

　　下面这个练习，是为了通过闭包实现获取定义在function内部的局部变量值。

【注意事项】

　　最后a()函数返回的是b()的执行。因此在调用a()的时候，也即调用的是b()的执行。

　　若a()返回的是b函数名，为了得到scope局部变量的值，对a的调用形式应为a()()。

【输出结果】

　　‘local’

【样例代码】

 1 var scope = 'global';
 2     function a(){
 3         var scope = 'local';
 4         var b = function(){
 5             return scope;
 6         }
 7         return b();
 8     }
 9 
10     console.log(a());

2 实现数组累加

【练习目的】

　　下面这个练习，是为了通过闭包实现状态的保存，同时练习数组reduce方法。

【注意事项】

　　注意reduce()的用法。　

【输出结果】

【样例代码】

 1 function cumulate_sum(arr){
 2         var sum = function(){
 3             return arr.reduce(function(x , y){
 4                 return x + y;
 5             });
 6         }
 7         return sum();
 8     }
 9     
10     console.log(cumulate_sum([1,2,3,4,5,6,7]));

3 实现点击相应位置输出对应序号

【练习目的】

　　下面这个练习，实现了通过立即执行函数来实现值的保存。

【注意事项】

　　如果不采用立即执行函数，则由于拷贝出来的i为最终的i值，输出会恒为5.

　　此外需要注意鼠标点击事件的绑定方法addEventListener('click' , function(){})

　　其中的第二个参数为回调函数。　

【输出结果】

　　通过浏览器进行观察

【样例代码】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Closure</title>
 8     //编写盒子样式
 9     <style>
10         *{
11             margin :0;
12             padding:0;
13             list-style: none;
14         }
15         li{
16             height:50px;
17             width: 300px;
18             border:1px solid #000;
19             text-align:center;
20             line-height: 50px;
21             color:#000;
22             margin:30px;
23         }
24     </style>
25 </head>
26 <body>
27     // 生成盒子
28     <ul>
29         <li>1</li>
30         <li>2</li>
31         <li>3</li>
32         <li>4</li>
33         <li>5</li>
34     </ul>
35     <script>
36     var oLi = document.getElementsByTagName('li');
37     for(var i = 0 ; i < oLi.length ; i ++){
38         (function(i){
39             oLi[i].addEventListener('click' , function(){
40                 console.log(i + 1);
41             })
42         })(i);
43     }        
44     </script>
45 </body>
46 </html>

4 写在后面

　　闭包是JavaScript中常用的实现方式，是学习过程的重点，此后还会对其应用的知识点进一步整理。

　　明天考蓝桥杯了，祝自己好运！

JavaScript闭包应用的整理（一）

猜你喜欢