深入理解JavaScript內部原理（1）： 執行內容

說明

本文是翻譯Dmitry Soshnikov 的文章 Execution Contexts.

文章地址：http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/

概要 

在這篇文章中，我們將向大家介紹ECMAscript的可執行內容以及相關的可執行內容的類型

定義

每當控制器進入ECMAscript可執行代碼的時候，控制器就進入了一個可執行內容。可執行內容（簡稱EC）是一個抽象的概念，在ECMA262中用他來區分不同類型的可執行代碼

標準規範中並沒有從技術實現的角度來定義執行內容的具體結構和類型；這是實現標準的ECMAScript引擎所要考慮的問題。

在邏輯上，活動的可執行內容組成了一個堆棧，在堆棧的底部是一個全域的可執行內容，頂部是當前可執行檔上下文。各種不同類型的可執行內容在進入或者離開堆棧的時候修改堆棧。

可執行上代碼的類型

可執行內容的類型和可執行代碼是相關的。有的時候，提到可執行代碼的類型的時候，就是表示可執行內容。

例如：我們定義一個可執行內容的堆棧用數組表示

ECStack = [];

每次控制器進入一個函數（即使該函數作為遞迴調用或者作為構造器），都會發生壓棧的操作。內建的eval 函數工作的時候也是如此。

全域代碼

這類代碼是在程式層級上被處理的。例如:載入外部的js檔案以及內聯的js代碼（被包含在script標籤裡面的） 全域代碼是不包括任何函數內的代碼。

在初始化的時候（程式開始），ECstack如下所示：

ECStack = [
  globalContext
];

函數代碼

一旦控制器進入函數代碼，ECstack 被壓入了新的元素。要注意的是：實體函數代碼不包含任何內建函式代碼。

如所示：我們調用函數，該函數遞迴調用自己一次。

(function foo(flag) {
  if (flag) {
    return;
  }
  foo(true);
})(false);

之後ECstack被修改成下面這樣

// first activation of foo
ECStack = [
  <foo> functionContext
  globalContext
];

// recursive activation of foo
ECStack = [
  <foo> functionContext – recursively
  <foo> functionContext
  globalContext
];

每次函數返回，退出當前活動的執行內容時，ECStack就會被執行對應的退棧操作——先進後出——和傳統的棧實現一致。同樣的，當拋出未捕獲的異常時，也會退出一個或者多個執行內容，ECStack也會做相應的退棧操作。待這些程式碼完成之後，ECStack中就只剩下一個執行內容（globalContext）——直到整個程式結束。 

Eval代碼 

說到eval代碼就比較有意思了。這裡要提到一個叫做調用內容相關的概念，比如：調用eval函數時候的上下文，就是一個調用上下文，eval函數中執行的動作（例如：變數聲明或者函式宣告）會影響整個調用上下文：

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 contextECStack.pop();//foo function callECStack.push( functionContext);//eval(‘ var y = 20’);ECStack.push(    evalContext,    callingContext:  functionContext);//return from evalECStack.pop();//return from fooECStack.pop();

在1.7以上版本SpiderMonkey的實現中（Firefox，Thunderbird瀏覽器內建的JS引擎），允許在調用eval函數的時候，將調用上下文作為第二個參數傳遞給eval函數。因此，如果傳入的調用上下文存在的話，就有可能會影響該上下文中原有的私人變數（在該上下文中聲明的變數）：

function foo(){    var x = 1;    return function() { alert(x); }};var bar = foo();bar(); // 1eval(‘x = 2’, bar); //傳遞上下文，影響了內部變數“var x”bar(); // 2

總結

這些基本理論對於後面執行內容相關的細節（諸如變數對象、範圍鏈等等）分析是非常必要的。

擴充閱讀

ECMA-363-3標準文檔的對應的章節—— 10. 執行內容