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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
详解vue 组件
Jun 11 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
jQuery each()小议
2010/03/18 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
layui 监听select选择 获取当前select的ID名称方法
2019/09/24 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python实现邮件的批量发送的示例代码
2018/01/23 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
美工的岗位职责
2013/11/14 职场文书
行政专员工作职责
2013/12/22 职场文书
社会实践活动总结范文
2014/07/03 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS