javascript之闭包理解以及应用场景

Posted 2020-08-25 这名字就是霸气

半个月没写博文了，最近一直在弄小程序，感觉也没啥好写的。

之前读了js权威指南，也写了篇博文，但是实话实说当初看闭包确实还是一头雾水。现在时隔一个多月（当然这一段时间还是一直有在看闭包的相关知识）理解就更深入了一点，下面说说我的理解。

1 function fn(){
2    var a = 0;
3    return function (){
4         return ++a;
5    }    
6 }

如上所示，上面第一个return返回的就是一个闭包，那么本质上说闭包就是一个函数。那么返回这个函数有什么用呢？

那是因为这个函数可以调用到它外部的a这个变量。其实也就是说，return返回的是这个函数 + a这个变量

那么，我们现在再来利用这个闭包做点事情

我们不妨创建一个变量 var f = fn(); 我们如果 console.log(f) 一下就知道，这个f就是return的整个函数体，也就是  function () { return ++a;} 

那么我们执行f()就相当于执行function函数了，这时，我们多次执行f()的话，返回的a数值就会一直叠加。

但是如果我们现在再创建一个变量 var f2 = fn(); 我们运行f2()的话，会发现，a的值重置了。又会从0开始了。这是为什么呢？

其实我们可以这样理解，首先闭包是一个匿名函数，现在我们将它赋予了一个变量，那么他就有名字了，那么他每次执行完以后就有地方存了。但是每个变量存的地方又不一样，他们相互不关联，所以他们就是独立的个体了，所以a得值就不同了。就当是执行了不同的函数，只是恰好函数体是一样的罢了。

 

非常感谢这篇博文提供的思路

那么，我们闭包的应用场景有什么呢。本来之前我也一直在想，因为我很水，所以我写代码用到闭包的地方并不是很多。但是今天在看前端的设计模式的时候看到了单例模式，想了下，这不就是闭包的一个很好的应用场景么？

比如说我现在的需求是这样的，在网页中有时候会需要遮罩层，调用的时候我就创建一个，但是你不可能每次调用创建吧，所以如果存在就用以前的，如果不存在就创建新的，但同时有可能我永远都不需要这个遮罩层，所以我也有可能一直都不需要创建。

这就是一个很典型的单例模式的场景。

那么我们怎么来实现呢。

1 function fn() {
2     var a;
3     return function() {
4         return a || (a = document.body.appendChild(document.createElement(\'div\')));
5     }
6 };
7 var f = fn();
8 f();

就很简单，就是之前的代码稍微改动下就可以了。相关理解也在上面说的很清楚啦，可以仔细看看应该是能明白的。

好了，现在对闭包算是有了一点点深入的理解了。接下来还是要继续慢慢的深入，博主也会及时更新的。