我歷來不理解JavaScript閉包，直到有人這樣向我解釋它...

摘要： 理解JS閉包。

• 原文：我歷來不理解JavaScript閉包，直到有人這樣向我解釋它...
• 做者：前端小智

Fundebug經受權轉載，版權歸原做者全部。

正如標題所述，JavaScript閉包對我來講一直有點神祕,看過不少閉包的文章，在工做使用過閉包，有時甚至在項目中使用閉包，但我確實是這是在使用閉包的知識。

最近看國外的一些文章，終於，有人用於一種讓我明白方式對閉包進行了解釋，我將在本文中嘗試使用這種方法來解釋閉包。

準備

在理解閉包以前，有個重要的概念須要先了解一下，就是 js 執行上下文。

這篇文章是執行上下文 很不錯的入門教程，文章中提到：

當代碼在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)
複製代碼

爲了理解JavaScript引擎是如何工做的，讓咱們詳細分析一下：

• 在第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)
複製代碼

這裏想說明，咱們在函數執行上下文中有變量，在全局執行上下文中有變量。JavaScript的一個複雜之處在於它如何查找變量，若是在函數執行上下文中找不到變量，它將在調用上下文中尋找它，若是在它的調用上下文中沒有找到，就一直往上一級，直到它在全局執行上下文中查找爲止。(若是最後找不到，它就是 undefined)。

下面列出向個步驟來解釋一下（若是你已經熟悉了，請跳過）：

• 在全局執行上下文中聲明一個新的變量val1，並將其賦值爲2。
• 行2 - 5，聲明一個新的變量 multiplyThis，並給它分配一個函數定義。
• 第六行，聲明一個在全局執行上下文 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 變量的值

在這個例子中，咱們須要記住一個函數能夠訪問在它的調用上下文中定義的變量，這個就是詞法做用域（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)
複製代碼

讓咱們回到分步分解：

• 第一行。咱們在全局執行上下文中聲明一個變量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或右括號}時執行完成。

碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

最後,一個閉包

看看下面的代碼，並試着弄清楚會發生什麼。

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閉包
• 10個JavaScript難點

關於Fundebug

Fundebug專一於JavaScript、微信小程序、微信小遊戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有Google、360、金山軟件、百姓網等衆多品牌企業。歡迎你們免費試用！