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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
vue计算属性get和set用法示例
Feb 08 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创建Cookie数组的详解
2013/07/03 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
HTML5中微数据概述及在搜索引擎中的使用举例
2013/02/07 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
Order by的几种用法
2013/06/16 面试题
国际商务专业学生个人的自我评价
2013/09/28 职场文书
小区消防演习方案
2014/02/21 职场文书
学校清明节活动总结
2014/07/04 职场文书
苏州园林导游词
2015/02/03 职场文书
售房协议书范本
2015/08/11 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers