JavaScript闭包学习笔记(ife2015spring)

Posted 2020-09-26

阮大的文章让我获益良多。学习Javascript闭包（Closure）

问题：

话说在做task2小练习4轮播图的时候遇到了一个问题。本来是想按哪个按钮，就播放到对应图片。但实际上最后出来的值都是5。

比如下面这个简化的例子。

for(var i=1;i<5;i++){
    e[i].onclick=function(){
        console.log(i);
    };
}

本以为按第一个弹出一，按第二个弹出2.但实际上都弹出的是5。黑人问号脸？

这就是js坑的地方了。因为for循环结束以后，它的i并没有马上被销毁。而是将循环的最终结果保留在循环外部。所以这个时候你不管按哪个按钮，弹出的都是最终结果5。

那么如何改变这种情况？下面就用到了闭包的方法，先不讲什么是闭包，先看看如何实现一个闭包，并用闭包来解决问题。

for(var i=1;i<5;i++){

e[i].onclick=(function(a){

return function(){

console.log(a);

}

})(i)

}

这段代码，在循环体内又添加了一个函数，实际上你每次触发onclick事件时，都调用一遍外围我们新加的那个函数,函数每运行一次，都会请求一个i值，这时候就能达到一 一对应的目的了。这个新加的函数也叫作闭包。

这个函数看起来比较复杂，下面的代码和它是等价的。

for(var i=1;i<5;i++){

var Fn=function(a){

console.log(a);

}

e[i].onclick=Fn(i);

}

这样是不是好理解了很多。每次点击都调用一次函数，这样就能达到目的了。

闭包：

关于闭包，说法实在太多了。我觉得就是内部变量的一个集合。因为在函数体外内部变量是获取不到的。你想要获取它，只能通过闭包的方法，闭包就是内部变量的集合。它通过在函数内部再添加一个子函数（简单说就是在函数内部再嵌套一个函数）。内部的函数可以获取函数内的变量，再return这个嵌套函数，这时候你在函数体外再调用那个嵌套函数就可以达到调用局部变量的目的。

function f1(){
    var name=‘WebWhiteCoder‘;
    var f2=function(){
        console.log(name);
    };
　　 return f2;
}
var result=f1();
result();//WebWhiteCoder

闭包的其他用途:

闭包主要是两大用途，第一个是前面例子中的获取函数内部变量值，还有一个就是让变量值一直再内存中。以前看js高程的时候介绍过js的垃圾清理，js再函数调用完毕之后，会自动将不用的变量清除掉。但如果有的时候我们想让它不被清除，就得用到闭包的方法。

下面用阮大的例子：

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

结果表明n一直在内存中，在f2运行完之后没有把它当垃圾一样给清楚了。因为f2是f1的子函数，f2被赋给一个全局变量n（相对于函数体f1中来说），所以f2一直在内存中，又因为f2的存在依赖于f1，所以f1也在内存中，这也保证了nAdd函数的正常调用。

但也看到了，闭包的实现会占用内存，影响性能，所以除非必要，尽量要少使用。