在js中的学习中，总会遇到一个陌生又晦涩，然后还是陌生的词汇，那就是闭包。
首先，什么是闭包？
其次，闭包的作用是什么呢？
最后，什么时候用得到闭包呢？
接下来，我们就来回答这三个问题。
1.什么是闭包？
首先，闭包的概念：
闭包就是能够读取其他函数内部变量的函数。可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
看完这段话，是不是觉得？？？
那么，来看一个例子：
想要实现一个函数，每次调用的时候，函数内的变量实现加1。
function fn(){
var a = 10;
a++;
console.log(a);
}
var f = fn();
f();
f();
f();
f();
这样，每次调用fn，得到的a都是11 。这是因为每次调用的时候，都会重新声明a。若是不想每次获取到都是同一个值，每次就不能重新声明变量，这样，我们就可以将声明放在函数的外面，即：
var a = 10;
function fn(){
a++;
console.log(a);
}
var f = fn();
f();
f();
f();
f();
但是，这样的话，a就变成了全局变量，会造成全局变量命名空间的污染。所以，这个时候，我们需要闭包。
function addOne(){
var a = 10;
// a是局部变量，使用闭包后，a进化成addOne或者fn的私有（自由）变量，在函数外面可以操作a的值，每次进行加1
function fn(){
a++;
console.log(a);
}
return fn;
}
var f = addOne(); // addOne只执行一次，var a = 10只执行一次，只定义了一次
f(); // 11 每次执行fn，a都会加1
f(); // 12
f(); // 13
f(); // 14
现在是不是觉得对闭包有点感觉了呢？
在阐述闭包作用之前，值得一提的是闭包的原理。那么，我们来说一下闭包的原理：
1.计算机原理：垃圾回收机制
计算机的垃圾回收机制：将要删除的信息暂存，下次可以再次使用,而不是立即删除
在闭包中的体现：利用作用域的嵌套，临时保存即将删除的变量，触发计算机的垃圾回收机制
2.函数的执行原理：
两个概念：定义作用域，执行作用域
顾名思义，定义作用域就是函数定义的作用域，执行作用域就是函数在执行时所在的作用域。
在js中规定：函数在执行时,可以读取自身定义作用域中的变量
2.闭包的作用是？
（1）局部变量可以在全局空间内操作
（2）将可能被删除或覆盖的局部变量，临时保存，不被删除或覆盖
解释完闭包的概念、原理、作用，接下来就是我们最关心的，什么时候使用闭包呢？
3.闭包的应用场景？
场景1:for循环内部函数需要获取计数器
问题阐述：for循环之中的i变量会因为for的循环次数被覆盖，所以在for循环内部存在函数时，而且这个函数内会调用变量i，这种情况下就需要用到闭包。
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</body>
<script type="text/javascript">
var ali = document.querySelectorAll("li");
for(var i=0;i<ali.length;i++){
(function(i){
ali[i].onclick = function(){
console.log(i);
}
})(i);
}
</script>
解释：for循环执行很快，将每次的i的保存到匿名函数的实参中，通过匿名函数自动执行传给形参，在匿名函数中可以获取到i，点击事件函数的定义作用域也是执行作用域，所以在事件执行函数中可以获取外层匿名函数的形参i,这样每次就可以在事件函数中获取到for循环的计数器i。
友情提示：这里let也可以实现，利用了let的块级作用域可以形成闭包的原理，且let方式更简单。
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</body>
<script type="text/javascript">
var ali = document.querySelectorAll("li");
for(let i=0;i<ali.length;i++){
ali[i].onclick = function(){
console.log(i);
}
}
</script>
场景2:异步的回调函数中要读取外部实时被修改的变量
smallFire(){
for(var i=0;i<num;i++){
let div = document.createElement("div");
move(div,{
left:t.x,
top:t.y
},function(){
// 因为声明小烟花时使用的let,会触发块级作用域,每次循环执行时,move及自身的回调函数会随之开启,都处在对应的块级作用域内,所以能够拿到每个块级作用域的div，可以删除
div.remove();
})
}
}
解释：因为循环会立即执行,每次循环创建的小烟花,需要单独保存(或单独使用(运动和删除)),所以为了防止循环创建的元素被覆盖,使用let声明变量,触发块级作用域,保存变量,方便将来操作。
下面是一个封装好的缓冲运动的函数：
function move(ele,data,cb){
clearInterval(ele.t);
ele.t = setInterval(function(){
var onoff = true;
for(var i in data){
var iNow = parseInt(getStyle(ele,i));
var speed = (data[i] - iNow)/10;
speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow != data[i]){
onoff = false;
}
ele.style[i] = iNow + speed + "px";
}
if(onoff){
clearInterval(ele.t);
cb && cb();
}
},30)
}
场景3：可以给无法处理函数参数的函数,处理参数
需求：每隔3秒钟，打印一个hello
问题1:这里say函数加了括号，就立即执行了，不再等3秒了。执行之后，函数的返回值是undefined，结果setTimeout的第一个参数就是undefined。
setTimeout(say("hello"),3000);
function say(a){
console.log(a);
}
问题2：所以say不能加括号，那么say就没法传参了
setTimeout(say,3000);
function say(a){
console.log(a);
}
解决：所以，say必须得加括号且传参。这样，延迟器的第一个必须是一个函数，所以在say函数中，返回一个函数即可，在函数中执行想要的操作。
setTimeout(say("你好"),3000);
function say(a){
return function(){
console.log(a);
}
}
这里，就利用到了函数的执行作用域可以使用函数的定义作用域里面的变量这个原理。因为内层函数的定义作用域是say(a){这里即是内层函数的定义作用域，可以拿到这里定义的所有的变量，包括say函数的形参a}。
看完应用场景之后，是不是觉得闭包还真有点意思。然而，世上没有十全十美的事物，闭包也存在其缺点：
内存消耗很大，不能滥用；闭包会在父函数外部，改变父函数内部变量的值。
是不是觉得意犹未尽？想挖掘更多关于闭包的特点呢？期待大家的分享
今天的分享到此结束，如果文中有什么错误或者不足之处，欢迎大家指正...
网友评论