详释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 相关文章推荐
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
node.js中 stream使用教程
Aug 28 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
用PHP读取IMAP邮件
2006/10/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
JavaScript作用域链使用介绍
2013/08/29 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
在jQuery中处理XML数据的大致方法
2015/08/14 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
javascript 中关于array的常用方法详解
2017/05/05 Javascript
vue 怎么创建组件及组件使用方法
2017/07/27 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
vue使用websocket的方法实例分析
2019/06/22 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
Python实现多线程的两种方式分析
2018/08/29 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Python操作Excel的学习笔记
2021/02/18 Python
linux比较文件内容的命令是什么
2013/03/04 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
商场父亲节活动方案
2014/08/27 职场文书
考试作弊检讨
2015/01/27 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android