溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
正如標題所述，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，并給它分配一個函數定義。
第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 變量的值
在這個例子中，我們需要記住一個函數可以訪問在它的調用上下文中定義的變量，這個就是詞法作用域（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行。我們在全局執行上下文中聲明一個變量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。
總結
我將永遠記住閉包的方法是通過背包的類比。當一個函數被創建并傳遞或從另一個函數返回時，它會攜帶一個背包。背包中是函數聲明時作用域內的所有變量。
代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
你的點贊是我持續分享好東西的動力，歡迎點贊！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
