理解JS闭包的几个小实验

学了JavaScript有一段时间了，但是对闭包还是不太理解，于是怀着心中的疑问做了几个小实验，终于有点明白了。

首先看一下MDN上的定义：闭包是函数和声明该函数的词法环境的组合。

简单来说，闭包是一种现象。

我在搞清楚了2个概念后，理解了闭包。

首先是关于函数以及函数调用的概念：

我们来做一个简单的实验：

 function foo () {
   var a = 1;
   function bar () {
       console.log(a)
   }
   return bar;
 }

 var first = foo();
 console.log(first);

 // 显示结果：
 // ƒ bar () {
 //          console.log(a)
 //       }

作为一个初学者，有一些小细节很容易干扰我的判断。

首先要理解的是function f () {}是在声明一个函数，要执行这个函数必须用f()进行调用。

f()调用函数后，js引擎会执行函数中的代码，如果函数最后有写return ...函数执行完毕才有返回值。

 var first = foo();

表示把函数foo执行完毕后的返回值赋值给first，函数foo执行的操作是声明了一个变量a,以及一个函数bar,然后把函数bar作为返回值返回。注意：不是把bar的执行结果返回，而是把这个函数本身返回。所以first就指向了函数bar。

其次是关于执行环境与作用域的概念

作用域的定义：作用域是一套规则，用于确定在何处以及如何查找标识符。

我对作用域的理解是：代码起作用的范围。

执行环境的定义：执行环境定义了变量或函数有权访问的其他数据。每个执行环境都有三个重要的属性，变量对象（Variable object，VO）、作用域链（Scope chain）和 this。环境中定义的所有变量和函数都保存在变量对象中

我对执行环境的理解：存储一块代码中定义的所有的变量和函数的值。

因为全局作用域范围最广，所以函数内部也可以访问到全局变量。

函数内部代码执行的时候，发现某个变量的值在自己的执行环境中没有，就需要去上级执行环境中找。函数执行完毕后，当前函数的执行环境就被销毁，所以上级函数没有办法访问内部函数中声明的变量。

第二个小实验：

 function foo () {
   var a = 1;
   function bar () {
     console.log(a)
   }
   return bar;
 }

 var first = foo();
 console.dir(first);

显示结果如图所示：

first就是函数bar，它能访问自己的作用域，上级foo的作用域，以及全局作用域。

当js执行first的时候，first能访问自己的作用域，上级foo的作用域，以及全局作用域。这种现象就是闭包。

闭包最大用处有两个:一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。所以我们就可以利用闭包来创建模块机制：

 function count() {
   var number = 0;
   return{
     add : function(x){
       if(x==undefined) {
         number += 1;
       }else{
         number +=x;
       }
     },
     reduce: function(x) {
       if(x==undefined) {
         number -= 1;
       }else{
         number -=x;
       }
     },
     times: function() {
       return number;
     }
   }
 }

我们可以创建复数个加法器，而互不影响。

我关于闭包的理解就到这里了，如果你还不明白，就自己动手写代码试验吧！