JavaScript內(nèi)部原理系列－執(zhí)行上下文（Execution Context）

imingyu 發(fā)布于2019-08-21 10:23 / 2466人閱讀

摘要：一系列活動(dòng)的執(zhí)行上下文從邏輯上形成一個(gè)棧。棧底總是全局上下文，棧頂是當(dāng)前活動(dòng)的執(zhí)行上下文。同樣的，當(dāng)拋出未捕獲的異常時(shí)，也會(huì)退出一個(gè)或者多個(gè)執(zhí)行上下文，也會(huì)做相應(yīng)的退棧操作。

概要

本文將向大家介紹ECMAScript的執(zhí)行上下文以及相關(guān)的可執(zhí)行代碼類型。

定義

每當(dāng)控制器到達(dá)ECMAScript可執(zhí)行代碼的時(shí)候，控制器就進(jìn)入了一個(gè)執(zhí)行上下文。
執(zhí)行上下文（簡稱：EC）是個(gè)抽象的概念，ECMA-262標(biāo)準(zhǔn)中用它來區(qū)分不同類型的可執(zhí)行代碼。

標(biāo)準(zhǔn)中并沒有從技術(shù)實(shí)現(xiàn)的角度來定義執(zhí)行上下文的具體結(jié)構(gòu)和類型；這是實(shí)現(xiàn)標(biāo)準(zhǔn)的ECMAScript引擎所要考慮的問題。

一系列活動(dòng)的執(zhí)行上下文從邏輯上形成一個(gè)棧。棧底總是全局上下文，棧頂是當(dāng)前（活動(dòng)的）執(zhí)行上下文。當(dāng)在不同的執(zhí)行上下文間切換（退出的而進(jìn)入新的執(zhí)行上下文）的時(shí)候，棧會(huì)被修改（通過壓棧或者退棧的形式）。

可執(zhí)行代碼類型

可執(zhí)行代碼類型和執(zhí)行上下文相關(guān)。有的時(shí)候，當(dāng)提到代碼類型的時(shí)候，其實(shí)就是在說執(zhí)行上下文。

舉個(gè)例子，我們將執(zhí)行上下文的棧以數(shù)組的形式來表示：

ECStask = [ ];

每次控制器進(jìn)入一個(gè)函數(shù)（哪怕該函數(shù)被遞歸調(diào)用或者作為構(gòu)造器），都會(huì)發(fā)生壓棧的操作。內(nèi)置eval函數(shù)工作的時(shí)候也不例外。

全局代碼

這類代碼是在“程序”級(jí)別上被處理的：比如，加載一個(gè)外部的js文件或者內(nèi)聯(lián)的js代碼（被包含在標(biāo)簽內(nèi)）。全局代碼不包含任何函數(shù)體內(nèi)的代碼。

在初始化的時(shí)候（程序開始），ECStack如下所示：

ECStack = [
    globalContext
];

函數(shù)代碼

一旦控制器進(jìn)入函數(shù)代碼（各類函數(shù)），就會(huì)有新的元素會(huì)被壓棧到ECStack。要注意的是：實(shí)體函數(shù)代碼并不包括內(nèi)部函數(shù)的代碼。如下所示，我們調(diào)用一個(gè)函數(shù)，該函數(shù)遞歸調(diào)用自己一次：

(function foo(bar){
    if (bar){

    return;

}

foo(true);
})();

之后，ECStack就被修改成如下所示:

//首先激活foo函數(shù)
ECStack = [
     functionContext
    globalContext
];
//遞歸激活foo函數(shù)
ECStack = [
     functionContext - recursively
     functionContext
    globalContext
];

每次函數(shù)返回，退出當(dāng)前活動(dòng)的執(zhí)行上下文時(shí)，ECStack就會(huì)被執(zhí)行對(duì)應(yīng)的退棧操作——先進(jìn)后出——和傳統(tǒng)的棧實(shí)現(xiàn)一致。同樣的，當(dāng)拋出未捕獲的異常時(shí)，也會(huì)退出一個(gè)或者多個(gè)執(zhí)行上下文，ECStack也會(huì)做相應(yīng)的退棧操作。待這些代碼完成之后，ECStack中就只剩下一個(gè)執(zhí)行上下文（globalContext）——直到整個(gè)程序結(jié)束。

Eval代碼

說到eval代碼就比較有意思了。這里要提到一個(gè)叫做調(diào)用上下文的概念，比如：調(diào)用eval函數(shù)時(shí)候的上下文，就是一個(gè)調(diào)用上下文，eval函數(shù)中執(zhí)行的動(dòng)作（例如：變量聲明或者函數(shù)聲明）會(huì)影響整個(gè)調(diào)用上下文：

eval(‘var x = 10’);
(function foo(){
    eval(‘ var y = 20’);
})();
alert(x); // 10
alert(y); // ”y” is not defined

ECStack會(huì)被修改為：

ECStack = [
    globalContext
];
//eval(‘var x = 10’);
ECStack.push(
    evalContext,
    callingContext: globalContext
);

// eval exited context
ECStack.pop();

//foo function call
ECStack.push( functionContext);

//eval(‘ var y = 20’);
ECStack.push(
    evalContext,
    callingContext:  functionContext
);

//return from eval
ECStack.pop();

//return from foo
ECStack.pop();

在1.7以上版本SpiderMonkey的實(shí)現(xiàn)中（Firefox，Thunderbird瀏覽器內(nèi)置的JS引擎），允許在調(diào)用eval函數(shù)的時(shí)候，將調(diào)用上下文作為第二個(gè)參數(shù)傳遞給eval函數(shù)。因此，如果傳入的調(diào)用上下文存在的話，就有可能會(huì)影響該上下文中原有的私有變量（在該上下文中聲明的變量）：

function foo(){
    var x = 1;
    return function() { alert(x); }
};

var bar = foo();

bar(); // 1
eval(‘x = 2’, bar); //傳遞上下文，影響了內(nèi)部變量“var x”
bar(); // 2

總結(jié)

這些基本理論對(duì)于后面執(zhí)行上下文相關(guān)的細(xì)節(jié)（諸如變量對(duì)象、作用域鏈等等）分析是非常必要的。

擴(kuò)展閱讀

ECMA-363-3標(biāo)準(zhǔn)文檔的對(duì)應(yīng)的章節(jié)—— 10. 執(zhí)行上下文

via 前端翻譯小站
趙靜（goddyzhao）譯自 Dmitry A.Soshnikov的文章Execution Context