简单了解JavaScript中的执行上下文和堆栈


Posted in Javascript onJune 24, 2019

什么是执行上下文?

JavaScript的执行环境非常重要,当JavaScript代码在行时,会被预处理为以下情况之一:

  • Global code - 首次执行代码的默认环境。
  • Function code - 每当执行流程进入函数体时。
  • Eval code - 要在eval函数内执行的文本。

你可以阅读大量涉及作用域的在线资料,不过为了使事情更容易理解,让我们将术语“执行上下文”视为当前代码的运行环境或作用域。接下来让我们看一个包含global和function / local上下文的代码示例。

简单了解JavaScript中的执行上下文和堆栈

这里没有什么特别之处,我们有一个由紫色边框表示的全局上下文,和由绿色,蓝色和橙色边框表示的3个不同的函数上下文。 只能有1个全局上下文,可以从程序中的任何其他上下文访问。

你可以拥有任意数量的函数上下文,并且每个函数调用都会创建一个新的上下文,从而创建一个私有作用域,其中无法从当前函数作用域外直接访问函数内部声明的任何内容。 在上面的示例中,函数可以访问在其当前上下文之外声明的变量,但外部上下文无法访问在其中声明的变量或函数。 为什么会这样呢? 这段代码究竟是如何处理的?

Execution Context Stack(执行上下文堆栈)

浏览器中的JavaScript解释器被实现为单个线程。 实际上这意味着在浏览器中一次只能做一件事,其他动作或事件在所谓的执行堆栈中排队。 下图是单线程堆栈的抽象视图:

简单了解JavaScript中的执行上下文和堆栈

我们已经知道,当浏览器首次加载脚本时,它默认进入全局上下文执行。 如果在全局代码中调用函数,程序的顺序流进入被调用的函数,创建新的执行上下文并将其推送到执行堆栈的顶部。

如果在当前函数中调用另一个函数,则会发生同样的事情。 代码的执行流程进入内部函数,该函数创建一个新的执行上下文,该上下文被推送到现有堆栈的顶部。 浏览器将始终执行位于堆栈顶部的当前执行上下文,并且一旦函数执行完当前执行上下文后,它将从栈顶部弹出,把控制权返回到当前栈中的下一个上下文。 下面的示例显示了递归函数和程序的执行堆栈:

(function foo(i) {
if (i === 3) {
return;
}
else {
foo(++i);
}
}(0));

简单了解JavaScript中的执行上下文和堆栈

代码简单地调用自身3次,并将i的值递增1。每次调用函数foo时,都会创建一个新的执行上下文。 一旦上下文完成执行,它就会弹出堆栈并且讲控制返回到它下面的上下文,直到再次达到全局上下文。
关于执行堆栈execution stack有5个关键要点:

  • 单线程。
  • 同步执行。
  • 一个全局上下文。
  • 任意多个函数上下文。
  • 每个函数调用都会创建一个新的执行上下文execution context,甚至是对自身的调用。

执行上下文的细节

所以我们现在知道每次调用一个函数时,都会创建一个新的执行上下文。 但是,在JavaScript解释器中,对执行上下文的每次调用都有两个阶段:

1.创建阶段 [调用函数时,但在执行任何代码之前]:

  • 创建作用域链。
  • 创建变量,函数和参数。
  • 确定“this”的值。

2.激活/代码执行阶段:

  • 分配值,引用函数和解释/执行代码。

可以将每个执行上下文在概念上表示为具有3个属性的对象:

executionContextObj = {
'scopeChain': { /* variableObject + 所有父执行上下文的variableObject */ },
'variableObject': { /* 函数实参/形参,内部变量和函数声明 */ },
'this': {}
}

激活对象/变量对象 [AO/VO]

在调用该函数,并且在实际执行函数之前,会创建这个executionContextObj。 这被称为第1阶段,即创造阶段。 这时解释器通过扫描函数传递的实参或形参、本地函数声明和局部变量声明来创建executionContextObj。 此扫描的结果将成为executionContextObj中的variableObject。

以下是解释器如何预处理代码的伪代码概述:

1.找一些代码来调用一个函数。

2.在执行功能代码之前,创建执行上下文。

3.进入创建阶段:

  • 初始化作用域链。
  • 创建variable object:
    • 创建arguments object,检查参数的上下文,初始化名称和值并创建引用副本。
    • 扫描上下文以获取函数声明:
      • 对于找到的每个函数,在variable object中创建一个属性,该属性是函数的确切名称,该属性存在指向内存中函数的引用指针。
      • 如果函数名已存在,则将覆盖引用指针值。
    • 扫描上下文以获取变量声明:
      • 对于找到的每个变量声明,在variable object中创建一个属性作为变量名称,并将该值初始化为undefined。
      • 如果变量名称已存在于variable object中,则不执行任何操作并继续扫描。
  • 确定上下文中“this”的值。

4.激活/执行阶段:

  • 在上下文中运行/解释函数代码,并在代码逐行执行时分配变量值。

我们来看一个例子:

function foo(i) {
var a = 'hello';
var b = function privateB() {
};
function c() {
}
}
foo(22);

在调用foo(22)时,创建阶段如下所示:

fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: undefined,
b: undefined
},
this: { ... }
}

如你所见,创建阶段处理定义属性的名称,而不是为它们赋值,但正式的形参/实参除外。创建阶段完成后,执行流程进入函数,激活/代码执行阶段在函数执行完毕后如下所示:

fooExecutionContext = {
scopeChain: { ... },
variableObject: {
arguments: {
0: 22,
length: 1
},
i: 22,
c: pointer to function c()
a: 'hello',
b: pointer to function privateB()
},
this: { ... }
}

关于hoisting

你可以找到许多使用JavaScript定义术语hoisting的在线资源,解释变量和函数声明被hoisting到其函数范围的顶部。 但是没有人能够详细解释为什么会发生这种情况,掌握了关于解释器如何创建激活对象的新知识,很容易理解为什么。 请看下面的代码示例:

(function() {
console.log(typeof foo); // function pointer
console.log(typeof bar); // undefined
var foo = 'hello',
bar = function() {
return 'world';
};
function foo() {
return 'hello';
}
}());

我们现在可以回答的问题是:

  • 为什么我们可以在声明foo之前就能访问?
    • 如果我们理解了创建阶段,就知道在激活/代码执行阶段之前已经创建了变量。因此,当函数流开始执行时,已经在激活对象中定义了foo。
  • Foo被声明两次,为什么foo显示为function而不是undefined或string?
    • 即使foo被声明两次,我们通过创建阶段知道函数在变量之前就被创建在激活对象上了,而且如果激活对象上已经存在了属性名称,我们只是绕过了声明这一步骤。
    • 因此,首先在激活对象上创建对函数foo()的引用,并且当解释器到达var foo时,我们已经看到属性名称foo存在,因此代码不执行任何操作并继续处理。
  • 为什么bar未定义?
    • bar实际上是一个具有函数赋值的变量,我们知道变量是在创建阶段被创建的,但它们是使用undefined值初始化的。

总结

希望到这里你已经能够很好地掌握了JavaScript解释器如何预处理你的代码。 理解执行上下文和堆栈可以让你了解背后的原因:为什么代码预处理后的值和你预期的不一样。

你认为学习解释器的内部工作原理是多此一举还是非常必要的呢? 了解执行上下文阶段是否能够帮你你写出更好的JavaScript呢?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 #Javascript
通过循环优化 JavaScript 程序
Jun 24 #Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 #Javascript
node中实现删除目录的几种方法
Jun 24 #Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 #Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 #Javascript
浅谈一个webpack构建速度优化误区
Jun 24 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP 中dirname(_file_)讲解
2007/03/18 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascript读取RSS数据
2007/01/20 Javascript
JavaScript 继承详解(一)
2009/07/13 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
详解package.json版本号规则
2019/08/01 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python输入二维数组方法
2018/04/13 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
python 实现客户端与服务端的通信
2020/12/23 Python
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
什么是Web Service?
2012/07/25 面试题
自我鉴定思想方面
2013/10/07 职场文书
给学校建议书范文
2014/05/13 职场文书