详释JavaScript执行环境与执行栈


Posted in Javascript onApril 02, 2019

执行环境

执行环境 ( 也称"执行上下文" ) 可以说是 JavaScript 最重要的一个概念。那么执行环境到底是什么呢?一句话就可以概括:代码 ( 包括函数 ) 执行时所需要的所有信息就是执行环境。由于 ES 历经多个版本,所以执行环境的标准也一直在变,下面列出了三个主要的版本内容:

ES3 标准中的执行环境

  • scope:作用域,如果有作用域嵌套的情况就称作"作用域链"。
  • variable object:变量对象,用于存储标识符的特殊对象。
  • this value:this 值。

*标识符:包括变量、函数名、属性名和函数的参数。

ES5 标准中的执行环境

  • variable environment:变量环境,当声明变量时使用。
  • lexical environment:词法环境,当获取标识符值时使用。
  • this value:this 值。

ES6 标准中的执行环境

  • variable environment:变量环境,当声明变量时使用。
  • lexical environment:词法环境,当获取标识符值或者 this 值时使用。

*在 ES6 中,执行环境中实际增加了不少内容,我们这里只介绍了普通函数执行时所需要的内容。

执行栈

当打开网页或浏览器时,宿主环境(1)会将代码传递给引擎(2)去执行,引擎首先会创建一个全局执行环境。全局环境中的代码自上而下有顺序的执行,当遇到一个函数时,函数的环境被创建,函数中的代码开始执行;而在函数执行之后,控制权又返还给之前的环境。ES 这种类似于" 栈 "(3)的控制机制,称为执行栈。

(1) 宿主环境:浏览器或者 Node 环境。
(2) 引擎:从头到尾负责整个 JavaScript 代码的编译及执行过程。
(3) 栈:一种遵循" 后进先出 "原则的有序数据集合,可以简单理解为使用 push() 和 pop() 操作数组。

例子:

console.log(1);

function pFn() {
 console.log(2);
 (function cFn() {
 console.log(3);
 }());
 console.log(4);
}
pFn();

console.log(5);
//输出:1 2 3 4 5

示意图:

详释JavaScript执行环境与执行栈

我们可以通过浏览器,直观的看一下执行栈的形式:

详释JavaScript执行环境与执行栈

编译原理

我们知道,执行环境中有很多非常有用的" 工具 “,这些” 工具 “会协助引擎完成整个函数的执行工作。例如,ES3 标准中的作用域,它会协助引擎查找当前环境中所有标识符的定义的位置;变量对象,帮助引擎保存环境中的变量和函数。当然,这些工作大部分情况下发生在代码执行前的几微秒之内,称之为” 编译阶段 "。JavaScript 的整个编译阶段比较复杂,一般会经历词法分析、语法分析、代码生成、性能优化等步骤,这里不做深入讨论。

下面我们举例说明,看看当函数 fn 执行的时候,引擎是如何工作的:

var b=1;
function fn(){
 var a = 1;
 return a+b;
}
fn();

1、首先,遇到 var a,引擎会询问作用域是否已经有一个该名称的变量存在于同一个作用域中。如果存在,引擎会忽略该声明,继续进行编译;很显然不存在,所以引擎会在当前作用域中声明一个新的变量,并命名为 a ( 此时还没有赋值,默认为 undefined )。

2、第二步,又遇到 a,引擎会首先询问作用域,在当前的作用域中是否存在一个叫作 a 的变量,很显然存在,所以引擎就会使用这个变量;遇到 b,引擎对作用域做出同样的询问,很显然不存在,所以引擎会到外层嵌套的作用域中继续查找,在全局作用域找到了该变量,引擎就会将 1 赋值给变量 b 。

3、经过以上两步,函数 fn 环境中出现的所有标识符的值已经基本锁定,那么引擎就会立即自上而下开始执行代码。为变量 a 赋值 1,计算 1+1 的值并返回它。

4、最后一步,函数 fn 的环境销毁,退出执行栈,将控制权返还给全局环境。

变量提升的原因

在编译阶段,引擎会声明变量和函数,但不会对变量进行赋值,这主要是出于对性能的考虑。变量被声明,但是不一定会在后面使用到,如果没有使用却赋了值,只是白白浪费内存而已。上面例子中的全局变量 b ,在函数 fn 没有执行之前,也不会赋值,直到函数中使用了这个变量,才不得不去加载数字 1。简单的说,var a 这段代码发生在编译阶段,而 =1 这段代码会根据实际情况,发生在执行阶段,这也就是" 变量提升 "的原因。另外需要注意的是,函数声明的是整个函数体( 因为函数声明不存在赋值操作),而且优先级高于同名的变量。

例子1:

console.log(fn()); //输出:1
console.log(n); //输出:undefined

function fn() {
 return 1;
}
var n = 2;

由于声明发生在赋值的前面,上面例子1的代码可以理解为下面的形式:

function fn() {
 return 1;
}
var n;

console.log(fn()); //输出:1
console.log(n); //输出:undefined

n = 2;

由于函数声明优先级高,因此同名变量声明会被忽略,上面例子2的代码可以理解为下面的形式:

function fn() {
 console.log(1);
}

//由于函数声明优先级高,因此这个变量声明会被忽略
//var fn;

fn(); //输出:1

fn = function() {
 console.log(2);
}

*变量提升并非物理意义上的顺序改变,代码执行的顺序还是按照你书写代码时的顺序在执行。只是由于,变量声明发生在代码的编译阶段,而变量赋值却发生在代码的执行阶段,时间上的差异导致了这种现象。

运行时流程图

综合以上的内容,JavaScript 的运行时流程图如下:

详释JavaScript执行环境与执行栈

Javascript 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
vue实现图片上传到后台
Jun 29 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 #Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 #Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 #Javascript
Seajs源码详解分析
Apr 02 #Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 #Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 #Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 #Javascript
You might like
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python 日期与时间转换的方法
2020/08/01 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
社区中秋节活动方案
2014/01/29 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
干部考核评语
2014/04/29 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
opencv读取视频并保存图像的方法
2021/06/04 Python
go goth封装第三方认证库示例详解
2022/08/14 Golang