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 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
vue+element实现表单校验功能
May 20 Javascript
vue v-on:click传递动态参数的步骤
Sep 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
PHP循环获取GET和POST值的代码
2008/04/09 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
vue使用axios实现文件上传进度的实时更新详解
2017/12/20 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python多线程抓取天涯帖子内容示例
2014/04/03 Python
用Python进行基础的函数式编程的教程
2015/03/31 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
python脚本框架webpy模板控制结构
2021/11/20 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS