深入理解JavaScript执行上下文（Execution Contexts）

执行上下文概述

概述

自本章起，我将持续（翻译、转载、整理）http://dmitrysoshnikov.com/网站关于ECMAScript标准理解的优质文章。

本章重点阐述ECMAScript标准中的执行上下文（Execution Contexts）及各类可执行代码类型。

原作者：Dmitry A. Soshnikov

原始发布日期: 2009-06-26

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

英文翻译者：Dmitry A. Soshnikov.

发布时间：2010-03-11

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

本文参考了博客园justinw的中文翻译版本，并修正了部分错误，特此感谢译者。

复制代码

执行上下文定义与堆栈机制

定义

每当控制流转向ECMAScript可执行代码时，即进入一个执行上下文。执行上下文（简称EC）是ECMA-262标准中的抽象概念，旨在区分可执行代码（executable code）。

标准规范未从技术实现角度定义EC的确切类型与结构，这属于具体ECMAScript引擎实现时需考虑的问题。

活动的执行上下文在逻辑上构成一个堆栈。堆栈底部始终为全局上下文（global context），顶部为当前（活动的）执行上下文。当EC类型进入或退出上下文时，堆栈会被修改（推入或弹出）。

可执行代码类型与堆栈变化

可执行代码类型

可执行代码类型概念与执行上下文的抽象概念紧密相关。在特定时刻，可执行代码与执行上下文可能完全等价。

例如，我们可以将执行上下文堆栈定义为一个数组：

ECStack = [];

每次进入函数（即使函数被递归调用或作为构造函数使用）或内置eval函数工作时，该堆栈都会被压入新元素。

全局代码

此类代码在“程序”层级处理：例如加载外部js文件或处理本地<script></script>标签内的代码。全局代码不包含任何函数体内的代码。

在初始化（程序启动）阶段，ECStack状态如下：

 
ECStack = [
globalContext
]; 

函数代码

当进入函数代码（所有类型的函数）时，ECStack会被压入新元素。需注意，具体函数代码不包括内部函数（inner functions）代码。如下所示，我们通过函数自调方式递归一次：

 
(function foo(bar) {
if (bar) {
return;
} 
foo(true);
})(); 

那么，ECStack按如下方式改变：

 
// 第一次foo的激活调用
ECStack = [
<foo> functionContext
globalContext
]; 
// foo的递归激活调用
ECStack = [
<foo> functionContext – recursively
<foo> functionContext
globalContext
]; 

每次return时，当前执行上下文退出，相应地ECStack弹出，栈指针自动移动位置，这是典型的堆栈实现方式。若抛出异常且未被捕获，也可能导致从一个或多个执行上下文退出。相关代码执行完毕后，ECStack仅包含全局上下文（global context），直至整个应用程序结束。

Eval代码的调用上下文处理

Eval 代码

eval代码较为特殊，它涉及一个概念：调用上下文（calling context），即eval函数调用时产生的上下文。eval（变量或函数声明）活动会影响调用上下文（calling context）。

 
eval('var x = 10');
(function foo() {
eval('var y = 20');
})(); 
alert(x); // 10
alert(y); // "y" 提示未声明

ECStack的变化过程：

 
ECStack = [
globalContext
]; 
// eval('var x = 10');
ECStack.push(
evalContext,
callingContext: globalContext
); 
// eval退出上下文
ECStack.pop();
// foo函数调用
ECStack.push(<foo> functionContext);
// eval('var y = 20');
ECStack.push(
evalContext,
callingContext: <foo> functionContext
); 
// 从eval返回
ECStack.pop();
// 从foo返回
ECStack.pop();

即一个非常普通的逻辑调用堆栈。

在版本号1.7以上的SpiderMonkey（内置于Firefox, Thunderbird）实现中，可将调用上下文作为第二个参数传递给eval。若该上下文存在，则可能影响“私有”（有人如此称呼）变量。

 
function foo() {
var x = 1;
return function () { alert(x); };
}; 
var bar = foo();
bar(); // 1
eval('x = 2', bar); // 传入上下文，影响了内部的var x 变量
bar(); // 2

总结与后续章节预告

结论

本文是后续分析其他与执行上下文相关主题（例如变量对象、作用域链等）的最基本理论基础，这些主题将在后续章节中展开。

其他参考