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()的用法。
【输出结果】
28
【样例代码】
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中常用的实现方式，是学习过程的重点，此后还会对其应用的知识点进一步整理。
明天考蓝桥杯了，祝自己好运！
原文：https://www.cnblogs.com/chrischen98/p/10586181.html