简单了解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 实现对象 匀速/变速运动的方法
May 08 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
js数组去重的hash方法
Dec 22 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
JavaScript实现音乐播放器
Aug 14 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
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python中常见错误及解决方法
2020/06/21 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
社区学习十八大感想
2014/01/22 职场文书
中学教师自我鉴定
2014/02/07 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
员工离职通知函
2015/04/25 职场文书
教师调动申请报告
2015/05/18 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
中秋晚会致辞
2015/07/31 职场文书
优秀员工演讲稿
2019/06/21 职场文书
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS