JavaScript ECMA-262-3 深入解析(一):執(zhí)行上下文實例分析
本文實例講述了JavaScript ECMA執(zhí)行上下文。分享給大家供大家參考,具體如下:
介紹
這篇文章我們主要探討ECMAScript執(zhí)行上下文和相關(guān)的ECMAScript可執(zhí)行代碼。
定義
每次當(dāng)控制器轉(zhuǎn)到ECMAScript可執(zhí)行代碼的時候,即會進入到一個執(zhí)行上下文。
執(zhí)行上下文(簡稱-EC)是一個抽象概念,ECMA-262標(biāo)準(zhǔn)用這個概念同可執(zhí)行代碼(executable code)概念進行區(qū)分。
標(biāo)準(zhǔn)規(guī)范沒有從技術(shù)實現(xiàn)的角度準(zhǔn)確定義EC的類型和結(jié)構(gòu);這應(yīng)該是具體實現(xiàn)ECMAScript引擎時要考慮的問題。
活動的執(zhí)行上下文在邏輯上組成一個堆棧。堆棧底部永遠都是全局上下文(global context),堆棧頂部是當(dāng)前(活動的)執(zhí)行上下文。堆棧在EC類型的變量(various kingds of EC)被推入或彈出的同時被修改。
可執(zhí)行代碼
可執(zhí)行代碼的概念與抽象的執(zhí)行上下文的概念是相對的。在某些時刻,可執(zhí)行代碼與執(zhí)行上下文是等價的。
例如,我們可以定義一個數(shù)組來模擬執(zhí)行上下文堆棧:
ECStack = [];
每次進入函數(shù) (即使函數(shù)被遞歸調(diào)用或作為構(gòu)造函數(shù)) 的時候或者內(nèi)置的eval函數(shù)工作的時候,這個堆棧都會被推入。
全局代碼
這種類型的代碼是在"程序"級處理的:例如加載外部的js文件或者本地的在<script></script>標(biāo)簽內(nèi)的代碼。全局代碼不包括任何函數(shù)體內(nèi)的代碼。
在初始化(程序啟動)階段,ECStack是這樣的:
ECStack = [ globalContext ];
函數(shù)代碼
當(dāng)進入函數(shù)代碼(所有類型的函數(shù)),ECStack被推入新元素。要注意的是,具體的函數(shù)代碼不包括內(nèi)部函數(shù)(inner functions)代碼。如下所示,我們使函數(shù)自己調(diào)自己的方式遞歸一次:
(function foo(bar) {
if (bar) {
return;
}
foo(true);
})();
那么,ECStack以如下方式被改變:
// first activation of foo ECStack = [ <foo> functionContext globalContext ]; // recursive activation of foo ECStack = [ <foo> functionContext – recursively <foo> functionContext globalContext ];
每次返回存在的當(dāng)前執(zhí)行上下文和ECStack彈出相應(yīng)的執(zhí)行上下文的時候,棧指針會自動移動位置,這是一個典型的堆棧實現(xiàn)方式。一個被拋出但是沒有被截獲的異常,同樣存在一個或多個執(zhí)行上下文。當(dāng)相關(guān)段代碼執(zhí)行完以后,直到整個應(yīng)用程序結(jié)束,ECStack都只包括全局上下文(global context)。
Eval 代碼
eval 代碼有點兒意思。它有一個概念: 調(diào)用上下文(calling context), 這是一個當(dāng)eval函數(shù)被調(diào)用的時候產(chǎn)生的上下文。eval(變量或函數(shù)聲明)活動會影響調(diào)用上下文(calling context)。
eval('var x = 10');
(function foo() {
eval('var y = 20');
})();
alert(x); // 10
alert(y); // "y" is not defined
ECStack的變化過程:
ECStack = [
globalContext
];
// eval('var x = 10');
ECStack.push(
evalContext,
callingContext: globalContext
);
// eval exited context
ECStack.pop();
// foo funciton call
ECStack.push(<foo> functionContext);
// eval('var y = 20');
ECStack.push(
evalContext,
callingContext: <foo> functionContext
);
// return from eval
ECStack.pop();
// return from foo
ECStack.pop();
看到了吧,這是一個非常普通的邏輯調(diào)用堆棧
在版本號1.7以上的SpiderMonkey(內(nèi)置于Firefox,Thunderbird)的實現(xiàn)中,可以把調(diào)用上下文作為第二個參數(shù)傳遞給eval。那么,如果這個上下文存在,就有可能影響“私有”(類似以private關(guān)鍵字命名的變量一樣)變量。
function foo() {
var x = 1;
return function () { alert(x); };
};
var bar = foo();
bar(); // 1
eval('x = 2', bar); // pass context, influence on internal var "x"
bar(); // 2
結(jié)論
這篇文章的內(nèi)容是未來分析其他跟執(zhí)行上下文相關(guān)的主題(例如變量對象,作用域鏈,等等)的最起碼的理論基礎(chǔ),這些主題將在后續(xù)章節(jié)中講到。
其他參考
這篇文章的內(nèi)容在ECMA-262-3 標(biāo)準(zhǔn)規(guī)范中對應(yīng)的章節(jié).
英文地址 : ECMA-262-3 in detail. Chapter 1. Execution Contexts
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
ES6的函數(shù)rest參數(shù)使用小結(jié)
這篇文章主要介紹了ES6的函數(shù)rest參數(shù)用法,通過一個rest參數(shù)代替arguments變量的例子,對ES6?rest參數(shù)用法講解的非常詳細,需要的朋友可以參考下2023-08-08
webpack3里使用uglifyjs壓縮js時打包報錯的解決
這篇文章主要介紹了webpack3里使用uglifyjs壓縮js時打包報錯的解決,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
js動態(tài)設(shè)置select下拉菜單的默認選中項實例
今天小編就為大家分享一篇js動態(tài)設(shè)置select下拉菜單的默認選中項實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript ECMA-262-3 深入解析(一):執(zhí)行上下文實例分析
這篇文章主要介紹了JavaScript ECMA-262-3 執(zhí)行上下文,結(jié)合實例形式詳細分析JavaScript ECMA執(zhí)行上下文相關(guān)概念、原理與操作注意事項,需要的朋友可以參考下2020-04-04

