共计 3159 个字符，预计需要花费 8 分钟才能阅读完成。
相信大家在面试的过程中经常遇到查看执行顺序的问题，如 setTimeout,promise,async await 等等，各种组合，是不是感觉头都要晕掉了，其实这些问题最终还是考察大家对 js 的运行机制是否掌握牢固，对 promise，async 的原理是否掌握，万变不离其宗，这次就来彻底搞懂它。
1 js 引擎的运行原理
js 引擎也是程序，是属于浏览器的一部分，由浏览器厂商自行开发。从头到尾负责整个 JavaScript 程序的编译及执行过程
浏览器在渲染的过程中，首先按顺序加载由 <script> 标签分割的 js 代码块，加载 js 代码块完毕后，需要 js 引擎进行解析。无论是外部脚本文件（不异步加载）还是内部脚本代码块，都是一样的原理，并且都在同一个全局作用域中。JavaScript 被归类为“动态”或“解释执行”语言，所以它无需提前编译，而是由解释器实时运行
js 引擎执行过程分为三个阶段：
JS 的解释阶段
JS 的预处理（编译）阶段及执行阶段
1.1 JS 的解释阶段
js 脚本代码块加载完毕后，会首先 JS 的解释阶段。该阶段主要过程如下：
词法分析——这个过程会将由字符组成的字符串分解成（对编程语言来说）有意义的代码块，这些代码块被称为词法单元（token）
语法分析——这个过程是将词法单元流（数组）转化成抽象语法树（Abstract Syntax Tree）
使用翻译器（translator），将代码转为字节码（bytecode）
使用字节码解释器（bytecode interpreter），将字节码转为机器码
最终计算机执行的就是机器码。
为了提高运行速度，现代浏览器一般采用即时编译（JIT-Just In Time compiler）
即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存（inline cache）
这样整个程序的运行速度能得到显著提升。
而且，不同浏览器策略可能还不同，有的浏览器就省略了字节码的翻译步骤，直接转为机器码（如 chrome 的 v8）
1.2 JS 的预处理（编译）阶段及执行阶段
这里我理解为 js 为解释型语言，由解释器实时运行，通俗的说就是预处理完之后马上执行，一边编译一边执行
1.2.1 js 的执行环境主要有三种：
全局环境
函数环境
eval（不建议使用，会有安全，性能问题）
1.2.2 以下段例子说明 js 的预编译与执行过程
function bar() {
var B_context = “Bar EC”;
function foo() {
var f_context = “foo EC”;
}
foo()
}
bar()
这段函数经过词法解析，语法解析阶段之后，就开始进入预编译并执行，如下：
首先，进入全局环境，就会先进行预处理，然创建全局上下文执行环境（Global ExecutionContext），会对 var 声明的变量和函数声明进行预处理，window 对象就是全局执行上下文的变量对象，所有的变量和函数都是 window 对象的属性方法。所以函数声明提前和变量声明提升是在创建变量对象中进行的，且函数声明优先级高于变量声明。然后推入 stack 栈中。预处完成之后，开始执行 js
当执行 bar() 时，就会进入 bar 函数运行环境，就会先进行预处理，创建 bar 函数执行上下文（bar Execution Context），推入 stack 栈中，预处理完后，开始执行 foo()
在 bar 函数内部调用 foo 函数，则再进入 foo 函数运行环境，创建 foo 函数执行上下文（foo Execution Context），推入 stack 栈中
此刻栈底是全局执行上下文（Global Execution Context），栈顶是 foo 函数执行上下文（foo Execution Context），如上图，由于 foo 函数内部没有再调用其他函数，那么则开始出栈
foo 函数执行完毕后，栈顶 foo 函数执行上下文（foo Execution Context）首先出栈
bar 函数执行完毕，bar 函数执行上下文（bar Execution Context）出栈
Global Execution Context 则在浏览器或者该标签页关闭时出栈。
1.2.3 执行上下文
分析一段简单的代码，帮助我们理解创建执行上下文的过程，如下：
function fun(a, b) {
var num = 1;
function test() {
console.log(num)
}
}
fun(2, 3)
这里我们在全局环境调用 fun 函数，创建 fun 执行上下文，这里为了方便大家理解，暂时不讲解作用域链以及 this 指向，如下：
funEC = {
// 变量对象
VO: {
//arguments 对象
arguments: {
a: undefined,
b: undefined,
length: 2
},
//test 函数
test: <test reference>,
//num 变量
num: undefined
},
// 作用域链
scopeChain:[],
//this 指向
this: window
}
funEC 表示 fun 函数的执行上下文（fun Execution Context 简写为 funEC）
funE 的变量对象中 arguments 属性，上面的写法仅为了方便大家理解，但是在浏览器中展示是以类数组的方式展示的
<test reference> 表示 test 函数在堆内存地址的引用
注：创建变量对象发生在预编译阶段，但尚未进入执行阶段，该变量对象都是不能访问的，因为此时的变量对象中的变量属性尚未赋值，值仍为 undefined，只有进入执行阶段，变量对象中的变量属性进行赋值后，变量对象（VariableObject）转为活动对象（Active Object）后，才能进行访问，这个过程就是 VO –> AO 过程。
建立作用域链作用域链由当前执行环境的变量对象（未进入执行阶段前）与上层环境的一系列活动对象组成，它保证了当前执行环境对符合访问权限的变量和函数的有序访问。
理清作用域链可以帮助我们理解 js 很多问题包括闭包问题等，下面我们结合一个简单的例子来理解作用域链，如下：
var num = 30;
function test() {
var a = 10;
function innerTest() {
var b = 20;
return a + b
}
innerTest()
}
test()
在上面的例子中，当执行到调用 innerTest 函数，进入 innerTest 函数环境。全局执行上下文和 test 函数执行上下文已进入执行阶段，innerTest 函数执行上下文在预编译阶段创建变量对象，所以他们的活动对象和变量对象分别是 AO(global)，AO(test) 和 VO(innerTest)，而 innerTest 的作用域链由当前执行环境的变量对象（未进入执行阶段前）与上层环境的一系列活动对象组成，如下：
innerTestEC = {
// 变量对象
VO: {b: undefined},
// 作用域链
scopeChain: [VO(innerTest), AO(test), AO(global)],
//this 指向
this: window
}
在这里我们顺便思考一下，什么是闭包？我们先看下面一个简单例子，如下：
function foo() {
var num = 20;
function bar() {
var result = num + 20;
return result
}
bar()
}
foo()
我这里直接以浏览器解析，以浏览器理解的闭包为准来分析闭包，如下图：
如上图所示，chrome 浏览器理解闭包是 foo，那么按浏览器的标准是如何定义闭包的，我总结为三点：
在函数内部定义新函数
新函数访问外层函数的局部变量，即访问外层函数环境的活动对象属性
新函数执行，创建新的函数执行上下文，外层函数即为闭包
确定 this 指向在全局环境下，全局执行上下文中变量对象的 this 属性指向为 window；函数环境下的 this 指向却较为灵活，需根据执行环境和执行方法确定