我从没理解js的闭包，直到他人向我这么解释。。。

时间 2020-06-10

原文原文链接

前段时间根据执行上下文写过一次闭包，可是写的简陋些。昨天在twitter上看到这篇文章，感受背包的比喻挺恰当的。因此就翻译了。javascript

这篇文章有些啰嗦，可是讲解很细，但愿仍是耐心看完。也欢迎指出错误。java

原地址数组

如题所述，闭包对我有很强的神秘感。我读过许多的文章，在工做中使用闭包，有时我甚至在没有意识到使用闭包的状况下使用了闭包。缓存

开始前

在你了解闭包以前，有些概念是很重要的。其中一个就是执行上下文。闭包

能够经过这篇文章了解下执行上下文。引用下里面的一些内容：app

当代码在JavaScript中运行时，其执行的环境很是重要,一般是如下之一：函数

Global code-默认环境，代码第一次执行的时候。spa

Function code-代码执行进入函数体中。翻译

(...)code

(...)让咱们思考下这个术语执行上下文，是做为当前代码的执行环境/做用域。

换句话说，当咱们执行一个程序的时候，先从全局执行上下文开始。一些变量在全局执行上下文中被声明。咱们成这些为全局变量。当程序调用函数时，会发生什么？有下面几个步骤：

javascript创造一个新的执行上下文，局部执行上下文。
该局部执行上下文拥有本身的一组变量，这些变量在该执行上下文中是局部的。
新的执行上下文被抛出到执行栈上。执行栈能够看做是跟踪程序执行过程的机制。

一个function何时结束呢？当它遇到一个return语句或者碰到一个右括号}。当一个函数结束后，接下来会发生：

局部执行上下文弹出执行栈。
这些函数将返回值发送回调用上下文。调用上下文是调用此函数的执行上下文，是全局执行上下文或者另外一个局部执行上下文。在那个时候处理返回值取决于调用执行上下文。返回的值能够是一个对象，一个数组，一个函数，一个布尔值，任何均可以。若是这个函数没有return语句，则返回undefined。
局部上下文被摧毁。这是很重要的。摧毁。在局部上下文内声明的变量会被抹除掉。它们不在可用。这就是为何他们被称做局部变量

一个很是基本的例子

在开始闭包以前，看下下面这段代码。看上去很是简单，任何阅读这篇文章的人都能知道它究竟作了什么。

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

为了理解JavaScript引擎是怎么样工做的，咱们详细分析下。

第一行在全局执行上下文中声明了一个新的变量a，而且赋值一个数字3。
接下来变得棘手。第二行和第五行是一块的。这里面发生了什么？在全局执行上下文中，咱们声明了一个新的变量，命名addTwo。咱们给它赋值什么？定义一个函数。花括号{}里不管是什么都被赋值给了addTwo。函数内的代码不会被求值，也不会被执行，只是存储在一个变量中以备未来使用。
如今到第6行。看上去很简单，可是有不少东西须要挖掘出来。首先在全局执行上下文中声明一个新的变量，而且标记为b。只要变量被声明，它的值就是undefined。
接下来，仍然是第6行，咱们看到一个赋值操做符。咱们正在准备为变量b赋值一个新值。而后会看到一个函数被调用。当咱们看到一个函数后面跟着一个圆括号(...)，这是一个函数正在被调用的一个信号。每一个函数都会返回一些东西（一个值，一个对象或者undefined）。不管从函数返回的是什么，都会被赋值给变量b。
首先咱们须要调用 addTwo 函数。js将会在全局执行上下文内存中查找名为addTwo的变量。好的，在第二步（或者2到5行）。而且看到变量addTwo包含一个函数定义。变量a做为参数传给了这个函数。js在全局执行上下文内存中搜索变量a，找到了它，找到了它的值是3，而且把3做为参数传给了函数。准备执行该函数。
如今执行上下文将被切换。一个新的局部上下文被创造，咱们称它为'addTwo 执行上下文'。这个执行上下文被压到执行栈里。在局部执行上下文，咱们作的第一步是什么？
你也许很冲动的说，"在局部执行上下文中一个新的变量ret被建立"。这不是答案。正确的答案是，咱们首先要看函数的参数。局部执行上下文中新的变量x被建立。并且因为3被做为参数传递，因此变量x被赋值了数字3。
下一步：一个新的变量ret在局部执行上下文被建立。它的值是undefined。
第3行，一个加法要被执行。首先咱们须要x的值。js寻找变量x。首先在局部执行上下文寻找，找到一个，值为3。第二个操做是数字2。加法运算的结果（5）被赋值给变量ret。
第4行，返回变量ret的内容。接着在局部执行上下文中查找。
4-5行，函数结束。局部执行上下文被摧毁。变量x和ret被消除。它们不在存在。上下文弹出调用栈。返回值返回到调用上下文。在这种状况下，调用上下文是全局执行上下文，由于函数addTwo是从全局执行上下文中调用的。
回到刚才的第4步，返回值（5）被赋值给变量b。
我没有详细说明，可是在第7行中，变量b的内容被打印在控制台中。

对于一个很是简单的程序来讲，这是一个很长时间的解释，咱们甚至尚未涉及到闭包。我保证我会到达那里。可是首先咱们须要再绕道一两圈。

词法做用域

咱们须要理解词法做用域的某些方面。看下下面的例子：

let val1 = 2
function multiplyThis(n) {
  let ret = n * val1
  return ret
}
let multiplied = multiplyThis(6)
console.log('example of scope:', multiplied)

这里的想法是咱们在局部执行上下文中有变量，在全局执行上下文中有变量。js的一个复杂性在于它如何寻找变量。若是它在局部执行上下文中找不到变量，它将在其调用上下文中查找它。若是没有在它的调用环境中找到。重复上面的步骤，直到它在全局执行上下文中查找到。（若是都没有找到，它是undefined）。按照上面的例子，将会解释它。若是你了解做用域的运行机制，你能够跳过这个。

在全局执行上下文中声明一个新变量val1并为其指定数字2。
2-5行。声明一个新的变量multiplyThis而且为其赋值一个函数。
第6行。在全局执行上下文中声明multiplied。
从全局执行上下文内存中检索变量multiplyThis并做为函数执行。将数字6做为参数传入。
新函数调用=新的执行上下文。建立一个新的局部执行上下文。
在局部上下文中，声明一个变量n，而且赋值数字6。
第3行。局部行上下文声明变量ret。
继续第3行。用2个操做数作乘法运算；变量n和var1的值。在局部执行上下文中查找变量n。在第6步已经声明它，值是6。在局部执行上下文查找变量var1，可是并无一个var1的变量标识。检查下调用上下文。调用上下文是全局执行上下文。在全局执行上下文上下文寻找var1，是的，在第一行找到了，值是2。
仍然是第3行。2个操做数相乘，而且赋值给ret。6 * 2 = 12，ret如今是12。
返回ret变量。局部执行上下文连同ret和n被消除。变量var1没有被消除，由于它是全局执行上下文的一部分。
回到第6行。在调用上下文中，数字12被赋值给了multiplied。
在最后的第7行，将变量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 addNumbers;
8: }
9: let adder = createAdder();
10: let sum = adder(val, 8);
11: console.log('example of function returning a function: ', sum);

咱们一步步分解。

第一步，在全局执行上下文中声明变量val，赋值7。
2-8行。全局上下文中声明变量createAdder，而且给它定义一个函数。3-7行描述了函数的定义。像之前同样，在这一点上，咱们并无进入这个函数。咱们仅仅在变量（createAdder）中缓存了函数定义。
第9行。全局执行上下文中声明一个新的变量adder，undefined暂时被赋值给adder。
仍然第9行。看到了括号()，咱们须要执行一个函数。咱们查询全局执行上下文的内存并寻找一个叫作createAdder的变量。在第2步被找到。好的，执行它。
如今在第2行，正在执行函数。一个新的局部执行上下文被新建，而且在新的执行上下文中建立局部变量。这个机制添加了一个新的上下文到执行栈中。该函数没有参数，咱们直接跳到它的正文。
仍然在3-6行。有一个新的函数声明。局部执行上下文中建立变量addNumbers，重要的是，addNumbers仅仅存在局部执行上下文中。在局部变量addNumbers中缓存一个函数定义。
来到第7行。返回变量addNumbers的内容。运行机制寻找变量addNumbers而且找到，它是一个函数定义。很好，一个函数能够反回任何东西，包括一个函数定义。因此咱们返回addNumbers的定义。在4-5行的括号内，任何东西都组成了函数定义。从执行栈中也移除了一个局部执行上下文。
在return上面。局部执行上下文被清除。变量addNumbers不存在了。函数定义还在，它从函数中返回而且赋值给了adder，这个变量是在步骤3中建立的。
来到第10行。全局执行上下文中定义一个新的变量sum，暂时的赋值是undefined。
接下来咱们须要执行一个函数。哪一个函数？在名为adder中被定义的函数。在全局执行上下文中需找它，而且找到，是一个有2个参数的函数。
让咱们检索这两个参数，以便咱们能够调用该函数并传递正确的参数。第一个是在第一步被定义的val，值为7，第二个是数字8。
如今执行那个函数。在3-5行描述了该函数定义。一个新的局部执行上下文被建立，里面有2个新的变量被建立：a和b。它们分别赋值了值7和8，由于2个值是咱们上一步传递给函数的参数。
第4行，在局部执行上下文中一个新的变量ret被声明。
仍然第4行。执行加法，在其中将变量a的内容和变量b的内容相加。加法的结果（15）被赋值给了ret。
变量ret从函数中返回，局部执行上下文被摧毁，也移出了执行栈，变量a，b和ret不在存在。
返回值赋值给了在第9步定义的变量sum。
将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-8行，全局执行上下文中新建变量createCounter，而且赋值一个函数定义。
9行，全局执行上下文中声明一个变量increment。
9行，执行createCounter函数，而且将其返回值赋值给increment。
1-8行，正在执行函数，而且建立新的执行上下文。
2行，局部执行上下文内声明新的变量counter而且赋值0。
3-6行，局部执行上下文中声明新的变量myFunction。这个变量的内容是另外一个函数定义，在4-5行被定义。
7行，返回变量myFunction的内容。局部执行上下文被摧毁。myFunction和cunter不在存在。运行机制返回到调用上下文。
9行，在调用上下文内，全局执行上下文中，由createCounter返回的值被赋值为increment。increment包含一个函数定义。函数定义经过createCounter返回。它再也不是myFunction这个标记，可是是相同的定义。全局上下文中，被叫作increment。
10行，声明新的变量c1。
10行，查询变量increment，它是一个函数，调用它。它包含从前面返回的函数定义，第4-5行中所定义的。
建立新的执行上下文，没有参数，执行函数。
4行，counter = counter + 1。在局部执行做用域寻找counter。咱们仅仅建立了上下文，没有摧毁任何变量。看一看全局执行上下文，没有counter。js将评定为counter = undefined + 1，声明一个新的局部变量counter，赋值为1，undefined转化为0。
5行，返回counter的值或者数字1。摧毁局部执行上下文和变量counter。
返回10行，返回值（1）赋值给c1。
11行，重复10-14步，c2被赋值1。
12行，重复10-14步，c3被赋值1。
13行，打印变量c1，c2和c3的值。

亲自尝试一下，看看会发生什么。你会注意到log不是1，1，1，并不像咱们分析中指望的那样。而是1，2，3。怎么回事？

不知为什么，increment函数记住了counter的值。它是怎么运行的。

counter是全局执行上下文的一部分吗？经过console.log(counter)获得的结果是undefined。也不是。

因此必须有另外一种机制。闭包。咱们终于找到了失去的那一块。

不管什么时候声明一个新函数并将其赋值给一个变量，均可以存储函数定义及闭包。闭包包含建立函数时在做用域内的全部变量。相似一个背包，函数定义附带一个小的背包，在这个包中，它存储了建立函数定义时全部做用域内的变量。

所以咱们上面的解释是错的。咱们再试一次，此次是对的。

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-8行，全局执行上下文中新建变量createCounter，而且赋值一个函数定义。
9行，全局执行上下文中声明一个变量increment。
9行，执行createCounter函数，而且将其返回值赋值给increment。
1-8行，正在执行函数，而且建立新的执行上下文。
2行，局部执行上下文内声明新的变量counter而且赋值0。
3-6行，局部执行上下文中声明新的变量myFunction，这个变量是另外一个函数定义，在4-5行定义的。咱们还建立一个闭包并将其做为函数定义的一部分。闭包包含了做用域内的变量，还有这种状况下的变量counter（值为0）。
第7行，返回变量myFunction的内容，局部执行上下文被删除，myFunction和counter不在存在。控制器返回到执行栈。所以，咱们返回函数定义及其闭包，并在背包中建立处于做用域内的变量。
9行，在调用上下文内，全局执行上下文中，由createCounter返回的值被赋值为increment。increment包含一个函数定义。函数定义经过createCounter返回。它再也不是myFunction这个标记，可是是相同的定义。全局上下文中，被叫作increment。
10行，声明新的变量c1。
10行，查询变量increment，它是一个函数，调用它。它包含从前面返回的函数定义，第4-5行中所定义的。
建立新的执行上下文，没有参数，执行函数。
第4行，咱们须要寻找变量counter。咱们从局部和全局执行上下文中查找前，先看下闭包。你看，闭包中包含了一个变量counter，值为0。在第4行表达后，植被设置为了1。再次被存储到闭包中。如今闭包包含一个值为1的变量counter。
第5行，咱们返回了数字1，并摧毁局部执行上下文。
再到第10行，返回值1被赋值给了c1。
第11行，重复10-14步。此次，当咱们查看闭包的时候，看到了值为1的变量counter。在第4步或者程序的第4行被设置。在增量函数的闭包它的值被叠加，而且存储为2。c2被赋值为2。
12行，重复10-14步，c3被赋值1。
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。

结论

我可以记住闭包的方式是经过背包的比喻。当一个函数被建立并传递或从另外一个函数返回时，它会携带一个背包，而且背包里是函数声明时做用域内的变量。