闭包函数：声明在一个函数中的函数，叫做闭包函数。
闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。
闭包是指一个函数，其可以调用另一个函数作用域中的变量；
闭包只能取得包含函数中任何变量的最后一个值，如：
实例1
function createFunctions(){ var result = new Array(); for (var i=0; i < 10; i++){ result[i] = function(){ return i; }; } return result; } var funcs = createFunctions(); for (var i=0; i < funcs.length; i++){ console.log(funcs[i]()); //10 10 10 10 10 10 10 ...
问题解决：可以通过创建另一个匿名函数，强制让闭包的行为符合预期。
function createFunctions() { var result = new Array(); for (var i = 0; i < 10; i++) { result[i] = function(num) { return function() { return num; }; }(i) } return result; } var funcs = createFunctions(); for (var i = 0; i < funcs.length; i++) { console.log(funcs[i]()); //0 1 2 3 4 5 6 7 8 9 }
实例2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li> </ul> <script type="text/javascript"> var elements=document.getElementsByTagName('li'); var length=elements.length; for(var i=0;i<length;i++){ elements[i].onclick=function(){ alert(i); } } </script> </body> </html>
因为闭包，点击每一个，弹出的结果都为4；
可以通过创建另一个匿名函数，强制让闭包的行为符合预期。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS 闭包</title> </head> <body> <ul> <li>hello 1</li> <li>hello 2</li> <li>hello 3</li> <li>hello 4</li> </ul> <script type="text/javascript"> var elements = document.getElementsByTagName('li'); var length = elements.length; for (var i = 0; i < length; i++) { elements[i].onclick = function(num) { return function() { alert(num); } }(i) } </script> </body> </html>
或者
var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { (function(i) { lis[i].onclick = function() { console.log(i); }; })(i); }
或者
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li> </ul> <script type="text/javascript"> var elements=document.getElementsByTagName('li'); var length=elements.length; var handler = function(i){ return function (){ alert(i); } } for(var i=0;i<length;i++){ elements[i].onclick= handler(i); } </script> </body> </html>
下面为什么会立即执行呢？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>click me</li> <li>click me</li> <li>click me</li> <li>click me</li> </ul> <script type="text/javascript"> var elements=document.getElementsByTagName('li'); var length=elements.length; var handler = function(i){ // return function (){ alert(i); // } } for(var i=0;i<length;i++){ elements[i].onclick= handler(i); } </script> </body> </html>
闭包的作用:
1. 可以读取函数内部的变量
2. 让这些变量的值始终保持在内存中。
出于种种原因，我们有时候需要得到函数内的局部变量。但是，前面已经说过了，正常情况下，这是办不到的，只有通过变通方法才能实现。
那就是在函数的内部，再定义一个函数。
function f1(){ n=999; function f2(){ alert(n); // 999 } }
在上面的代码中，函数f2就被包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。但是反过来就不行，f2内部的局部变量，对f1 就是不可见的。这就是Javascript语言特有的“链式作用域”结构（chain scope），
子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们不就可以在f1外部读取它的内部变量了吗！
function f1(){ n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999
function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000
在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是999，第二次的值是1000。这证明了，函数f1中的局部变量n一直保存在内存中，并没有在f1调用后被自动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。
这段代码中另一个值得注意的地方，就是“nAdd=function(){n+=1}”这一行，首先在nAdd前面没有使用var关键字，因此 nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个匿名函数（anonymous function），而这个
匿名函数本身也是一个闭包，所以nAdd相当于是一个setter，可以在函数外部对函数内部的局部变量进行操作。
使用闭包的注意点
1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
还没懂?再看看https://blog.csdn.net/weixin_43586120/article/details/89456183