摘要：為什么會這樣這段代碼究竟是如何運行的執(zhí)行上下文堆棧瀏覽器中的解釋器單線程運行。瀏覽器始終執(zhí)行位于堆棧頂部的，并且一旦函數(shù)完成執(zhí)行當前操作，它將從堆棧頂部彈出，將控制權返回到當前堆棧中的下方上下文。確定在上下文中的值。

原文：What is the Execution Context & Stack in JavaScript?

git地址：JavaScript中的執(zhí)行上下文和隊列（棧）的關系？

導讀：以前總是看到相關文章提到什么變量提升，函數(shù)提升啥的，什么函數(shù)提升優(yōu)先級大于變量的，總是知其然，不知其所以然，當面試官拿著同一name，卻不斷function, 和var賦值，然后讓你告訴他每一個階段該是什么值的時候，拿著啥變量提升和函數(shù)提升是解釋不通的，至少我不能-_-。David Shariff的這篇文章為我們講述了其中的原理，讓人看了豁然開朗

在這篇文章中，我將深入探討JavaScript的一個最基本的部分，執(zhí)行上下文。 在本文結束時，您會更清楚解釋器都做了些什么，以至于某些函數(shù)、變量在聲明它們之前就可以使用，它們的值是如何確定的。

當代碼在JavaScript中運行時，它的執(zhí)行環(huán)境非常重要，并且它們分為以下幾類：

global 代碼 -- 首次執(zhí)行代碼的默認環(huán)境

function 代碼 -- 每當執(zhí)行流程進入函數(shù)體時

Eval 代碼 -- 要在內(nèi)部eval 函數(shù)內(nèi)執(zhí)行的文本

為了便于理解，本文中執(zhí)行上下文是指：當前被執(zhí)行的代碼的環(huán)境、作用域；接下來讓我們看一個執(zhí)行上下文中包含global、function content的代碼：

這里沒有什么特別之處，1個global context由紫色邊框表示，3個不同的function contexts分別由綠色、藍色和橙色邊框表示。只能有1個global context，可以從程序中的任何其他上下文訪問。

您可以擁有任意數(shù)量的function contexts，并且每個函數(shù)調(diào)用都會創(chuàng)建一個新的上下文，從而創(chuàng)建一個私有作用域，在該作用域內(nèi)，無法從當前函數(shù)作用域外直接訪問函數(shù)內(nèi)部聲明的任何內(nèi)容。在上面的示例中，函數(shù)可以訪問在其當前上下文之外聲明的變量，但外部上下文無法訪問在其內(nèi)部聲明的變量/函數(shù)。為什么會這樣？這段代碼究竟是如何運行的？

瀏覽器中的JavaScript解釋器單線程運行。這就意味著同一時間瀏覽器只執(zhí)行一件事，其它的事件在執(zhí)行隊列中排隊。下圖是單線程隊列的抽象視圖：

我們已經(jīng)知道，當瀏覽器首次加載您的腳本時，它默認進入全局執(zhí)行上下文（global execution contenrt）。如果在您的全局代碼中調(diào)用一個函數(shù)，程序的順序流進入被調(diào)用的函數(shù)，創(chuàng)建一個新函數(shù)execution context并將該上下文推送到頂部execution stack(執(zhí)行隊列)。

如果在當前函數(shù)中調(diào)用另一個函數(shù)，則會發(fā)生同樣的事情。代碼的執(zhí)行流程進入內(nèi)部函數(shù)，該函數(shù)創(chuàng)建一個execution context并推送到執(zhí)行隊列的頂部。瀏覽器始終執(zhí)行位于堆棧頂部的execution context，并且一旦函數(shù)完成執(zhí)行當前操作execution context，它將從堆棧頂部彈出，將控制權返回到當前堆棧中的下方上下文。下面的例子顯示了一個遞歸函數(shù)和程序execution stack：

(function foo(i) {
    if (i === 3) {
        return;
    }
    else {
        foo(++i);
    }
}(0));

代碼只調(diào)用自身3次，將i的值遞增1.每次調(diào)用foo函數(shù)時，都會創(chuàng)建一個新的執(zhí)行上下文。一旦執(zhí)行完成，它就會彈出堆棧并且將控制權交給它下面的上下文，直到再次到達global context（koa2的洋蔥圖想到了沒？）

單線程、

同步執(zhí)行

全局上下文

無限級的函數(shù)上下文

每個函數(shù)調(diào)用都會創(chuàng)建一個新的執(zhí)行上下文(execution context)，包括對自身的調(diào)用（遞歸）

所以我們現(xiàn)在知道每次調(diào)用函數(shù)時都會創(chuàng)建一個新的執(zhí)行上下文（execution context） 。但是，在JavaScript解釋器中，每次調(diào)用生成執(zhí)行上下文（execution context）都有兩個階段：

創(chuàng)建階段 [調(diào)用函數(shù)時，但在執(zhí)行任何代碼之前]：

創(chuàng)建作用域鏈。
創(chuàng)建變量（variables），函數(shù)（functions ）和參數(shù)（arguments）
確定"this"。

激活/執(zhí)行階段：

var 賦值，（function聲明）指向函數(shù)，解釋/執(zhí)行代碼

可以將每個execution context概念上表示為具有3個屬性的對象：

executionContextObj = {
    "scopeChain": { /* variableObject + all parent execution context"s variableObject */ },
    "variableObject": { /* function arguments / parameters, inner variable and function declarations */ },
    "this": {}
}

這executionContextObj是在調(diào)用函數(shù)時，但在執(zhí)行實際函數(shù)之前創(chuàng)建的。這是第一階段:創(chuàng)建階段。這里，解釋器通過掃描傳入的參數(shù)或arguments、本地函數(shù)聲明和局部變量聲明來創(chuàng)建executionContextObj。這次掃描的結果就變成了executionContextObj.variableObject。

遇到函數(shù)調(diào)用。

在執(zhí)行function代碼之前，創(chuàng)建執(zhí)行上下文（execution context）。

進入創(chuàng)建階段：

初始化作用域鏈（Scope Chain）。

創(chuàng)建變量對象（variable object）：

創(chuàng)建arguments object，檢查參數(shù)的上下文，初始化名稱和值并創(chuàng)建引用副本。

掃描上下文以獲取函數(shù)聲明：

對于找到的每個函數(shù)，在variable object中創(chuàng)建一個以函數(shù)名稱為屬性的鍵值對，值指向內(nèi)存中函數(shù)的引用指針。

如果函數(shù)名已存在，則將覆蓋引用指針值。

掃描上下文以獲取變量聲明：

對于找到的每個變量聲明，在variable object中創(chuàng)建一個以變量名為屬性的鍵值對，值初始化為undefined。

如果變量名已經(jīng)存在于variable object，則不執(zhí)行任何操作并繼續(xù)掃描。

確定"this"在上下文中的值。

激活/執(zhí)行階段：

在上下文中運行/解析函數(shù)體的代碼，并在代碼逐行執(zhí)行時為變量賦值。

我們來看一個例子：

function foo(i) {
    var a = "hello";
    var b = function privateB() {

    };
    function c() {

    }
}

foo(22);

在調(diào)用時foo(22)，creation stage長這樣子：

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ... }
}

正如您所看到的，creation stage定義屬性的name，不為它們賦值，但formal arguments / parameters（函數(shù)傳參，arguments）除外。一旦creation stage完成后，執(zhí)行流程進入函數(shù)體，在函數(shù)已經(jīng)完成執(zhí)行之后的execution stage如下：

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: "hello",
        b: pointer to function privateB()
    },
    this: { ... }
}

在很多JavaScript的資料中都提到了提升，解釋變量和函數(shù)聲明被提升到其作用域的頂部。但是，沒有人詳細解釋為什么會發(fā)生這種情況，而在你掌握了關于解釋器如何創(chuàng)建activation object后，會很容易理解。示例：

(function() {

    console.log(typeof foo); // function pointer
    console.log(typeof bar); // undefined

    var foo = "hello",
        bar = function() {
            return "world";
        };

    function foo() {
        return "hello";
    }

}());?

我們現(xiàn)在可以回答的問題是：

為什么我們可以在聲明它之前訪問foo？

如果我們遵循creation stage，我們知道變量在activation / code execution stage之前就創(chuàng)建了。所以當功能流程開始執(zhí)行時，foo早就在activation object中定義了。

foo是聲明了兩次，為什么顯示foo的是 function ，__不是__ undefined 或 string？

即使foo聲明了兩次，我們也知道在creation stage函數(shù)在變量之前就在activation objectbefore上創(chuàng)建了，如果屬性名已經(jīng)存在于activation object，解釋器會忽略掉此次聲明。

因此，首先會在activation object上創(chuàng)建一個foo()的引用，當解釋器到達時var foo，屬性名稱foo存在，所以代碼什么也不做，然后繼續(xù)。

為什么 bar 是 undefined？

bar實際上是一個具有函數(shù)賦值的變量，我們知道變量是在creation stage創(chuàng)建的，但它們的初始值為undefined。

希望到現(xiàn)在您已經(jīng)很好地掌握了JavaScript解釋器如何執(zhí)行您的代碼。理解執(zhí)行上下文和隊列可以讓您了解代碼沒有達到預期的原因

您是否認為了解解釋器的內(nèi)部工作原理是您的JavaScript知識的重要組成部分？知道執(zhí)行上下文的每個階段是否有助于您編寫更好的JavaScript？

__注意__：有些人一直在問關于閉包，回調(diào)，超時等，我將在在下一篇文章中涉及，主要概述作用域鏈與execution context的關系。

ECMA-262-3 in detail. Chapter 2. Variable object

Identifier Resolution, Execution Contexts and scope chains