原文
概述
JS大致的執行過程是這樣的：JS引擎會先對 JavaScript 程式碼進行解析（詞法分析，語法分析），生成 AST 樹，然後轉換成機器指令，進而在CPU 中進行執行。如下圖所示：
而在這個過程中，最基礎的，也是最重要的就是理解執行上下文（EC：Execution Context），這都有助於你接下來理解GO，AO，變數提升，作用域（鏈），閉包等，因為這些概念及其關係全部都發生在EC中（當然，無論是GEC還是FEC都存在於ECS中，這個後面會說明）。所以，我們就先從EC講起。講解之前，針對即將遇到的名詞做一個總述，希望大家記住這些，看起來很多，但也只是幾個單詞的排列組合而已。
專有名詞描述
執行上下文（EC：Execution Context）
什麼是執行上下文呢？按照TC39官方的說法是“An execution context is a specification device that is used to track the runtime evaluation of code by an ECMAScript implementation.” 官方說法不太好理解，大神Tyler用編寫軟體的流程來類比得出EC–Just like functions/modules/packages allow you to manage the complexity of writing code, Execution Contexts allow the JavaScript engine to manage the complexity of interpreting and running your code.可理解為：執行上下文是指JavaScript程式碼被執行時的環境，它包括了當前程式碼中的變數、函式和引數等資訊。
Javascript 一共有三種執行上下文：
全域性執行上下文（GEC）
這是一個預設的或者說基礎的執行上下文，所有不在函式中的程式碼都會在全域性執行上下文中執行。它會做兩件事：建立一個全域性的 window 物件(瀏覽器環境下)，並將 this 的值設定為該全域性物件，另外一個程式中只能有一個全域性上下文。
函式執行上下文（FEC）
每次呼叫函式時，都會為該函式建立一個執行上下文，每一個函式都有自己的一個執行上下文，但注意是該執行上下文是在函式被呼叫的時候才會被建立。函式執行上下文會有很多個，每當一個執行上下文被建立的時候，都會按照他們定義的順序去執行相關程式碼（這會在後面會說到）。
Eval 函式執行上下文。
在 eval 函式中執行的程式碼也會有自己的執行上下文，但由於 eval 函式不會被經常用到，這裡就不做討論了。(譯者注：eval 函式容易導致惡意攻擊，並且執行程式碼的速度比相應的替代方法慢，所以不推薦使用)。
全域性執行上下文 GEC：Global Execution Context
當JS引擎執行JS程式碼所建立的第一個EC就稱為GEC，無論是GEC還是FEC，都是在ECS中建立的。GEC的初始化通常由兩部分組成 – 全域性物件和this。this的值取決於JS程式碼的執行環境，如果JS程式碼是執行在瀏覽器中，那麼this就是window，如果執行在node環境中，那麼this就是global object。下面所舉的例子如不做特殊說明，都表明其執行在瀏覽器中
初始化過程：
GEC中的程式碼執行分為兩個階段，建立階段和執行階段。
建立階段：
從上圖可以總結出GEC程式碼的建立階段分為以下四個步驟：
建立一個全域性物件
建立一個this物件
為變數和函式分配記憶體空間
在記憶體中存放函式宣告，為變數宣告指定預設值“undefined”。
接下來看一下執行階段：
兩個階段總結為：在建立階段，建立全域性物件window和this物件，宣告的變數被分配一個預設值undefined，所有函式宣告（getUser）都被放入到記憶體中。然後，一旦我們進入執行階段，也只有進入到執行階段，JavaScript引擎才會開始逐行執行程式碼，並將實際值分配給已經存在於記憶體中的變數。
變數提升
接下來透過一段程式碼來看一下變數提升是什麼意思。
因此，什麼是變數提升呢？在建立階段為變數宣告指定undefined的預設值的過程稱為提升。簡單理解就是：變數提升就是字面意思，變數宣告被提升到了前面。（當然，這個只針對於var定義的變數，因為其沒有自己的作用域）。
針對變數提升需要注意的點是：
函式提升只針對具名函式，而對於賦值的匿名函式（表示式函式），並不會存在函式提升。
【提升優先順序問題】函式提升優先順序高於變數提升，且不會被同名變數宣告覆蓋，但是會被變數賦值後覆蓋。而且存在同名函式與同名變數時，優先執行函式。
看個例子：
console.log(foo); // f foo()
console.log(foo()); // 2
var foo = 1;
function foo(){
console.log(2);
}
console.log(typeof foo) // number
console.log(foo); // 1
foo = 3
console.log(foo()) // Uncaught TypeError:foo is not a function
1
2
3
4
5
6
7
8
9
10
函式執行上下文（FEC：Function Execution Context）
讓我們再來看一個例子。
var name = 'Tyler';
var handle = '@tylermcginnis';
function getURL (handle) {
var tempURL = "http://www.baidu.com/";
return tempURL + handle;
}
getURL();
1
2
3
4
5
6
7
8
9
Tips: 當且僅當函式被呼叫時，FEC才會被建立。
與GEC中的程式碼執行類似，FEC中的程式碼執行也分為兩個階段，建立階段和執行階段。
建立階段：
從上圖可以總結出FEC程式碼的建立階段分為以下四個步驟：
建立一個arguments物件
建立一個this物件（this的指向與呼叫方式有關，不一定是window）
為變數和函式分配記憶體空間
在記憶體中存放函式宣告，為變數宣告指定預設值“undefined”。
執行階段
兩個階段總結為：在建立階段，建立物件arguments和this物件，宣告的變數被分配一個預設值undefined，所有宣告都被放入到記憶體中。然後，一旦我們進入執行階段，也只有進入到執行階段，JavaScript引擎才會開始逐行執行程式碼，並將實際值分配給已經存在於記憶體中的變數。
JS程式碼的執行流程
說到這裡我們已經對GEC和FEC，包括變數提升有了一定的瞭解，但是對於GEC與FEC中的程式碼為什麼會這麼執行，以及GEC與FEC如何呼叫及清除還是會有些困惑。接下來透過一張JS程式碼的執行流程圖來看一下JS程式碼的大致執行過程，再進行接下來的敘述：
執行上下文棧（呼叫棧）（ECS）
透過上圖，我們可以知道，事實上，JS引擎內部有一個ECS（也叫做呼叫棧CS），他是用來執行程式碼的呼叫棧。如前所述，JS引擎執行JS程式碼所建立的第一個EC就稱為GEC，這個GEC會被推入到ECS中。以後，任何一個函式被呼叫時，就會新建立一個FEC，將其推入到ECS中，當函式的建立和執行階段都完成後，FEC就會從ECS中出棧。當GEC中的程式碼也完成這兩個階段後，GEC也會出棧，程式碼執行就結束了。
作用域（鏈）
讓我們再看一個例子。
var name = 'Tyler';
var handle = '@tylermcginnis';
function getURL (handle) {
var tempURL = "http://www.baidu.com/";
// 'http://www.baidu.com/Tylerundefined'
return tempURL + name + handle;
}
getURL();
1
2
3
4
5
6
7
8
9
10
上述程式碼有一些重要的細節我們需要關注。
首先，向函式中傳入的任何變數都將作為區域性變數被新增到FEC中。在這個例子中，handle即作為GEC中的變數而存在（因為其是在那裡定義的），又作為getURL的FEC中的變數而存在（因為我們將其作為引數傳入）
其次，在函式內部宣告的變數位於FEC中。因此，當我們建立tempURL時，他就位於getURL的EC中，而不是GEC中。為什麼會這樣呢？這就引出來作用域的概念了。什麼是作用域呢？MDN將作用域定義為：“執行的當前上下文”。JavaScript 中的作用域其實就是變數的可訪問性和可見性。也就是說整個程式中哪些部分可以訪問這個變數，或者說這個變數都在哪些地方可見。
我們知道，在ES6之前，JS只有函式作用域和全域性作用域這兩種。在全域性作用域定義的變數在全域性都有效，而在函式作用域中定義的變數只在函式中起作用，當FEC完成了建立和執行兩個階段，FEC從ECS中出棧，FEC中的變數被清除（在大多數情況下，特殊情況如閉包，接下里會進行講述）。
作用域鏈：將上述程式碼執行後發現結果為‘http://www.baidu.com/Tylerundefined’，這裡有一個疑問就是，函式getURL的EC中沒有定義name，為何結果中name可以被找到。這就涉及到一個概念 – 作用域鏈。那麼什麼是作用域鏈呢？如果變數不存在於本地執行上下文中，JavaScript引擎逐一檢查每個單獨的父級執行上下文的過程稱為作用域鏈。 如果逐級找到GEC中後，還沒有找到這個變數的定義。那麼就會報Reference Error錯誤。
閉包
如前所述，在大多數情況下，當FEC完成了建立和執行兩個階段，FEC從ECS中出棧，FEC中的變數被清除。但是有一種特殊情況，FEC中的變數不會被（完全）清除，就是閉包。那麼，什麼是閉包呢？MDN上將閉包定義為：閉包（closure）是一個函式以及其捆綁的周邊環境狀態（lexical environment，詞法環境）的引用的組合。也就是說，閉包可以讓一個內層函式訪問到外層函式的作用域。可以簡單理解為，JS中的函式，如果其訪問量外層作用域中的變數，那麼它就是一個閉包。 所以，上述例子中的getURL就是一個閉包。再來看一個例子
var count = 0;
function makeAdd(x) {
var z = 3;
return function inner(y) {
return x + y;
};
}
var add5 = makeAdd(5);
count += add5(8);
1
2
3
4
5
6
7
8
9
10
11
在這個示例中，內部函式inner巢狀在makeAdder函式內部，因此inner在makeAddr變數環境上建立了一個閉包。即使在makeAdder Execution Environment從Execution Stack中彈出之後，由於建立了閉包，內部也可以訪問x變數（透過Scope Chain）。
如上圖所示，之所以說存在閉包，FEC中的變數不會被完全清除，這是跟V8引擎的最佳化有關的。對於閉包內引用的變數，V8引擎不會將其清除，而對於沒有引用的變數，則會清除。如上述程式碼中，x會存在於閉包中，而z則會在makeAdder 的EC從ECS中彈出後被清除。
GO, AO, VO, VE
上面敘述了這麼多，那麼GO, AO, VO, VE到底又是啥呢？他們出現在哪個地方呢？下面從 ECMA 新舊版本規範中來談談 。
在早期 ECMA 的版本規範中：每一個執行上下文會被關聯到一個變數物件（Variable Object，簡稱 VO），在原始碼中的變數和函式宣告會被作為屬性新增到 VO 中。對應函式來說，引數也會被新增到 VO 中。
也就是建立的 GO 或者 AO 都會被關聯到變數環境（VO）上，可以透過 VO 查詢到需要的屬性；
規定了 VO 為 Object 型別，通常 GO 和 AO 都是 Object 型別；
在最新 ECMA 的版本規範中：每一個執行上下文會關聯到一個變數環境（Variable Environment，簡稱 VE），在執行程式碼中變數和函式的宣告會作為環境記錄（Environment Record）新增到變數環境中。對於函式來說，引數也會被作為環境記錄新增到變數環境中。
也就是相比於早期的版本規範，對於變數環境，已經去除了 VO 這個概念，提出了一個新的概念 VE；
沒有規定 VE 必須為 Object，不同的 JS 引擎可以使用不同的型別，作為一條環境記錄新增進去即可；
雖然新版本規範將變數環境改成了 VE，但是 JavaScript 的執行過程還是不變的，只是關聯的變數環境不同，將 VE 看成 VO 即可；