JavaScript深入之執行內容棧

標籤：fun   iss   提升   例子   http   table   開發   alc   開發人員   

如果要問到 javascript 代碼執行順序的話，想必寫過javascript的開發人員都會有個直觀的印象，那就是順序執行，例如：

var foo = function(){  console.log(‘foo1‘)}foo() // foo1var foo function(){   console.log(‘foo2‘)}foo() // foo2

然而去看這段代碼：

function foo(){  console.log(‘foo1‘);}foo() // foo2function foo(){  console.log(‘foo2‘)}foo() // foo2

列印的結果卻是兩個 foo2

刷過面試題的都知道這是因為javascript引擎並非一行一行的分析和執行程式，而是一段一段的分析執行。
當執行一段代碼的時候，會進行一個“準備工作”，比如第一個例子中的變數提升，和第二個例子中的函數提升。

但是本文真正想讓大家思考的是： 這個 “一段一段” 中的 “段” 究竟是怎麼劃分的呢？

到底 javascript 引擎遇到一段怎樣的代碼時才會做“準備工作”呢？

可執行代碼

這就要說到 javascript 的可執行代碼（executable code）的類型有哪些了？

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

舉個例子，當執行到一個函數的時候，就會進行準備工作，這裡的 “準備工作”， 讓我們用個更專業一點的說法，就叫做 "執行內容(execution context)"。

執行內容棧

接下來問題來了，我們寫的函數很多，如何管理建立的那麼多執行內容呢？

所以 javascript 引擎建立了執行內容棧(Execution context stack, ECS) 來管理執行內容。

為了類比執行內容棧的行為，讓我們定義執行內容棧是一個數組：

ECStask = [];

試想當javascript開始要解釋執行代碼的時候，最先遇到的就是全域代碼，所以初始化的時候首先就會向執行內容棧壓入一個全域執行內容，我們用 globalContext 表示它，並且只有當整個應用程式結束的時候，ECStack才會被清空，所以 ECStack 最底部永遠有個 globalContext:

ECStack = [  globalContext]

現在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中調用了 fun3ECStack.push(<fun3> functionContext);// fun3執行完畢ECStack.pop();// fun2執行完畢ECStack.pop();// fun1執行完畢ECStack.pop();// javascript接著執行下面的代碼，但是ECStack底層永遠有個globalContext

參考文章：https://github.com/mqyqingfeng/Blog/issues/2

JavaScript深入之執行內容棧