js是如何工作的？
js中的源代码在执行前会经历三个阶段，统称为“编译”。
- 分词/词法分析（Tokenizing/Lexing）
这个过程会将由字符组成的字符串分解成有意义的代码块，这些代码块被称为词法单元（token）。例如，考虑程序 var a = 2; 。这段程序通常会被分解成为下面这些词法单元：var、a、=、2 、;。
[
{
"type": "Keyword",
"value": "var"
},
{
"type": "Identifier",
"value": "a"
},
{
"type": "Punctuator",
"value": "="
},
{
"type": "Numeric",
"value": "1"
},
{
"type": "Punctuator",
"value": ";"
}
]
- 解析/语法分析（Parsing）
这个过程是将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树被称为“抽象语法树”（Abstract Syntax Tree，AST）。
将 var a = 2 的抽象语法树用json格式表示大致是这样的，感兴趣的话可以通过该网站进行尝试。
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
"id": {
"type": "Identifier",
"name": "a"
},
"init": {
"type": "Literal",
"value": 1,
"raw": "1"
}
}
],
"kind": "var"
}
],
"sourceType": "script"
}
- 代码生成
将 AST 转换为可执行代码的过程被称为代码生成。这个过程与语言、目标平台等息息相关。
理解作用域
对于 var a = 2 这段代码，编译器首先会将这段程序分解成词法单元，然后将词法单元解析成一个树结构。当进行代码生成时，会做如下处理：
- 遇到 var a = 2 ，编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的集合中。如果是，编译器会忽略该声明，继续进行编译；否则它会要求作用域在当前作用域的集合中声明一个新的变量，并命名为a。
- 接下来编译器会为引擎生成运行时所需的代码，这些代码被用来处理 a = 2 这个赋值操作。引擎运行时会首先询问作用域，在当前的作用域集合中是否存在一个叫作 a 的变量。如果是，引擎就会使用这个变量；如果否，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。
在我们的例子中，引擎会为变量a 进行LHS 查询。另外一个查找的类型叫作RHS（当变量出现在赋值操作的左侧时进行LHS 查询，出现在右侧时进行RHS 查询。）。LHS是“赋值操作的目标”，RHS是是赋值操作的源头（值）。
如果RHS 查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出ReferenceError异常；如果RHS 查询找到了一个变量，但是你尝试对这个变量的值进行不合理的操作，那么引擎会抛出另外一种类型的异常，叫作TypeError。
相较之下，当引擎执行LHS 查询时，如果在顶层（全局作用域）中也无法找到目标变量，全局作用域中就会创建一个具有该名称的变量，并将其返还给引擎，前提是程序运行在非“严格模式”下。
作用域共有两种主要的工作模型，词法作用域和动态作用域，而js中的作用域是词法作用域。
词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，而动态作用域是在运行时就被动态确定的。下面来看一个例子：
function foo(a) {
var b = a * 2;
function bar(c) {
console.log( a, b, c );
}
bar( b * 3 );
}
foo( 2 ); // 2, 4, 12
- ①包含着整个全局作用域，其中只有一个标识符：foo。
- ②包含着foo 所创建的作用域，其中有三个标识符：a、bar 和b。
- ③包含着bar 所创建的作用域，其中只有一个标识符：c。
当找不到变量时，引擎就会在外层嵌套的作用域中继续查找，直到找到该变量，或抵达最外层的作用域（也就是全局作用域）为止。
为了分辨词法作用域和动态作用域，下面我们来做道题：
function foo() {
console.log( a ); // 2
}
function bar() {
var a = 3;
foo();
}
var a = 2;
bar();
词法作用域让foo() 中的a 通过RHS 引用到了全局作用域中的a，因此会输出2。而动态作用域并不关心函数和作用域是如何声明以及在何处声明的，只关心它们从何处调用，输出的会是3。
执行上下文
在讲了那么多前提知识之后，终于要进入本文的正题——执行上下文。执行上下文就是当前js代码被解析和执行时所在环境的抽象概念。执行上下文在编译时就确定上下文关系，所以可以认为，在编译过程中，在解析js代码所对应的词法关系时候，编译器就已经确定了代码中每个环境对应的执行上下文的关系，只是说，这时候还没被执行。
执行上下文中包括this（This Binding），LexicaEnvironment（词法环境），VariableEnvironment（变量环境）。
词法环境是一种规范类型，定义标识符与特定变量和函数的关联关系，由环境记录（environment record）和可能为空引用（null）的外部词法环境组成。环境记录用于存储变量和函数声明的实际位置，而对外部环境的引用意味着它可以访问其外部词法环境，借助词法环境可以用于实现作用域链访问。
变量环境也是一个词法环境，因此它具有上面定义的词法环境的所有属性。其主要区别是，在 ES6 中，词法环境用于存储函数声明和变量（ let 和 const ）绑定，而变量环境仅用于存储变量（ var ）绑定。
执行上下文的类型，总共有三类。包括全局执行上下文、函数执行上下文和Eval函数执行上下文。
在编译完成后，代码开始运行时就开始执行入栈。执行栈，也叫调用栈，具有LIFO（Last in, First out 后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。
let a = 'Hello World!';
function first() {
console.log('Inside first function');
second();
console.log('Again inside first function');
}
function second() {
console.log('Inside second function');
}
first();
console.log('Inside Global Execution Context');
我们所熟知的变量提升就与执行上下文息息相关。下面我们来尽量模拟这个过程：
let a = 20;
const b = 30;
var c;
function multiply(e, f) {
var g = 20;
return e * f * g;
}
c = multiply(20, 30);
在经过编译时，其实作用域以及上下文环境就已经确定了下来，但此时var声明的变量还是未赋值（undefined），而const、let声明的变量还是uninitialied（这里只简单画了环境记录，没有把外部词法环境以及其他复杂的东西画出来）。代码运行时，全局上下文先入栈，进行赋值操作，执行到函数时，函数上下文入栈，同样的进行赋值操作，再把结果返回给c并进行出栈。
从这里不难看出，如果在变量c声明前调用log，会显示undefined；而如果log打印a和b的话，由于未初始化，则会报错。
参考资料
你不知道的JavaScript（上卷）
js没那么简单(1)-- 执行上下文
[译] 理解 JavaScript 中的执行上下文和执行栈
