javascript之閉包一（JavaScript 引擎的工做原理）

關於閉包的文章網上有不少，咱們都知道閉包很重要可是很難理解。越看越迷糊，感受看的似懂非懂，過不了多久就又忘了。爲了理清楚閉包的前因後果，我整理了閉包的文章，因爲我係統的整理了閉包，所寫的內容有些多，故將本篇文章共分三部分進行講解。指望對跟我有一樣困惑的前端人有所幫助！ 本文的目標：完全理解閉包的由來，掌握閉包知識，可以熟練應用，揭開閉包的神祕面紗，深刻理解閉包。咱們將從4個方面逐步講解。

內容介紹：

1. 閉包的由來
2. 閉包的知識點
3. 閉包的示例應用
4. 總結

1、閉包的由來

在理解閉包以前，須要先理解一些概念，執行上下文就是其中的一個。我會寫一篇文章中對執行上下文進行講解。如今先簡單解釋下，在運行 JavaScript 代碼時，它的運行環境是很是重要的，運行環境多是以下幾種中的一種：如：全局代碼——首次執行代碼的默認環境。函數代碼——每當執行流程進入函數體時……咱們將執行上下文定義當前代碼的執行環境或做用域。

換句話說，當咱們啓動程序時，咱們從全局執行上下文開始。咱們在全局執行上下文中聲明一些變量，這些變量爲全局變量。當程序調用函數時，會發生如下幾個步驟：一、JavaScript 建立一個新的本地執行上下文。 二、本地執行上下文將擁有本身的變量集。

三、新的執行上下文被拋到執行棧上。咱們能夠將執行棧視爲一種用於跟蹤程序執行位置的機制。

函數會在遇到 return 語句或結束括號}時結束執行，併發生如下狀況：

一、本地執行上下文從執行棧中跳出。

二、函數將返回值發送給調用上下文。調用上下文是調用此函數的執行上下文，它能夠是全局執行上下文或另外一個本地執行上下文。調用上下文將負責處理返回值，返回值能夠是對象、數組、函數、布爾值或其餘任何東西。若是函數沒有 return 語句，則返回 undefined。

三、本地執行上下文被銷燬，這個很重要。在本地執行上下文中聲明的全部變量都將被刪除，它們再也不可用，這就是爲何它們被稱爲局部變量。

第一部份內容介紹：

1. 理解js引擎的工做原理
2. 瞭解詞法做用域
3. 理解返回函數的函數
4. 閉包的出現

1、理解 JavaScript 引擎的工做原理

咱們先看一段代碼，是如何運行的呢？

let a = 3
 function addTwo(x) {
   let ret = x + 2
   return ret
 }
 let b = addTwo(a)
 console.log(b)
複製代碼

爲了理解 JavaScript 引擎的工做原理，咱們進行詳細分析下：

1. 在第 1 行，咱們在全局執行上下文中聲明一個新變量 a，並將它的值賦爲數字 3。

2. 在第 2 行到第 5 行，咱們在全局執行上下文中聲明瞭一個名爲 addTwo 的新變量，併爲其分配了一個函數定義，{}之間的內容被分配給了 addTwo。函數內部的代碼不會被執行，只是存儲在變量中以備未來使用。

3. 第 6 行，咱們在全局執行上下文中聲明瞭一個新變量，並將其標記爲 b。聲明變量後，它的值爲 undefined。

4. 接下來，仍然是第 6 行，咱們看到了一個賦值運算符。咱們準備爲變量 b 分配一個新值。接下來，咱們看到一個被調用的函數。當你看到一個變量後面跟着圓括號 (...) 時，就表示在調用一個函數。從函數返回的任何內容都將被分配給變量 b。

5. 但首先咱們須要調用被標記爲 addTwo 的函數。JavaScript 將在其全局執行上下文內存中查找名爲 addTwo 的變量。它找到了，也就是在步驟 2（或第 2-5 行）中定義的那個。變量 addTwo 包含了一個函數定義。請注意，變量 a 被做爲參數傳遞給該函數。JavaScript 在其全局執行上下文內存中搜索變量 a，找到它，發現它的值爲 3，而後將數值 3 做爲參數傳遞給該函數。準備執行該函數。

6. 如今切換執行上下文，建立了一個新的本地執行上下文，咱們將其命名爲「addTwo 執行上下文」。執行上下文被推送到調用棧。咱們在本地執行上下文中作的第一件事是什麼？

7. 你可能會想說，「在本地執行上下文中聲明瞭一個新的變量 ret」。但其實不是這樣的，咱們首先須要查看函數的參數。在本地執行上下文中聲明瞭一個新變量 x，又由於 3 被做爲參數傳遞進來，因此變量 x 被賦值爲 3。

8. 下一步：在本地執行上下文中聲明新的變量 ret，其值設置爲 undefined。（第 3 行）仍然是第 3 行，須要執行一個加法運算。首先，咱們須要 x 的值，JavaScript 會嘗試查找變量 x，它首先查看本地執行上下文。它找到了，值爲 3。第二個操做數是數值 2，加法的結果（5）被賦給變量 ret。

9. 第 4 行，咱們返回變量 ret 的內容。在本地執行上下文中進行另外一個查找。ret 包含值 5。函數返回數值 5，函數結束執行。

10. 第 4-5 行，函數結束執行，本地執行上下文被銷燬，變量 x 和 ret 被清除，它們再也不存在。上下文彈出調用棧，返回值被返回到調用上下文。在這種狀況下，調用上下文就是全局執行上下文，由於函數 addTwo 是從全局執行上下文中調用的。

11. 如今咱們從在步驟 4 中暫停的位置繼續。返回值（數值 5）被分配給變量 b。

12. 在第 7 行，變量 b 的內容會在控制檯中打印出來。在這個例子中，數值爲 5。

13. 對於一個很是簡單的程序來講，這樣的解釋顯得太過冗長，但咱們甚至都尚未提到閉包。我保證會說到那裏，但首先咱們須要說一些其餘的。