我從沒理解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。