js 執行上下文

若是要問到 JavaScript 代碼執行順序的話，想必寫過 JavaScript 的開發者都會有個直觀的印象，那就是順序執行，畢竟：

var foo = function () {

    console.log('foo1');

}

foo();  // foo1

var foo = function () {

    console.log('foo2');

}

foo(); // foo2

上面代碼：變量提高

function foo() {

    console.log('foo1');

}

foo();  // foo2

function foo() {

    console.log('foo2');

}

foo(); // foo2

上面代碼：函數提高

 

但接下來要思考的是：

JavaScript 引擎並不是一行一行地分析和執行程序，而是一段一段地分析執行。當執行一段代碼的時候，會進行一個「準備工做」，好比第一個例子中的變量提高，和第二個例子中的函數提高。

可是本文真正想讓你們思考的是：這個「一段一段」中的「段」到底是怎麼劃分的呢？

到底JavaScript引擎遇到一段怎樣的代碼時纔會作「準備工做」呢？

可執行代碼

這就要說到 JavaScript 的可執行代碼(executable code)的類型有哪些了？

其實很簡單，就三種，全局代碼、函數代碼、eval代碼。

舉個例子，當執行到一個函數的時候 好比 f()，就會進行準備工做，這裏的「準備工做」，讓咱們用個更專業一點的說法，就叫作"執行上下文(execution context)"。   （ 碰到函數執行，就建立一個執行上下文）

執行上下文棧

接下來問題來了，咱們寫的函數多了去了，如何管理建立的那麼多執行上下文呢？

因此 JavaScript 引擎建立了執行上下文棧（Execution context stack，ECS）來管理執行上下文

爲了模擬執行上下文棧的行爲，讓咱們定義執行上下文棧是一個數組：  

ECStack = [];

試想當 JavaScript 開始要解釋執行代碼的時候，最早遇到的就是全局代碼，因此初始化的時候首先就會向執行上下文棧壓入一個全局執行上下文，咱們用 globalContext 表示它，而且只有當整個應用程序結束的時候，ECStack 纔會被清空，因此程序結束以前， ECStack 最底部永遠有個 globalContext：

ECStack = [
    globalContext
];

如今 JavaScript 遇到下面的這段代碼了：

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

當執行一個函數的時候，就會建立一個執行上下文，而且壓入執行上下文棧，當函數執行完畢的時候，就會將函數的執行上下文從棧中彈出。

如今 JavaScript 遇到下面的這段代碼了：

function fun3() {
    console.log('fun3')
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

當執行一個函數的時候，就會建立一個執行上下文，而且壓入執行上下文棧，當函數執行完畢的時候，就會將函數的執行上下文從棧中彈出。知道了這樣的工做原理，讓咱們來看看如何處理上面這段代碼：

// 僞代碼

// fun1()
ECStack.push(<fun1> functionContext);

// fun1中居然調用了fun2，還要建立fun2的執行上下文
ECStack.push(<fun2> functionContext);

// 擦，fun2還調用了fun3！
ECStack.push(<fun3> functionContext);

// fun3執行完畢
ECStack.pop();

// fun2執行完畢
ECStack.pop();

// fun1執行完畢
ECStack.pop();

// javascript接着執行下面的代碼，可是ECStack底層永遠有個globalContext