【进阶1-2期】JavaScript深入之执行上下文栈和变量对象
栏目: JavaScript · 发布时间: 5年前
内容简介:本期的主题是如果觉得本系列不错,欢迎点赞、评论、转发,您的支持就是我坚持的最大动力。JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。
本期的主题是 调用堆栈 ,本计划一共28期, 每期重点攻克一个面试重难点 ,如果你还不了解本进阶计划,文末点击查看全部文章。
如果觉得本系列不错,欢迎点赞、评论、转发,您的支持就是我坚持的最大动力。
JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段。
翠花,上代码
例子一:变量提升
foo; // undefined var foo = function () { console.log('foo1'); } foo(); // foo1,foo赋值 var foo = function () { console.log('foo2'); } foo(); // foo2,foo重新赋值 复制代码
例子二:函数提升
foo(); // foo2 function foo() { console.log('foo1'); } foo(); // foo2 function foo() { console.log('foo2'); } foo(); // foo2 复制代码
例子三:声明优先级, 函数 > 变量
foo(); // foo2 var foo = function() { console.log('foo1'); } foo(); // foo1,foo重新赋值 function foo() { console.log('foo2'); } foo(); // foo1 复制代码
上面三个例子中,第一个例子是变量提升,第二个例子是函数提升,第三个例子是函数声明优先级高于变量声明。
需要注意的是同一作用域下存在多个同名函数声明,后面的会替换前面的函数声明。
执行上下文
执行上下文总共有三种类型
- 全局执行上下文 :只有一个,浏览器中的全局对象就是 window 对象,
this
指向这个全局对象。 - 函数执行上下文 :存在无数个,只有在函数被调用的时候才会被创建,每次调用函数都会创建一个新的执行上下文。
- Eval 函数执行上下文 : 指的是运行在
eval
函数中的代码,很少用而且不建议使用。
这部分内容在【进阶1-1期】中详细介绍了,点击查看 【进阶1-1期】理解JavaScript 中的执行上下文和执行栈
执行上下文栈
因为JS引擎创建了很多的执行上下文,所以JS引擎创建了执行上下文 栈 (Execution context stack,ECS)来 管理 执行上下文。
当 JavaScript 初始化的时候会向执行上下文栈压入一个 全局 执行上下文,我们用 globalContext 表示它,并且只有当整个应用程序结束的时候,执行栈才会被清空,所以程序结束之前, 执行栈最底部永远有个 globalContext。
ECStack = [ // 使用数组模拟栈 globalContext ]; 复制代码
具体执行过程如下图所示,这部分内容在【进阶1-1期】中详细介绍了,点击查看 【进阶1-1期】理解JavaScript 中的执行上下文和执行栈
找不同
有如下两段代码,执行的结果是一样的,但是两段代码究竟有什么不同?
var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope(); 复制代码
var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f; } checkscope()(); 复制代码
答案是 执行上下文栈的变化不一样。
第一段代码:
ECStack.push(<checkscope> functionContext); ECStack.push(<f> functionContext); ECStack.pop(); ECStack.pop(); 复制代码
第二段代码:
ECStack.push(<checkscope> functionContext); ECStack.pop(); ECStack.push(<f> functionContext); ECStack.pop(); 复制代码
函数上下文
在函数上下文中,用活动对象(activation object, AO )来表示变量对象。
活动对象和变量对象的区别在于
- 1、变量对象( VO )是规范上或者是JS引擎上实现的,并不能在JS环境中直接访问。
- 2、当进入到一个执行上下文后,这个变量对象才会被 激活 ,所以叫活动对象( AO ),这时候活动对象上的各种属性才能被访问。
调用函数时,会为其创建一个 Arguments对象 ,并自动初始化局部变量arguments,指代该Arguments对象。所有作为参数传入的值都会成为Arguments对象的数组元素。
执行过程
执行上下文的代码会分成两个阶段进行处理
-
1、 进入 执行上下文
-
2、代码执行
进入执行上下文
很明显,这个时候还没有执行代码
此时的变量对象会包括(如下顺序初始化):
- 1、函数的所有形参 (only函数上下文):没有实参,属性值设为undefined。
- 2、函数声明:如果变量对象已经存在相同名称的属性,则完全 替换 这个属性。
- 3、变量声明:如果变量名称跟已经声明的形参或函数相同,则变量声明 不会干扰 已经存在的这类属性。
上代码就直观了
function foo(a) { var b = 2; function c() {} var d = function() {}; b = 3; } foo(1); 复制代码
对于上面的代码,这个时候的AO是
AO = { arguments: { 0: 1, length: 1 }, a: 1, b: undefined, c: reference to function c(){}, d: undefined } 复制代码
形参arguments这时候已经有赋值了,但是变量还是undefined,只是初始化的值
代码执行
这个阶段会顺序执行代码,修改变量对象的值,执行完成后AO如下
AO = { arguments: { 0: 1, length: 1 }, a: 1, b: 3, c: reference to function c(){}, d: reference to FunctionExpression "d" } 复制代码
总结如下:
-
1、全局上下文的变量对象初始化是全局对象
-
2、函数上下文的变量对象初始化只包括 Arguments 对象
-
3、在进入执行上下文时会给变量对象 添加形参、函数声明、变量声明 等初始的属性值
-
4、在代码执行阶段,会再次修改变量对象的属性值
参考
进阶系列目录
- 【进阶1期】 调用堆栈
- 【进阶2期】 作用域闭包
- 【进阶3期】 this全面解析
- 【进阶4期】 深浅拷贝原理
- 【进阶5期】 原型Prototype
- 【进阶6期】 高阶函数
- 【进阶7期】 事件机制
- 【进阶8期】 Event Loop原理
- 【进阶9期】 Promise原理
- 【进阶10期】Async/Await原理
- 【进阶11期】防抖/节流原理
- 【进阶12期】模块化详解
- 【进阶13期】ES6重难点
- 【进阶14期】计算机网络概述
- 【进阶15期】浏览器渲染原理
- 【进阶16期】webpack配置
- 【进阶17期】webpack原理
- 【进阶18期】前端监控
- 【进阶19期】跨域和安全
- 【进阶20期】性能优化
- 【进阶21期】VirtualDom原理
- 【进阶22期】Diff算法
- 【进阶23期】MVVM双向绑定
- 【进阶24期】Vuex原理
- 【进阶25期】Redux原理
- 【进阶26期】路由原理
- 【进阶27期】VueRouter源码解析
- 【进阶28期】ReactRouter源码解析
交流
进阶系列文章汇总: github.com/yygmind/blo… ,内有优质前端资料,觉得不错点个star。
我是木易杨,网易高级前端工程师,跟着我 每周重点攻克一个前端面试重难点 。接下来让我带你走进高级前端的世界,在进阶的路上,共勉!
以上所述就是小编给大家介绍的《【进阶1-2期】JavaScript深入之执行上下文栈和变量对象》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 前端进击的巨人(一):执行上下文与执行栈,变量对象
- [译]JavaScript 终极指南之执行上下文、变量提升、作用域和闭包
- DDD:识别限界上下文以及理解上下文映射
- DDD:识别限界上下文以及理解上下文映射
- 如何划分限界上下文
- 详解Flask上下文
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
程序员2010精华本
程序员杂志社 / 电子工业 / 2011-1 / 49.00元
《程序员(2010精华本)》主要内容:《程序员》创刊10年来,每年末编辑部精心打造的“合订本”已经形成一个品牌,得到广大读者的认可和喜爱。今年,《程序员》杂志内容再次进行了优化整合,除了每期推出的一个大型专题策划,各版块也纷纷以专题、策划的形式,将每月的重点进行了整合,让内容非常具有凝聚力,如专题篇、人物篇、实践篇等。另外杂志的版式、色彩方面也有了很大的飞跃,给读者带来耳目一新的阅读体验。一起来看看 《程序员2010精华本》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
CSS 压缩/解压工具
在线压缩/解压 CSS 代码