javascript执行上下文、变量对象实例分析


Posted in Javascript onApril 25, 2020

本文实例讲述了javascript执行上下文、变量对象。分享给大家供大家参考,具体如下:

突然看到一篇远在2010年的老文,作者以章节的形式向我们介绍了ECMA-262-3的部分内容,主要涉及到执行上下文、变量对象、作用域、this等语言细节。内容短小而精悍,文风直白而严谨,读完有酣畅淋漓、醍醐灌顶之感,强烈推荐!!!

原文链接:这里

本想翻译成文,原来早已有人做了,这里。真生不逢时,何其遗憾啊!

做个笔记,聊慰我心。

执行上下文 ExecutionContext

每当控制器(control)转换到ECMAScript可执行代码时,都会创建并进入到一个可执行上下文。

一段简短的句子,却包含着丰富的内容:

  • 控制器:即js引擎
  • 转换:从一段可执行代码跳转到另一段可执行代码
  • 可执行代码:全局代码、函数代码、eval代码(分别对应三种作用域)
  • 执行上下文:是一个抽象的概念,ECMA-262标准用这个概念同可执行代码(executable code)概念进行区分

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

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

ECStack = [
 globalContext,
 <foo> functionContext
]

变量对象 VariableObject

变量对象(VO)作为执行上下文的一个属性存在,它存储下列内容:

  • 所有变量声明 (var, VariableDeclaration)
    • VO的一个属性,这个属性由变量名称和undefined值组成;如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。
  • 函数声明 (FunctionDeclaration, 缩写为FD)
    • VO的一个属性,这个属性由一个函数对象(function-object)的名称和值组成;如果变量对象已经存在相同名称的属性,则完全替换这个属性。
  • 以及函数的形参
    • VO的一个属性,这个属性由一个形式参数的名称和值组成;如果没有对应传递实际参数,那么这个属性就由形式参数的名称和undefined值组成;
VO = {
  // context data (var, FD, function arguments)
 }

当我们声明一个变量或一个函数的时候,同时还用变量的名称和值在VO里创建了一个新的属性。
例如:

var m = 30;
function test(a,b) {
 var c = 20
 function d() {}
 var e = function _e() {};
}
test(10)

当进入“test”函数的上下文时(传递参数10),AO如下:

AO(test) = {
 a: 10,
 b: undefined,
 c: undefined,
 d: <reference to FunctionDeclaration "d">
 e: undefined
};

test执行到最后时,对应此刻上下文堆栈:

ECStack = [
 globalContext: {
  VO: {
   m: 30,
   test: 
  }
 },
 test functionContext: {
  VO: {
   a: 10,
   b: undefined,
   c: 20,
   d: <reference to FunctionDeclaration "d">,
   e: <reference to FunctionDeclaration "_e">
  }
 }
]

关于变量

通常,各类文章和JavaScript相关的书籍都声称:“不管是使用var关键字(在全局上下文)还是不使用var关键字(在任何地方),都可以声明一个变量”。请记住,这绝对是谣传:任何时候,变量只能通过使用var关键字才能声明。

让我们通过下面的实例看看具体的区别吧:

alert(a); // undefined
alert(b); // "b" is not defined
 
b = 10;
var a = 20;

所有根源仍然是VO和它的修改阶段(进入上下文阶段和执行代码阶段):

VO = {
 a: undefined
};

我们可以看到,因为“b”不是一个变量,所以在这个阶段根本就没有“b”,“b”将只在执行代码阶段才会出现(但是在我们这个例子里,还没有到那就已经出错了)。

让我们改变一下例子代码:

alert(a); // undefined, we know why
 
b = 10;
alert(b); // 10, created at code execution
 
var a = 20;
alert(a); // 20, modified at code execution

关于变量,还有一个重要的知识点。变量相对于简单属性来说,变量有一个特性(attribute):{DontDelete},这个特性的含义就是不同通过delete操作符直接删除变量属性。

a = 10;
alert(window.a); // 10
 
alert(delete a); // true
 
alert(window.a); // undefined
 
var b = 20;
alert(window.b); // 20
 
alert(delete b); // false
 
alert(window.b); // still 20

2018-8-2-再看执行上下文、变量对象

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

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

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

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
package.json中homepage属性的作用详解
Mar 11 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 #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
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
2013/07/07 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
python开发之文件操作用法实例
2015/11/13 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
房屋买卖协议书
2014/04/10 职场文书
市场营销专业求职信
2014/06/17 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
思想工作总结范文
2015/08/12 职场文书