详释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 相关文章推荐
可以文本显示的公告栏的js代码
Mar 11 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
js实现简易计算器小功能
Nov 18 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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
通过文字传递创建的图形按钮
2006/10/09 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
python正则分析nginx的访问日志
2017/01/17 Python
Python 12306抢火车票脚本
2018/02/07 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python 求数组局部最大值的实例
2019/11/26 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
美国翻新电子产品商店:The Store
2019/10/08 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
优秀党员获奖感言
2014/02/18 职场文书
小学生植树节活动总结
2014/07/04 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
五年级作文之想象作文
2019/10/30 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android