我从来不理解JavaScript闭包，直到有人这样向我解释它
Posted web前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我从来不理解JavaScript闭包，直到有人这样向我解释它相关的知识，希望对你有一定的参考价值。
当代码在JavaScript中运行时，执行代码的环境非常重要，并将概括为以下几点： 全局作用域——第一次执行代码的默认环境。 函数作用域——当执行流进入函数体时。
(…) —— 我们当作 执行上下文 是当前代码执行的一个环境与作用域。
JavaScript创建一个新的执行上下文，我们叫作本地执行上下文。
这个本地执行上下文将有它自己的一组变量，这些变量将是这个执行上下文的本地变量。
新的执行上下文被推到到执行堆栈中。可以将执行堆栈看作是一种保存程序在其执行中的位置的容器。
return
语句或一个结束括号
}
。
这个本地执行上下文从执行堆栈中弹出。
函数将返回值返回调用上下文。调用上下文是调用这个本地的执行上下文，它可以是全局执行上下文，也可以是另外一个本地的执行上下文。这取决于调用执行上下文来处理此时的返回值，返回的值可以是一个对象、一个数组、一个函数、一个布尔值等等，如果函数没有
return语句，则返回undefined。这个本地执行上下文被销毁，销毁是很重要，这个本地执行上下文中声明的所有变量都将被删除，不在有变量，这个就是为什么 称为本地执行上下文中自有的变量。
基础的例子
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)
在第
1行，我们在全局执行上下文中声明了一个新变量a，并将赋值为3。接下来就变得棘手了，第
2行到第5行实际上是在一起的。这里发生了什么? 我们在全局执行上下文中声明了一个名为addTwo的新变量,我们给它分配了什么?一个函数定义。两个括号{}之间的任何内容都被分配给addTwo，函数内部的代码没有被求值，没有被执行，只是存储在一个变量中以备将来使用。现在我们在第
6行。它看起来很简单，但是这里有很多东西需要拆开分析。首先，我们在全局执行上下文中声明一个新变量，并将其标记为b，变量一经声明，其值即为undefined。接下来，仍然在第
6行，我们看到一个赋值操作符。我们准备给变量b赋一个新值，接下来我们看到一个函数被调用。当看到一个变量后面跟着一个圆括号(…)时，这就是调用函数的信号，接着，每个函数都返回一些东西(值、对象或 undefined)，无论从函数返回什么，都将赋值给变量b。但是首先我们需要调用
addTwo的函数。JavaScript将在其全局执行上下文内存中查找名为addTwo的变量。噢，它找到了一个，它是在步骤2(或第2 - 5行)中定义的。变量add2包含一个函数定义。注意，变量a作为参数传递给函数。JavaScript在全局执行上下文内存中搜索变量a，找到它，发现它的值是3，并将数字3作为参数传递给函数，准备好执行函数。现在执行上下文将切换,创建了一个新的本地执行上下文，我们将其命名为“addTwo执行上下文”，执行上下文被推送到调用堆栈上。在
addTwo执行上下文中，我们要做的第一件事是什么?你可能会说，“在
addTwo执行上下文中声明了一个新的变量ret”，这是不对的。正确的答案是，我们需要先看函数的参数。在addTwo执行上下文中声明一个新的变量``x```，因为值3是作为参数传递的，所以变量`x`被赋值为3。下一步是:在
addTwo执行上下文中声明一个新的变量ret。它的值被设置为undefined(第三行)。仍然是第3行，需要执行一个相加操作。首先我们需要
x的值，JavaScript会寻找一个变量x，它会首先在addTwo执行上下文中寻找，找到了一个值为3。第二个操作数是数字2。两个相加结果为5就被分配给变量ret。第
4行，我们返回变量ret的内容，在addTwo执行上下文中查找，找到值为5，返回，函数结束。第
4-5行，函数结束。addTwo执行上下文被销毁，变量x和ret被释放，它们已经不存在了。addTwo 执行上下文从调用堆栈中弹出，返回值返回给调用上下文，在这种情况下，调用上下文是全局执行上下文，因为函数addTwo是从全局执行上下文调用的。现在我们继续第
4步的内容，返回值5被分配给变量b，程序仍然在第6行。在第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)
undefined
)。
在全局执行上下文中声明一个新的变量
val1，并将其赋值为2。第
2-5行，声明一个新的变量multiplyThis，并给它分配一个函数定义。第
6行，声明一个在全局执行上下文multiplied新变量。从全局执行上下文内存中查找变量
multiplyThis，并将其作为函数执行，传递数字6作为参数。新函数调用(创建新执行上下文），创建一个新的
multiplyThis函数执行上下文。在
multiplyThis执行上下文中，声明一个变量n并将其赋值为6。第
3行。在multiplyThis执行上下文中，声明一个变量ret。继续第
3行。对两个操作数n和val1进行乘法运算.在multiplyThis执行上下文中查找变量n。我们在步骤6中声明了它,它的内容是数字6。在multiplyThis执行上下文中查找变量val1。multiplyThis执行上下文没有一个标记为val1的变量。我们向调用上下文查找，调用上下文是全局执行上下文，在全局执行上下文中寻找val1。哦，是的、在那儿，它在步骤1中定义，数值是2。继续第
3行。将两个操作数相乘并将其赋值给ret变量，6 * 2 = 12，ret 现在值为12。返回
ret变量，销毁multiplyThis执行上下文及其变量ret和n。变量val1没有被销毁，因为它是全局执行上下文的一部分。回到第
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)
第
1行。我们在全局执行上下文中声明一个变量val并赋值为7。第
2-8行。我们在全局执行上下文中声明了一个名为createAdder的变量，并为其分配了一个函数定义。第3-7行描述了上述函数定义，和以前一样，在这一点上，我们没有直接讨论这个函数。我们只是将函数定义存储到那个变量(createAdder)中。第
9行。我们在全局执行上下文中声明了一个名为adder的新变量，暂时，值为undefined。第
9行。我们看到括号()，我们需要执行或调用一个函数，查找全局执行上下文的内存并查找名为createAdder的变量，它是在步骤2中创建的。好吧，我们调用它。调用函数时，执行到第
2行。创建一个新的createAdder执行上下文。我们可以在createAdder的执行上下文中创建自有变量。js 引擎将createAdder的上下文添加到调用堆栈。这个函数没有参数，让我们直接跳到它的主体部分.第
3-6行。我们有一个新的函数声明，我们在createAdder执行上下文中创建一个变量addNumbers。这很重要，addnumber只存在于createAdder执行上下文中。我们将函数定义存储在名为 ``addNumbers``` 的自有变量中。第
7行，我们返回变量addNumbers的内容。js引擎查找一个名为addNumbers的变量并找到它，这是一个函数定义。好的，函数可以返回任何东西，包括函数定义。我们返addNumbers的定义。第4行和第5行括号之间的内容构成该函数定义。返回时，
createAdder执行上下文将被销毁。addNumbers变量不再存在。但addNumbers函数定义仍然存在，因为它返回并赋值给了adder变量。第
10行。我们在全局执行上下文中定义了一个新的变量sum，先赋值为undefined;接下来我们需要执行一个函数。哪个函数? 是名为
adder变量中定义的函数。我们在全局执行上下文中查找它，果然找到了它，这个函数有两个参数。让我们查找这两个参数，第一个是我们在步骤1中定义的变量
val，它表示数字7，第二个是数字8。现在我们要执行这个函数，函数定义概述在第
3-5行，因为这个函数是匿名，为了方便理解，我们暂且叫它adder吧。这时创建一个adder函数执行上下文，在adder执行上下文中创建了两个新变量a和b。它们分别被赋值为7和8，因为这些是我们在上一步传递给函数的参数。第
4行。在adder执行上下文中声明了一个名为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和counter不再存在。此时控制权回到了调用上下文。第
9行。在调用上下文(全局执行上下文)中，createCounter返回的值赋给了increment，变量increment现在包含一个函数定义内容为createCounter返回的函数。它不再标记为myFunction````，但它的定义是相同的。在全局上下文中，它是的标记为labeledincrement```。第
10行。声明一个新变量c1。继续第
10行。查找increment变量，它是一个函数并调用它。它包含前面返回的函数定义，如第4-5行所定义的。创建一个新的执行上下文。没有参数，开始执行函数。
第
4行。counter=counter + 1。在本地执行上下文中查找counter变量。我们只是创建了那个上下文，从来没有声明任何局部变量。让我们看看全局执行上下文。这里也没有counter变量。Javascript会将其计算为counter = undefined + 1，声明一个标记为counter的新局部变量，并将其赋值为number 1，因为undefined被当作值为 0。第
5行。我们变量counter的值1，我们销毁本地执行上下文和counter变量。回到第
10行。返回值1被赋给c1。第
11行。重复步骤10-14，c2也被赋值为1。第
12行。重复步骤10-14，c3也被赋值为1。第
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-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 + 1，寻找变量counter，在查找本地或全局执行上下文之前，让我们检查一下闭包，瞧，闭包包含一个名为counter的变量，其值为0。在第4行表达式之后，它的值被设置为1。它再次被储存在闭包里，闭包现在包含值为1的变量counter。第
5行。我们返回counter的值，销毁本地执行上下文。回到第
10行。返回值1被赋给变量c1。第
11行。我们重复步骤10-14。这一次，在闭包中此时变量counter的值是1。它在第12行设置的，它的值被递增并以2的形式存储在递增函数的闭包中,c2被赋值为2。第
12行。重复步骤10-14行,c3被赋值为3。第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
。
总结
以上是关于我从来不理解JavaScript闭包，直到有人这样向我解释它的主要内容，如果未能解决你的问题，请参考以下文章