【翻译】Javascript 之闭包

原文链接

正如标题所示，JavaScript闭包对我来说一直有点神秘，我读过许多相关的文章，也在工作中使用过闭包，有时甚至用了闭包而不自知。

最近我去参与了一个讲座，最终有人以一种我能了解的方式诠释了它。我会尽量在这篇文章中以这种方式来解释闭包。我要感谢在CodeSmith上的那些了不起的人，以及他们的 JavaScript难懂系列。

开篇语

在你能对闭包心领神会之前有些概念是你需要知道的，其一就是执行上下文。
这篇文章是很好的执行上下文的入门文章，引用一段：

当代码在JavaScript中运行时，它运行的环境是很重要的，它可能是以下情况之一：
全局代码 —— 你的代码第一次被执行的默认环境；
函数代码 —— 每当执行流进入到函数体中时；
(…)
(…)，我们可以把术语执行上下文视为评估当前代码的环境

另一方面，我们是在全局的执行上下文中启动程序的，少量变量是在全局的执行上下文中公告的，我们称之为全局变量。当程序调用函数时，发生了什么呢？以下几步：

1. JavaScript创立一个新的局部执行上下文；
2. 该局部执行上下文有它自己的变量集合，这些变量对这个执行上下文来说是本地的；
3. 这个新的执行上下文被扔到执行栈中。把执行栈想象成一个持续追踪程序执行的机制。

函数什么时候运行结束呢？当遇到 return 或者者关闭符号 } 时。当函数结束时，会发生以下几步：

1. 局部执行上下文从执行栈中移除；
2. 函数发送返回值给调用的上下文，调用上下文是调用这个函数的执行上下文，它可能是全局的执行上下文或者另一个局部执行上下文。此时是由调用执行上下文来解决返回值的。返回值可能是对象，数组，函数，boolean值什么的。假如函数没有 return 公告，则会返回 undefined。
3. 销毁局部执行上下文。这很重要，销毁。所有在这个局部执行上下文中公告的变量都会被释放，它们将失效。这也是称它们为局部变量的起因。

一个很基础的示例

讲闭包之前，我们先看下下面这段代码，它看起来很直观，任何在看这篇文章的人应该都知道这代码在干嘛吧。

1 let a = 3;2 function addTwo(x) {3  let ret = x +2 ;4   return ret;5 }6 let b = addTwo(a);7 console.log(b);

为了了解JavaScript引擎究竟是如何工作的，我们来分解一下：

1. 第一行我们在全局执行上下文中公告了一个新的变量a并赋值为数字 3;
2. 接下来就有点辣手了，第二行到第五行是一体的，这里发生了什么？我们在全局执行上下文中公告了一个名为addTwo的变量，并把它分配给了函数定义，不论{ }里面的是什么，它们都只属于addTwo。函数里面的代码没有被评估，没有被执行，只是存在变量中以供将来使用；
3. 现在来看第六行。它看起来很简单，但这里有太多要分解的地方了。首先我们在全局执行上下文中公告了一个新的变量并标识为b。一旦一个变量被公告它就有了undefined值；
4. 接下来，还是在第六行，我们看到一个赋值运算符，准备给变量b分配一个新值。接下来是一个函数被调用，当你看到一个变量后面跟着括号()，就表明这个函数被调用了。每个函数都会有返回值(要不就是一个值，对象，要不就是undefined)，不论这个函数返回什么都将赋值给b;
5. 但首先我们要先调用名为addTwo的函数，JavaScript将会在全局执行上下文内存中查找名为addTwo的变量，噢~看呐，找到一个，它是在第二行公告的。变量addTwo包含了一个函数定义，变量a被当作一个参数传给了该函数。JavaScript又在全局执行上下文内存中查找变量a，找到了，并且它的值是3，而后把数字3作为参数传给函数，已经准备好执行函数了；
6. 现在执行上下文将改变。一个新的局部执行上下文被创立了，我们暂且把它称为addTwo 执行上下文，这个执行上下文被推到调用堆栈中，在局部执行上下文中做的第一件事是什么呢？
7. 你可能会说 “在局部执行上下文中公告了一个新变量ret” 。这是不对的，正确答案应该是，先检查函数的参数。在局部执行上下文中公告新变量x，直到3被当作参数传过来，变量x被赋值为3；
8. 下一步是：在局部执行上下文中公告新变量ret。它的值现在是undefined;
9. 还是第三行，这有个加法的操作要执行。首先我们需要x的值，JavaScript会查找变量x.它会先在局部执行上下文中查找，而后找到了，值为 3；第二个操作数是数字2，执行加法得出的结果5被赋值给变量ret;
10. 第四行，返回了变量ret的内容，另一个局部执行上下文的查找发现ret包含数字5，而后函数返回数字5，函数执行结束;
11. 第四行和第五行，函数终止。局部执行上下文被销毁，包括变量x 和ret，不复存在，该上下文从调用堆栈中移出并返回给调用上下文一个返回值。在这个案例中调用上下文是全局执行上下文，由于函数addTwo是在全局执行上下文中调用的；
12. 现在我们回过头看一下第四步，返回值（数字5）被赋值给变量b，在这个小程序中我们仍旧处于第六行；
13. 不想说的太细，但第七行，变量b的内容被打印在控制台中，输出值为 5；

这就是这个非常简单的程序的冗长解释，而我们至今还没有讲到闭包，我保证肯定会讲的，但首先我们还要再绕一两个弯路。

词法作用域

我们需要对词法作用域有肯定的理解，看下面这个例子：

1 let vall = 2;2 function multiplyThis(n){3    let ret = n* vall;4   return ret;5 }6 let multiplied = multiplyThis(6);7 console.log('example of scope:', multiplied);

这里的想法是我们的变量既有在局部执行上下文中的也有在全局执行上下文中的，JavaScript的一个复杂点就是如何查找这些变量。假如它在局部执行上下文中找不到这个变量，那么它就会去该变量的调用执行上下文中查找，假如还没找到，就一直重复这个操作，直到在全局执行上下文中查找(假如在这也没找到那这个变量就是undefined).跟着分析这个案例将会更清晰明了，假如你知道作用域是怎样工作的，那你可以跳过这一步。

1. 在全局执行上下文中公告一个新的变量vall 并赋值为2；
2. 第二行到第五行公告了一个新变量multiplyThis，并为其分配了一个函数定义；
3. 第六行，在全局执行上下文中公告一个新的变量multiplied；
4. 在全局执行上下文内存中检索multiplyThis变量并将它作为函数执行，将数字6作为参数传递；
5. 创立函数调用等于创立执行上下文——创立一个新的局部执行上下文；
   6.在局部执行上下文中，公告一个变量n并赋值为6；
   7.第三行，在局部执行上下文中公告一个变量ret；
6. 还是第三行，对变量n和vall的内容值执行乘法操作；先在局部执行上下文中查找变量n,我们在第六步中公告了它，它的值是6；接着在局部执行上下文中查找变量vall,先检查一下调用上下文，发现调用上下文是全局执行上下文，那就在全局执行上下文中查找vall,看，找到了，它是在第一步中公告的，它的值是2;
7. 继续看第三行，把两数相乘并赋值给变量ret, 6 * 2 = 12.现在ret 的值是12；
8. 返回ret变量，该局部执行上下文被销毁，包括它的变量ret和n。变量vall没有被销毁，由于它是在全局执行上下文中的；
9. 回到第六行，在调用上下文中，数字12被赋值给变量multiplied;
10. 最后在第七行，在控制台展现了变量multiplied的值。

所以在这个示例中，我们要记住函数有权限访问在其调用上下文中的变量。专业名词就叫做词法作用域。

一个返回函数的函数

在第一个示例中函数addTwo返回了一个数字，之前我们说过函数是可以返回任何值的，现在我们来看一个返回函数的函数，这对于了解闭包是必不可少的。
这就是我们要来分析的示例：

1 let val = 7;2 function createAdder() {3  function addNumbers(a, b){4    let ret = a + b;5    return ret;6  }7 return addNumbers8 }9  let adder = createAdder();10 let sum = adder(val, 8);11 console.log('example of function returning a function: ', sum);

让我们继续一步步分解。

1. 第一行，在全局执行上下文中公告变量val并赋值为7;
2. 第二到第八行，在全局执行上下文中公告了一个名为createAdder的函数定义。第三行到第七行形容了函数定义的内容，和之前一样，先不进入该函数，先把这个函数定义存在变量createAdder中；
3. 第九行，我们在全局执行上下文中公告了一个名为adder的新变量，undefined被立即赋值给adder;
4. 还是第九行，我们看到了括号()，这时需要执行或者调用一个函数，接下来在全局执行上下文的内存中查找名为createAdder的变量，发现它在第二步中创立了，调用它；
5. 调用函数。现在我们来看第二行，一个新的局部执行上下文被创立了，我们可以在这个新的执行上下文中创立局部变量。引擎会把这个新的上下文增加到调用栈中，这个函数没有参数，可以直接进入函数体中；
6. 继续看第三到第六行，我们公告了一个新的函数，在局部执行上下文中创立了变量addNumbers，这很关键，addNumbers只存在于局部执行上下文中，我们把函数定义存储在名为addNumbers的局部变量中；
7. 现在来看第七行，我们返回了变量addNumbers的内容，引擎查找名为addNumbers变量并且找到了，这是一个函数定义，没事，函数是可以返回任意值的，包括函数定义。所以我们返回了addNumbers的定义，所有第四到第五行{}之间的内容构成了这个函数定义；这时也把局部执行上下文从调用栈中移除了；
8. return之后，局部执行上下文被销毁，变量addNumbers也一样，但函数公告还是存在的，它是从函数中返回的并且被分配给了变量adder,就是我们在第三步中创立的变量；
9. 现在看第十行，在全局执行上下文中公告了变量sum，暂时分配的值是undefined;
10. 接下来就要执行一个函数了，哪个函数呢？在名为adder的变量中定义的函数。我们先在全局执行上下文中查找它，毫无疑问能找到，这是一个需要两个参数的函数；
11. 先来检索这两个参数，以便调用这个函数并正确传参；第一个是我们在第一步中定义的变量val，它代表的值是7；第二个是数字8；
12. 现在可以执行这个函数了，函数的定义在第三到第五行，而后一个新的局部执行上下文又被创立了，在这个局部上下文中创立了两个变量a 和b，它们分别被赋值为7和8，这就是上一步中我们传递给函数的参数；
13. 第四行，一个名为ret的新变量在局部执行上下文中被公告;
14. 第四行，执行了一个变量a 和b相加的加法操作，得出的结果15被赋值给ret变量;
15. 函数返回了ret变量的值，局部执行上下文被摧毁，并从调用栈中移除，变量a、b、ret都不复存在；
16. 返回值被赋值给我们在第九步中定义的变量sum;
17. 在控制台中打印了sum的值；

正如所料控制台会打印15，我们在这真的绕了一个挺大圈子的，我只是想阐述以下几点：
第一，函数定义可以被存储在变量中，且在它被调用之前对程序来说都是不可见；
第二，每当一个函数被调用，就会创立一个局部执行上下文，当函数结束时该局部执行上下文也会消失；当函数体遇到return 或者 关闭的大括号 }时函数就结束了；

闭包

看下面一段代码并猜一下会发生什么。

1 function createCounter() {2  let counter = 0;3   const myFunction = function () {4      counter = counter +1;5      return counter;6    }7  return myFunction;8 }9  const increment = createCounter();10 const c1 = increment ();11 const c2 = increment ();12 const c3 = increment ();13 console.log('example increment', c1, c2, c3);

现在我们有了前面两个例子的经验，来快速浏览一下这段代码的执行过程，就如我们期望的那样运行：

1. 第一到八行，在全局执行上下文中创立了一个新变量createCounter，且被分配为函数定义；
2. 第九行，在全局执行上下文中创立了一个新变量increment；
3. 还是第九行，我们要调用函数createCounter，并把返回值赋值给变量increment；
4. 第一到第八行，调用函数，创立局部执行上下文；
5. 第二行，在局部执行上下文中公告一个名为counter的变量，数字0被赋值给 counter；
6. 第三到六行，公告一个名为myFunction的变量，该变量是在局部执行上下文中的，该变量的内容是另一个在第四到第五行的函数定义；
7. 返回变量myFunction的内容，局部执行上下文被删除，myFunction和counter也被销毁，控制权回到调用上下文中；
8. 第九行，在调用上下文中(全局执行上下文)， createCounter的返回值被赋值给increment；现在变量increment包含了一个函数定义。这个函数定义就是createCounter返回的，它的标签不再是myFunction，但具备相同的意义，在全局上下文中，它的标签是increment；
9. 第十行，公告新变量c1;
10. 还是第十行，查找变量increment，它是一个函数，调用它。它包含了前面返回的一个函数定义（第四到第五行定义的）；
11. 创立一个新的执行上下文，没有参数，开始执行函数；
12. 第四行，counter = counter + 1 ,在局部执行上下文中查找counter的值。我们刚刚创立这个上下文并且没有公告任何局部变量，在全局执行上下文中查找，没有发现名为counter的变量，所以JavaScript执行的是counter = undefined + 1,公告一个新的局部变量counter并赋值为1，undefined的值是0;
13. 第五行，返回counter的内容值1，销毁这个局部执行上下文和变量counter;
14. 回到第十行，返回值 1被赋值给了c1;
15. 第十一行，重复第10-14步，c2也被赋值为1；
16. 第十二行，重复第10-14步，c3也被赋值为1；
17. 第十三行，打印变量c1、c2、c3；

亲身试一下看会发生什么，你会发现并没有如我说明的那样输出1， 1 ，1，而是输出了1，2，3，那是怎样回事呢？

不知何故，increment函数记住了counter的值，这是怎样实现的呢？

难道counter是全局执行上下文的一部分吗？试着打印console.log(counter)得到的是undefined,所以并不是。

或者许当你调用increment时，它是从自身被创立的函数(createCounter)处开始执行的？这怎样可能呢，变量increment包含的是函数定义，而不是生成它的函数，所以也不是这个起因。

所以肯定是另一个机制——闭包，我们终于讲到它了。

这里讲一下闭包的工作原理。无论何时你定义一个新的函数并把它赋值给一个变量时会保存函数定义，闭包也是如此。闭包包含了在创立函数时作用域内的所有变量，这有点像一个背包的作用。函数定义自带一个小背包，背包里装着在创立函数时作用域内的所有变量。

所以上面我们的步骤分析全是错的，这次我们再精确地分析一遍。

1 function createCounter() {2   let counter = 0;3   const myFunction = function () {4      counter = counter +1;5      return counter;6    }7  return myFunction;8 }9  const increment = createCounter();10 const c1 = increment ();11 const c2 = increment ();12 const c3 = increment ();13 console.log('example increment', c1, c2, c3);

1. 第一到八行，跟之前一样，我们在全局执行上下文中创立了一个新的变量createCounter并分配为函数定义；
2. 第九行，跟之前一样，在全局执行上下文中创立了一个新变量increment；
3. 还是第九行，跟之前一样，我们要调用函数createCounter，并把返回值赋值给变量increment；
4. 第一到第八行，跟之前一样，调用函数，创立局部执行上下文；
5. 第二行，跟之前一样，在局部执行上下文中公告一个名为counter的变量，数字0被赋值给 counter；
6. 第三到六行，在局部执行上下文中公告一个新的变量myFunction，该变量现在是另一个函数定义(第四到五行)，此时我们创立了一个闭包并将其作为函数定义的一部分。闭包包含了作用域中的变量，这个示例中是counter变量(值为0)；
7. 第七行，返回变量myFunction的内容，局部执行上下文被删除，myFunction和counter都不存在了。控制权回到调用上下文中，所以我们返回的是函数定义和它的闭包，此时背包中装着闭包被创立时作用域中的变量；
8. 第九行，在调用上下文中(即全局执行执行上下文)，createCounter返回的值被赋值给increment，现在变量increment包含一个函数定义(和其闭包)，这个函数定义就是createCounter返回的，它的标签不再是myFunction，但具备相同的意义，在全局上下文中，它是increment；
9. 第十行，公告一个新变量c1;
10. 继续看第十行，查找变量increment,是一个函数，调用它，它包含一个函数定义(第四到五行定义的)，还有一个装着变量的背包；
11. 创立一个新的执行上下文，不带参数，开始执行函数；
12. 第四行，counter = counter + 1，查找变量counter,在局部或者全局执行上下文中查找之前，先检查一下闭包，在背包中查找。瞧瞧，闭包里包含了一个名为counter的变量，它的值为0。在表达式的最后，它的值被设置为1，并且它的值被再次存入背包中。现在闭包中包含一个变量counter,其值为1；
13. 第五行，返回counter的内容值1，销毁局部执行上下文；
14. 回到第十行，返回值 1被赋值给c1；
15. 第十一行，重复第10-14步。这次，当我们查看闭包时，可以看到变量counter的值变为1了。它是在第12步中第四行代码被设置的。它的值添加并且在increment函数的闭包中存储的值为2，c2被赋值为2；
16. 第十二行，重复第10-14步，c3被赋值为3；
17. 第十三行，打印变量c1、c2、c3。

所以现在我们能了解它的工作原理了，要记住的关键就是当公告函数的时候，它包含了一个函数定义和一个闭包。闭包就是函数创立时作用域内所有变量的集合。

你可能会问，是任何函数都有闭包吗，甚至在全局作用域内公告的函数？是的。全局作用域内创立的函数也会创立闭包，但是，因为这些函数是在全局范围内创立的，因而它们可以访问全局范围内的所有变量。与闭包的概念不是真正相关的。

当一个函数返回函数时，闭包的概念变得更清晰一点了。当作返回值的那个函数可以访问不在全局作用域内的函数，但它们仅存在于其闭包中。

没那么简单的闭包

有时闭包会在你没注意时出现，你可能看过称之为局部应用的例子，代码如下：

let c = 4const addX = x => n => n + xconst addThree = addX(3)let d = addThree(c)console.log('example partial application', d)

假如箭头函数不行，下面的代码也是等效的：

let c = 4function addX(x) {  return function(n) {     return n + x  }}const addThree = addX(3)let d = addThree(c)console.log('example partial application', d)

我们公告了一个通用的带x参数并返回另一个函数的函数addX。

返回值的参数也带一个参数和变量x相加。

变量x是闭包的一部分，当变量addThree在局部上下文中被公告的时候，它被赋值为一个函数定义和闭包，闭包中包含变量x;

所以当 addThree被调用执行时，它是可以在其闭包中访问到变量x并和当作参数传过来的变量n相加返回值的。

在这个例子中控制台打印的值会是数字7。

结论

我能一直记得闭包是通过背包类比,当一个函数被创立或者被当作参数传递或者从另一个函数返回时，它都带有一个背包，并且在背包中装着公告函数时作用域内的所有变量。