js-----闭包浅谈（Closure）

本文主要是介绍js-----闭包浅谈（Closure），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

《开场白》
作为初级菜鸟的我，对与闭包知识，真的是一团迷雾，我这里就先把我现阶段对闭包的理解写出来，先记一下，随后对闭包理解深入了，再看看！

1.什么是闭包？

“菜鸟教程”上这样总结到：闭包就是一个函数引用另一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。这是优点也是缺点，不必要的闭包只会增加内存消耗。或者说闭包就是子函数可以使用父函数的局部变量，还有父函数的参数。看起来还是云里雾里的，接着看看下面的例子吧！

2.回顾一下局部变量和全局变量

首先必须理解Javascript特殊的变量作用域。闭包这里牵扯到变量，来吧
1. 全局变量：可以在任意位置访问的量就叫全局变量。在函数外通过var声明的变量。没有声明就使用的变量，不管在这句话在哪里，都是默认全局变量的赋值。
2. 局部变量：函数中用var定义的变量，只能在函数中访问这个变量，函数外部访问不了。

//函数内部可以直接读取全局变量。var age = 18;function f1(){alert(age);}f1(); // --------------------18
//在函数外部自然无法读取函数内的局部变量。function f2(){var num=99;}f2();alert(num); // ---num is not defined//无法读取函数内的age

3.那么如何从外部读取局部变量？

/*
可以利用函数内再声明函数：内嵌函数
函数t2就被包括在函数t1内部，这时t1内部的所有局部变量，对t2都是可见的。但是反过来就不行，t2内部的局部变量，对t1就是不可见的。既然t2可以读取t1中的局部变量，那么只要把t2作为返回值，我们不就可以在t1外部读取它的内部变量了吗！
*/function t1(){var age = 18;function t2(){alert(age);}return t2;}var tmp = t1();tmp();//----------------------------18

大部分的语言，t1被调用执行，则申请内存，并把其局部变量age, push入栈,t1函数执行完毕，内部的局部变量，随着函数的退出而销毁.因此age = 20 的局部变量已经消失了;
但是在js中，age = 20 这个变量，却被t2捕捉，即使t1执行完毕，通过t2仍然可以访问t2依然可以访问该变量。这也是实现上面的访问局部变量。

再来看一下，这个情形的过程，引入js闭包的知识点。
在js中，t1执行过程中又生成了t2，而作用域上来说，t2能访问到age = 20，于是age = 20 不会消失，而是与返回的t1函数形成了一个环境包，这个包是t2的(把其周围的变量环境形成了封闭的环境包共同返回)，即使t1执行完毕，通过t2仍然可以访问t1依然可以访问该变量，这就是闭包!!!

4.小桃花穿越故事

再来举个例子看懂闭包，通俗易懂的（燕十八老师讲过的一个例子）
故事梗概：2017年12月3日，双胞胎姐妹大桃花妹妹的小桃花因意外，穿越清朝那么他的姐姐是谁？

function closure(){var sister = '大桃花';var me = function(){alert(sister);}return me;
}
function place(){var sister = '清朝大福晋';var girl = closure();girl();
}
place();//------------------------------大桃花

5.闭包计数器

闭包来维护一个别人污染不到的变量做计数器

 var fn = (function(){var cnt = 0;return function(){return ++cnt;}})();
alert(fn());//------------------1
alert(fn());//------------------2
alert(fn());//------------------3

因为我们在上面的代码return回去了函数，然后因为这个自执行函数被fn引用所以里面的变量cnt并没有因为这个自执行函数执完而销毁，而是保存到了内存中，所以我们多次打印fn（）就成了1、2、3

6.经典案例

闭包的使用场景

//没有使用闭包，实现不了点哪一个li，就显示数字几
window.onload = function(){var ul = document.getElementsByTagName("ul")[0];var li = ul.getElementsByTagName("li");for(var i=0;i<li.length;i++){li[i].onclick = function(){console.log(i); //不管我怎么点都是返回都一样}}
}

//用闭包来解决问题
window.onload = function(){var ul = document.getElementsByTagName("ul")[0];var li = ul.getElementsByTagName("li");for(var i=1;i<=li.length;i++){(function(i){li[i].onclick = function(){console.log(i); //点击第几个返回第几个}})(i)}
}