我历来不理解JavaScript闭包，直到有人这样向我解释它

正如标题所述，JavaScript闭包对我来讲一直有点神秘,看过不少闭包的文章，在工做使用过闭包，有时甚至在项目中使用闭包，但我确实是这是在使用闭包的知识。

最近看到的一些文章，终于，有人用于一种让我明白方式对闭包进行了解释，我将在本文中尝试使用这种方法来解释闭包。

准备

在理解闭包以前，有个重要的概念须要先了解一下，就是 js 执行上下文。

这篇文章是执行上下文 很不错的入门教程，文章中提到：

当代码在JavaScript中运行时，执行代码的环境很是重要，并将归纳为如下几点：

全局做用域——第一次执行代码的默认环境。

函数做用域——当执行流进入函数体时。

(…) —— 咱们看成 执行上下文 是当前代码执行的一个环境与做用域。

换句话说，当咱们启动程序时，咱们从全局执行上下文中开始。一些变量是在全局执行上下文中声明的。咱们称之为全局变量。当程序调用一个函数时，会发生什么?

如下几个步骤：

1. JavaScript建立一个新的执行上下文，咱们叫做本地执行上下文。

2. 这个本地执行上下文将有它本身的一组变量，这些变量将是这个执行上下文的本地变量。

3. 新的执行上下文被推到到执行堆栈中。能够将执行堆栈看做是一种保存程序在其执行中的位置的容器。

函数何时结束?当它遇到一个return语句或一个结束括号}。

当一个函数结束时，会发生如下状况:

1. 这个本地执行上下文从执行堆栈中弹出。

2. 函数将返回值返回调用上下文。调用上下文是调用这个本地的执行上下文，它能够是全局执行上下文，也能够是另一个本地的执行上下文。这取决于调用执行上下文来处理此时的返回值，返回的值能够是一个对象、一个数组、一个函数、一个布尔值等等，若是函数没有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. 在第1行，咱们在全局执行上下文中声明了一个新变量a，并将赋值为3。

2. 接下来就变得棘手了，第2行到第5行其实是在一块儿的。这里发生了什么? 咱们在全局执行上下文中声明了一个名为addTwo的新变量,咱们给它分配了什么?一个函数定义。两个括号{}之间的任何内容都被分配给addTwo，函数内部的代码没有被求值，没有被执行，只是存储在一个变量中以备未来使用。

3. 如今咱们在第6行。它看起来很简单，可是这里有不少东西须要拆开分析。首先，咱们在全局执行上下文中声明一个新变量，并将其标记为b，变量一经声明，其值即为undefined。

4. 接下来，仍然在第6行，咱们看到一个赋值操做符。咱们准备给变量b赋一个新值，接下来咱们看到一个函数被调用。当看到一个变量后面跟着一个圆括号(…)时，这就是调用函数的信号，接着，每一个函数都返回一些东西(值、对象或 undefined)，不管从函数返回什么，都将赋值给变量b。

5. 可是首先咱们须要调用addTwo的函数。JavaScript将在其全局执行上下文内存中查找名为addTwo的变量。噢，它找到了一个，它是在步骤2(或第2 - 5行)中定义的。变量add2包含一个函数定义。注意，变量a做为参数传递给函数。JavaScript在全局执行上下文内存中搜索变量a，找到它，发现它的值是3，并将数字3做为参数传递给函数，准备好执行函数。

6. 如今执行上下文将切换,建立了一个新的本地执行上下文，咱们将其命名为“addTwo执行上下文”，执行上下文被推送到调用堆栈上。在addTwo执行上下文中，咱们要作的第一件事是什么?

7. 你可能会说，“在addTwo执行上下文中声明了一个新的变量ret”，这是不对的。正确的答案是，咱们须要先看函数的参数。在addTwo执行上下文中声明一个新的变量``x```，由于值3是做为参数传递的，因此变量x被赋值为3。

8. 下一步是:在addTwo执行上下文中声明一个新的变量ret。它的值被设置为 undefined(第三行)。

9. 仍然是第3行，须要执行一个相加操做。首先咱们须要x的值，JavaScript会寻找一个变量x，它会首先在addTwo执行上下文中寻找，找到了一个值为3。第二个操做数是数字2。两个相加结果为5就被分配给变量ret。

10. 第4行，咱们返回变量ret的内容，在addTwo执行上下文中查找，找到值为5，返回，函数结束。

11. 第4-5行，函数结束。addTwo执行上下文被销毁，变量x和ret被释放，它们已经不存在了。addTwo 执行上下文从调用堆栈中弹出，返回值返回给调用上下文，在这种状况下，调用上下文是全局执行上下文，由于函数addTwo是从全局执行上下文调用的。

12. 如今咱们继续第4步的内容，返回值5被分配给变量b，程序仍然在第6行。

13. 在第7行，b的值 5 被打印到控制台了。

对于一个很是简单的程序，这是一个很是冗长的解释，咱们甚至尚未涉及闭包。但确定会涉及的，不过首先咱们得绕一两个弯。

词法做用域（Lexical scope）

咱们须要理解词法做用域的一些知识。请看下面的例子：

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

这里想说明，咱们在函数执行上下文中有变量，在全局执行上下文中有变量。JavaScript的一个复杂之处在于它如何查找变量，若是在函数执行上下文中找不到变量，它将在调用上下文中寻找它，若是在它的调用上下文中没有找到，就一直往上一级，直到它在全局执行上下文中查找为止。(若是最后找不到，它就是 undefined)。

下面列出向个步骤来解释一下（若是你已经熟悉了，请跳过）：

1. 在全局执行上下文中声明一个新的变量val1，并将其赋值为2。

2. 第2-5行，声明一个新的变量 multiplyThis，并给它分配一个函数定义。

3. 第6行，声明一个在全局执行上下文 multiplied 新变量。

4. 从全局执行上下文内存中查找变量multiplyThis，并将其做为函数执行，传递数字 6 做为参数。

5. 新函数调用(建立新执行上下文），建立一个新的 multiplyThis 函数执行上下文。

6. 在 multiplyThis 执行上下文中，声明一个变量n并将其赋值为6。

7. 第 3 行。在multiplyThis执行上下文中，声明一个变量ret。

8. 继续第 3 行。对两个操做数 n 和 val1 进行乘法运算.在multiplyThis执行上下文中查找变量 n。咱们在步骤6中声明了它,它的内容是数字6。在multiplyThis执行上下文中查找变量val1。multiplyThis执行上下文没有一个标记为 val1 的变量。咱们向调用上下文查找，调用上下文是全局执行上下文，在全局执行上下文中寻找 val1。哦，是的、在那儿，它在步骤1中定义，数值是2。

9. 继续第 3 行。将两个操做数相乘并将其赋值给ret变量，6 * 2 = 12，ret 如今值为 12。

10. 返回ret变量，销毁multiplyThis执行上下文及其变量 ret 和 n 。变量 val1 没有被销毁，由于它是全局执行上下文的一部分。

11. 回到第6行。在调用上下文中，数字 12 赋值给 multiplied 的变量。

12. 最后在第7行，咱们在控制台中打印 multiplied 变量的值

在这个例子中，咱们须要记住一个函数能够访问在它的调用上下文中定义的变量，这个就是词法做用域（Lexical scope）。

返回函数的函数

在第一个例子中，函数addTwo返回一个数字。请记住，函数能够返回任何东西。让咱们看一个返回函数的函数示例，由于这对于理解闭包很是重要。看粟子：

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

让咱们回到分步分解：

1. 第1行。咱们在全局执行上下文中声明一个变量val并赋值为 7。

2. 第 2-8 行。咱们在全局执行上下文中声明了一个名为 createAdder 的变量，并为其分配了一个函数定义。第3-7行描述了上述函数定义，和之前同样，在这一点上，咱们没有直接讨论这个函数。咱们只是将函数定义存储到那个变量(createAdder)中。

3. 第9行。咱们在全局执行上下文中声明了一个名为 adder 的新变量，暂时，值为 undefined。

4. 第9行。咱们看到括号()，咱们须要执行或调用一个函数，查找全局执行上下文的内存并查找名为createAdder 的变量，它是在步骤2中建立的。好吧，咱们调用它。

5. 调用函数时，执行到第2行。建立一个新的createAdder执行上下文。咱们能够在createAdder的执行上下文中建立自有变量。js 引擎将createAdder的上下文添加到调用堆栈。这个函数没有参数，让咱们直接跳到它的主体部分.

6. 第 3-6 行。咱们有一个新的函数声明，咱们在createAdder执行上下文中建立一个变量addNumbers。这很重要，addnumber只存在于createAdder执行上下文中。咱们将函数定义存储在名为 ``addNumbers``` 的自有变量中。

7. 第7行，咱们返回变量addNumbers的内容。js引擎查找一个名为addNumbers的变量并找到它，这是一个函数定义。好的，函数能够返回任何东西，包括函数定义。咱们返addNumbers的定义。第4行和第5行括号之间的内容构成该函数定义。

8. 返回时，createAdder执行上下文将被销毁。addNumbers 变量再也不存在。但addNumbers函数定义仍然存在，由于它返回并赋值给了adder 变量。

9. 第10行。咱们在全局执行上下文中定义了一个新的变量 sum，先赋值为 undefined;

10. 接下来咱们须要执行一个函数。哪一个函数? 是名为adder变量中定义的函数。咱们在全局执行上下文中查找它，果真找到了它，这个函数有两个参数。

11. 让咱们查找这两个参数，第一个是咱们在步骤1中定义的变量val，它表示数字7，第二个是数字8。

12. 如今咱们要执行这个函数，函数定义概述在第3-5行，由于这个函数是匿名，为了方便理解，咱们暂且叫它adder吧。这时建立一个adder函数执行上下文，在adder执行上下文中建立了两个新变量 a 和 b。它们分别被赋值为 7 和 8，由于这些是咱们在上一步传递给函数的参数。

13. 第 4 行。在adder执行上下文中声明了一个名为ret的新变量,

14. 第 4 行。将变量a的内容和变量b的内容相加得15并赋给ret变量。

15. ret变量从该函数返回。这个匿名函数执行上下文被销毁，从调用堆栈中删除，变量a、b和ret再也不存在。

16. 返回值被分配给咱们在步骤9中定义的sum变量。

17. 咱们将sum的值打印到控制台。

18. 如预期，控制台将打印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. 第 1-8 行。咱们在全局执行上下文中建立了一个新的变量createCounter，并赋值了一个的函数定义。

2. 第9行。咱们在全局执行上下文中声明了一个名为increment的新变量。

3. 第9行。咱们须要调用createCounter函数并将其返回值赋给increment变量。

4. 第 1-8行。调用函数，建立新的本地执行上下文。

5. 第2行。在本地执行上下文中，声明一个名为counter的新变量并赋值为 0;

6. 第 3-6行。声明一个名为myFunction的新变量，变量在本地执行上下文中声明,变量的内容是为第4行和第5行所定义。

7. 第7行。返回myFunction变量的内容，删除本地执行上下文。变量myFunction和counter再也不存在。此时控制权回到了调用上下文。

8. 第9行。在调用上下文(全局执行上下文)中，createCounter返回的值赋给了increment，变量increment如今包含一个函数定义内容为createCounter返回的函数。它再也不标记为myFunction````，但它的定义是相同的。在全局上下文中，它是的标记为labeledincrement```。

9. 第10行。声明一个新变量 c1。

10. 继续第10行。查找increment变量，它是一个函数并调用它。它包含前面返回的函数定义，如第4-5行所定义的。

11. 建立一个新的执行上下文。没有参数，开始执行函数。

12. 第4行。counter=counter + 1。在本地执行上下文中查找counter变量。咱们只是建立了那个上下文，历来没有声明任何局部变量。让咱们看看全局执行上下文。这里也没有counter变量。Javascript会将其计算为counter = undefined + 1，声明一个标记为counter的新局部变量，并将其赋值为number 1，由于undefined被看成值为 0。

13. 第5行。咱们变量counter的值 1，咱们销毁本地执行上下文和counter变量。

14. 回到第10行。返回值1被赋给c1。

15. 第11行。重复步骤10-14，c2也被赋值为1。

16. 第12行。重复步骤10-14，c3也被赋值为1。

17. 第13行。咱们打印变量c1 c2和c3的内容。

你本身试试，看看会发生什么。你会将注意到，它并不像从我上面的解释中所指望的那样记录1,1,1。而是记录1,2,3。这个是为何?

不知怎么滴，increment函数记住了那个cunter的值。这是怎么回事?

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. 同上，第1-8行。咱们在全局执行上下文中建立了一个新的变量createCounter，它获得了指定的函数定义。

2. 同上，第9行。咱们在全局执行上下文中声明了一个名为increment的新变量。

3. 同上，第9行。咱们须要调用createCounter函数并将其返回值赋给increment变量。

4. 同上，第1-8行。调用函数，建立新的本地执行上下文。

5. 同上，第2行。在本地执行上下文中，声明一个名为counter的新变量并赋值为 0 。

6. 第3-6行。声明一个名为myFunction的新变量，变量在本地执行上下文中声明,变量的内容是另外一个函数定义。如第4行和第5行所定义，如今咱们还建立了一个闭包，并将其做为函数定义的一部分。闭包包含做用域中的变量，在本例中是变量counter(值为0)。

7. 第7行。返回myFunction变量的内容,删除本地执行上下文。myFunction和counter再也不存在。控制权交给了调用上下文，咱们返回函数定义和它的闭包，闭包中包含了建立它时在做用域内的变量。

8. 第9行。在调用上下文(全局执行上下文)中，createCounter返回的值被指定为increment，变量increment如今包含一个函数定义(和闭包),由createCounter返回的函数定义,它再也不标记为myFunction，但它的定义是相同的,在全局上下文中，称为increment。

9. 第10行。声明一个新变量c1。

10. 继续第10行。查找变量increment，它是一个函数，调用它。它包含前面返回的函数定义,如第4-5行所定义的。(它还有一个带有变量的闭包)。

11. 建立一个新的执行上下文，没有参数，开始执行函数。

12. 第4行。counter = counter + 1，寻找变量 counter，在查找本地或全局执行上下文以前，让咱们检查一下闭包，瞧，闭包包含一个名为counter的变量，其值为0。在第4行表达式以后，它的值被设置为1。它再次被储存在闭包里，闭包如今包含值为1的变量 counter。

13. 第5行。咱们返回counter的值，销毁本地执行上下文。

14. 回到第10行。返回值1被赋给变量c1。

15. 第11行。咱们重复步骤10-14。这一次，在闭包中此时变量counter的值是1。它在第12行设置的，它的值被递增并以2的形式存储在递增函数的闭包中,c2被赋值为2。

16. 第12行。重复步骤10-14行,c3被赋值为3。

17. 第13行。咱们打印变量c1 c2和c3的值。

你可能会问，是否有任何函数具备闭包，甚至是在全局范围内建立的函数?答案是确定的。在全局做用域中建立的函数建立闭包，可是因为这些函数是在全局做用域中建立的，因此它们能够访问全局做用域中的全部变量，闭包的概念并不重要。

当函数返回函数时，闭包的概念就变得更加剧要了。返回的函数能够访问不属于全局做用域的变量，但它们仅存在于其闭包中。

闭包不是那么简单

有时候闭包在你甚至没有注意到它的时候就会出现，你可能已经看到了咱们称为部分应用程序的示例，以下面的代码所示：

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

若是箭头函数让你感到困惑，下面是一样效果：

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

咱们声明一个能用加法函数addX，它接受一个参数x并返回另外一个函数。返回的函数还接受一个参数并将其添加到变量x中。

变量x是闭包的一部分，当变量addThree在本地上下文中声明时，它被分配一个函数定义和一个闭包，闭包包含变量x。

因此当addThree被调用并执行时，它能够从闭包中访问变量x以及为参数传递变量n并返回二者的和 7。

总结

我将永远记住闭包的方法是经过背包的类比。当一个函数被建立并传递或从另外一个函数返回时，它会携带一个背包。背包中是函数声明时做用域内的全部变量。

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

你的点赞是我持续分享好东西的动力，欢迎点赞！