前端随笔 - JavaScript中的闭包

　　前阵子重新复习了一下js基础知识，第一篇博客就以分享闭包心得为开始吧。

　　首先，要理解闭包，就必须要了解一个概念：作用域链。

　　作用域链

　　作用域代表着可访问变量的集合，变量分为全局变量和局部变量两种，在函数内部所声明的变量被称作局部变量，在全局作用域声明的被称作全局变量。

　　JavaScript中，在函数内部可以读取到全局变量以及函数外部所声明的局部变量，但是在函数内部声明的变量在函数外部是无法获取到的。

　　来看下面这幅图：

　　　　　　   

　　上图中，val1为全局变量，函数func1和func2均能访问到val1。

　　val2为在func1下声明的局部变量，它不能被val1所在的全局作用域所访问到，但是位于其内部的函数func2则可以访问到val2的值。

　　val3是在func2下声明的局部变量，不论是val1所在的全局作用域还是它的父函数func1都无法访问到val3的值，只有func2函数自身能使用它。（如果在func2内部有新声明的函数，那么该函数同样可以访问到func2中的局部变量。）

　　这种由函数为分界线的作用域被称为函数作用域，由上图可知，函数作用域代表着该函数所有可用的变量的集合。

　　当一个函数被运行时，他就会创建自己的函数作用域。作用域按调用优先级可分为以下四部分：

　　　　1. 该函数的参数；
　　　　2. 在该函数内部所声明的局部变量；
　　　　3. 在其父函数所在作用域中所声明的局部变量；
　　　　4. 全局变量。

　　当函数要访问一个变量的时候，他会首先在自身查找变量，如果查找失败，则会查找其父函数所在作用域，由内向外，直到达到全局作用域。

　　这种作用域层层嵌套的形式就被称为作用域链。

　　从作用域链的特点中我们能发现这样一条规则：正常途径下，在函数外部是无法访问到函数内部的变量的。

　　然而，要想访问到函数内部的变量也并非是不可能的，我们也可以作用域链的这一特点，来解决这个问题。

　　让我们看下面这个例子：

     function func1() {
         var val1 = 666;

         return function func2() {
             console.log(val1);
         }
     }
     var func3 = func1();
     func3();　　　　　　//

　　当我们运行func3()时，会发现控制台打印出了666！也就是val1的值！

　　这也就说明，我们在全局作用域运行的func3，获取到了func1中声明的局部变量val1的值。

　　而这就是通过闭包实现的，这里func2就是一个闭包。

　　闭包

　　MDN中闭包的定义为：函数和声明该函数的词法环境组合。

　　其实通俗的讲，就是该函数本身以及该函数声明时所在位置的代码(该函数所在的作用域链)。

　　在上面的例子中，func2在声明的时候，它所处的作用域链也就随之生成了。当我们在别处，比如说全局作用域下调用func2时，由于作用域链的特性，func2所处的作用域链也会被保留，即func2的父函数中的val1依然可以被调用，形成了一个闭包。

　　　　更进一步！

　　　　　　首先我们在func2中加入一句代码，改为如下形式：

     return function func2() {
         debugger；
         console.log(val1);
     }

　　　　　　然后将上述代码拷贝到浏览器控制台中，运行。

　　　　　　　　　　

如图所示，在程序断点处，也就是func2函数内，能看到一个Closure(闭包)。其中存放的就是其所在作用域的变量，在本例子中就是func1中声明的val1；这就是闭包如何在后台运行的。

　　在了解的闭包是什么以后，就该谈谈闭包在编程中的应用了。

　　闭包的应用

　　1. 可以获取到函数内部的变量(参考上例)。

　　2. 用闭包模拟私有方法和变量。

　　　　在很多编程语言中，如java，c++，c#等，都支持将方法和变量声明为私有的，即他们只支持被所处同一个类下的其他方法所调用。

　　　　在JavaScript中是没有这种原生支持的，但是MDN告诉我们，我们可以使用闭包来模拟私有方法和变量，并通过创建公共函数来访问这些方法和变量。

　　　　举例时间：

     function counter() {
         var num = 0;

         function changeValBy(val) {
             num += val;
         }

         return {
             increment:function(){
                 changeValBy(1);
             },
             decrement:function(){
                 changeValBy(-1);
             },
             viewValue:function(){
                 console.log(num);
             }
         }
     }

　　counter中含有一个私有变量num和一个私有函数changeValBy，它们均无法从函数外部直接访问，只能通过myCounter1中的三个公共函数对它们进行访问和更改。并且由于作用域链的特性，这三个函数位于同一个作用域下，他们所访问的是同一个num和函数changeValBy，即是共享同一环境的闭包。(这一点也会引发一个有趣的问题，下面会提到。)

     myCounter1.viewValue();    //
     myCounter1.increment();
     myCounter1.increment();
     myCounter1.viewValue();    //
     myCounter1.decrement();
     myCounter1.viewValue();    //
     num；                      // Uncaught ReferenceError: num is not defined at <anonymous>:1:1

　　　　当我们运行这三个函数时会发现这三个函数是共享同一环境的。并且直接访问num是访问不到的。

　　　　　　更进一步！

　　　　　　　　我们再新声明一个myCounter2，

     var myCounter2 = counter();

　　　　　　　　并且同时调用myCounter1和myCounter2，

     myCounter1.viewValue();      //
     myCounter2.viewValue();      //
     myCounter1.increment();
     myCounter1.increment();
     myCounter1.viewValue();      //
     myCounter2.viewValue();      //
     myCounter2.increment();
     myCounter1.viewValue();      //
     myCounter2.viewValue();      //

　　　　　　　　会发现myCounter1和myCounter2是各自独立的，是两个不同的闭包。当其中一个闭包中的变量发生更改时，是不会影响到另一个闭包中的变量的。

　　　　　　　　这就是闭包的第三种应用：

　　3.提供了数据隐藏和封装。

　　说完了闭包的应用，再来谈谈闭包应用时要注意的问题。

　　1.内存管理和垃圾回收

　　JavaScript 通过自动垃圾回收来管理内存。这意味着，当数据不再可引用时（即没有可用于可执行代码的对该数据的剩余引用），它将被“垃圾回收”，并在稍后的某个时间点被销毁。这可以释放该数据曾经消耗的资源（即计算机内存），从而使这些资源可供重新使用。

　　让我们结合闭包来看一下垃圾回收。我们知道，父函数的变量可以被嵌套的内层函数访问。如果嵌套函数捕获并使用其父函数的变量（或其作用域链上的变量，如其父函数的父函数的变量），那么只要使用这些变量的函数仍可被引用，这些变量就会一直保留在内存中。

为了防止闭包中造成内存泄漏，当我们不在需要这些变量和函数时，要即使将其释放掉。

2.在循环中创建闭包

先来看一个在闭包中很经典的例子：

     for(var i=0;i<10;i++){
         setTimeout(function(){
             console.log(i);
         },100);
     }

打眼一看，这段代码的运行结果应该是每间隔100毫秒依次打印出0-9，然而实际运行后发现，十次打印竟然全都是10！这是为什么呢?

让我们把问题分解开来：

1.为什么十次打印值都一样？

答：正如闭包的第二点应用一样，这十个打印函数都处于同一作用域链下，是共享同一环境的闭包，它们访问是同一个i值，所以打印出来的值都一样。

2. 为什么打印出来的值是10？

答：这与setTimeout的运行机制有关系，setTimeout是一个异步函数，当他被调用后，是不会立即执行的，而是添加到当前任务队列后面，直到之前的任务都执行完毕后才会执行。

所以上面的代码的实际运行过程是这样的：

for循环每执行一次，就将一个setTimeout任务添加到队尾，直到for循环执行完毕，才会开始执行十次setTimeout任务，然而此时的i已经变成了10，所以就会打印出十次10啦！

如何解决？

解决的方法有很多，我这里只列出和本文知识点有关的两个解决方式：
1.利用闭包应用的第三点，让每个打印函数成为独立的闭包，并利用闭包保存当前循环的i值：

     for(var i = 0; i<10;i++) {
         (function func(j) {
             setTimeout(function() {
                 console.log(j);},100)
         })(i);
     }

2.因为过多的闭包会占用更多的内存，所以为了避免在不必要的时候使用闭包，我们可以采用let关键字：

     for(let i=0;i<10;i++){
         setTimeout(function(){
             console.log(i);
         },100);
     }

为什么let关键字这么神奇，这就要从ES6中var,let,const的区别说起了……呃，跑题了，等以后新开一篇再写吧~当然有兴趣的读者也可以自行百度谷歌学习~

　　关于闭包的三三两两就先到这里啦，第一次写博客，经验不足，着实花费了不少时间。如果你觉得有文章有什么纰漏之处，或者觉得有什么疑问和不解，欢迎吐槽和讨论！让我们在前端学习上共同进步！

参考：  MDN上的闭包；              
优达学城前端进阶课程；