JavaScript 閉包與範圍 ── Execution Context

閉包(closure)在 JavaScript 中佔著重要的地位，但閉包本人其實不太好搞，先從與閉包密不可分的 ── 作用範圍(Scope)開始下手吧！這篇將從執行背景空間(execution context)開始介紹，一步步看 JavaScript 引擎是如何追蹤程式碼的執行，然後…等時機到了就會知道什麼是閉包了(吧)。

如果不相信閉包本人很難搞的話，可以打開 MDN，你會看到閉包的定義為：

英版 MDN：

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

中版 MDN：

閉包（Closure）是函式以及該函式被宣告時所在的作用域環境（lexical environment）的組合。

如果你看不懂 MDN 在說什麼，別鐵齒了~還是先繞過閉包本人吧！

Execution Context (執行背景空間)

由於 JavaScript 屬於單執行緒(Single Thread)，也就是它「一次只能做一件事」，所以當它要去執行另一件任務 B 時，就勢必得先暫停手上正在進行的任務 A，等待任務 B 執行完畢後，再回過頭繼續完成任務 A。若是在執行任務 B 時，又被叫去做任務Ｃ，這時又得停下手邊的任務 B，先去執行完任務 C，接著回頭處理完任務 B，最後再回到任務 A。以此類推，因此所有一連串的任務都需要被追蹤。

每個任務都有一個執行背景空間(execution context)，JavaScript 引擎用 call stack 來追蹤它們。

在 JavaScript 中，有兩種執行背景空間(execution context)：

全域執行背景空間

只有一個，且總是最早被建立的，負責處理全域中的程式碼。

函式執行背景空間

每呼叫函式一次，就會建立一個新的函式執行背景空間，負責處理函式中的程式碼。

call stack (呼叫堆疊)

JavaScript 引擎利用call stack(呼叫堆疊)來追蹤所有任務，

現在用個例子來看看執行背景空間(execution context)究竟是如何堆疊(被追蹤)的。

function a(){
  b();    // 呼叫函式 b
}

function b(){
  console.log('函式 b 被執行了')
}

a();    // 第一次呼叫函式 a
a();    // 第二次呼叫函式 a

最先被創建的永遠是全域執行背景空間。
在全域下，定義了函式 a 與函式 b，接著呼叫了函式 a (第 9 行)，於是建立 a 函式執行背景空間，並堆放至 stack 中，由於 JavaScript 一次只能做一件事，所以此時全域執行背景空間會被暫停。
因在函式 a 中又呼叫了函式 b，於是建立 b 函式執行背景空間，並堆放至 stack 中，此時 a 函式執行背景空間會被暫停。
印出「函式 b 被執行了」後，b 函式執行完畢，於是 b 函式執行背景空間從 stack 中移出(pop)，回到了 a 函式執行背景空間繼續執行。
a 函式執行完畢(a 函式中也已經沒有其他程式碼需要被執行了)，a 函式執行背景空間從 stack 中移出，回到全域執行背景空間繼續執行。
在全域下，第 10 行中又再次呼叫函式 a，以上 2~5 的過程又重複一次。