深入理解JavaScript系列(11) 执行上下文(Execution Contexts)

 更新时间:2012年01月15日 23:44:23   作者:  
本章我们要讲解的是ECMAScript标准里的执行上下文和相关可执行代码的各种类型
简介
从本章开始,我将陆续(翻译、转载、整理)http://dmitrysoshnikov.com/网站关于ECMAScript标标准理解的好文。

本章我们要讲解的是ECMAScript标准里的执行上下文和相关可执行代码的各种类型。

原始作者: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 = [];
每次进入function (即使function被递归调用或作为构造函数) 的时候或者内置的eval函数工作的时候,这个堆栈都会被压入。

全局代码
这种类型的代码是在"程序"级处理的:例如加载外部的js文件或者本地<script></script>标签内的代码。全局代码不包括任何function体内的代码。

在初始化(程序启动)阶段,ECStack是这样的:
复制代码 代码如下:

ECStack = [
globalContext
];

函数代码
当进入funtion函数代码(所有类型的funtions)的时候,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 代码有点儿意思。它有一个概念: 调用上下文(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 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();

也就是一个非常普通的逻辑调用堆栈。

在版本号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

结论
这篇文章是后面分析其他跟执行上下文相关的主题(例如变量对象,作用域链,等等)的最起码的理论基础,这些主题将在后续章节中讲到。

其他参考

相关文章

  • js去除重复字符串两种实现方法

    js去除重复字符串两种实现方法

    js去除重复字符串在项目开发中很实用,接下来详细介绍实现方法,感兴趣的朋友可以参考下
    2013-01-01
  • javascript动态创建表格及添加数据实例详解

    javascript动态创建表格及添加数据实例详解

    这篇文章主要介绍了javascript动态创建表格及添加数据,以实例形式分析了javascript动态创建表格的常用方法,包括不兼容IE6与兼容IE6的实现方法,非常具有实用价值,需要的朋友可以参考下
    2015-05-05
  • JavaScript制作简单的日历效果

    JavaScript制作简单的日历效果

    这篇文章主要为大家介绍了JavaScript制作简单的日历效果实现代码,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 微信小程序中实现车牌输入功能

    微信小程序中实现车牌输入功能

    我们都知道车牌是有一定规律的,本文实现了微信小程序中实现车牌输入功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 微信小程序实现导航栏选项卡效果

    微信小程序实现导航栏选项卡效果

    这篇文章主要为大家详细介绍了微信小程序实现导航栏选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-02-02
  • Bootstrap开关(switch)控件学习笔记分享

    Bootstrap开关(switch)控件学习笔记分享

    这篇文章主要为大家分享了Bootstrap开关(switch)控件学习笔记,介绍了Bootstrap开关(switch)控件的功能、使用说明,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript扩展运算符的学习及应用详情(ES6)

    JavaScript扩展运算符的学习及应用详情(ES6)

    这篇文章主要介绍了JavaScript扩展运算符的学习及应用详情(ES6),扩展运算符是ES6新增的一种运算符,他可以帮助我们简化代码,简化操作,具体相关知识感兴趣的小伙伴可以查看下面文章的简单介绍
    2022-08-08
  • BootStrapTable服务器分页实例解析

    BootStrapTable服务器分页实例解析

    项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页,需要的朋友可以参考下
    2016-12-12
  • 百度地图去掉marker覆盖物或者去掉maker的label文字方法

    百度地图去掉marker覆盖物或者去掉maker的label文字方法

    下面小编就为大家分享一篇百度地图去掉marker覆盖物或者去掉maker的label文字方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • 微信公众号生成新浪短网址的实现(快速生成)

    微信公众号生成新浪短网址的实现(快速生成)

    这篇文章主要介绍了微信公众号生成新浪短网址的实现(快速生成),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论