JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析


Posted in Javascript onApril 25, 2020

本文实例讲述了JavaScript ECMA执行上下文。分享给大家供大家参考,具体如下:

介绍

这篇文章我们主要探讨ECMAScript执行上下文和相关的ECMAScript可执行代码。

定义

每次当控制器转到ECMAScript可执行代码的时候,即会进入到一个执行上下文

执行上下文(简称-EC)是一个抽象概念,ECMA-262标准用这个概念同可执行代码(executable code)概念进行区分。

标准规范没有从技术实现的角度准确定义EC的类型和结构;这应该是具体实现ECMAScript引擎时要考虑的问题。

活动的执行上下文在逻辑上组成一个堆栈。堆栈底部永远都是全局上下文(global context),堆栈顶部是当前(活动的)执行上下文。堆栈在EC类型的变量(various kingds of EC)被推入或弹出的同时被修改。

可执行代码

可执行代码的概念与抽象的执行上下文的概念是相对的。在某些时刻,可执行代码与执行上下文是等价的。

例如,我们可以定义一个数组来模拟执行上下文堆栈:

ECStack = [];

每次进入函数 (即使函数被递归调用或作为构造函数) 的时候或者内置的eval函数工作的时候,这个堆栈都会被推入。

全局代码

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

在初始化(程序启动)阶段,ECStack是这样的:

ECStack = [
 globalContext
];

函数代码

当进入函数代码(所有类型的函数),ECStack被推入新元素。要注意的是,具体的函数代码不包括内部函数(inner functions)代码。如下所示,我们使函数自己调自己的方式递归一次:

(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
];

每次返回存在的当前执行上下文和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" 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();

看到了吧,这是一个非常普通的逻辑调用堆栈

在版本号1.7以上的SpiderMonkey(内置于Firefox,Thunderbird)的实现中,可以把调用上下文作为第二个参数传递给eval。那么,如果这个上下文存在,就有可能影响“私有”(类似以private关键字命名的变量一样)变量。

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

结论

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

其他参考

这篇文章的内容在ECMA-262-3 标准规范中对应的章节.

英文地址 : ECMA-262-3 in detail. Chapter 1. Execution Contexts

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
js实现自定义进度条效果
Mar 15 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
js实现移动端轮播图
Dec 21 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
vue-router的两种模式的区别
May 30 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 #Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 #Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 #Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 #Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
Apr 24 #Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 #Javascript
基于Vue实现微前端的示例代码
Apr 24 #Javascript
You might like
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php 读取文件乱码问题
2010/02/20 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
yii分页组件用法实例分析
2015/12/28 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
如何在PHP中使用数组
2020/06/09 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
Python下singleton模式的实现方法
2014/07/16 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
省级四好少年事迹材料
2014/01/25 职场文书
校运会口号
2014/06/18 职场文书
租房安全协议书
2014/08/20 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Golang解析JSON对象
2022/04/30 Golang