当上述代码在浏览器中加载时，JavaScript 引擎会创建一个全局执行上下文并且将它推入当前的执行栈。当调用 first() 函数时，JavaScript 引擎为该函数创建了一个新的执行上下文并将其推到当前执行栈的顶端。
当在 first() 函数中调用 second() 函数时，Javascript 引擎为该函数创建了一个新的执行上下文并将其推到当前执行栈的顶端。当 second() 函数执行完成后，它的执行上下文从当前执行栈中弹出，上下文控制权将移到当前执行栈的下一个执行上下文，即 first() 函数的执行上下文。
当 first() 函数执行完成后，它的执行上下文从当前执行栈中弹出，上下文控制权将移到全局执行上下文。一旦所有代码执行完毕，Javascript 引擎把全局执行上下文从执行栈中移除。
执行上下文是如何被创建的
到目前为止，我们已经看到了 JavaScript 引擎如何管理执行上下文，现在就让我们来理解 JavaScript 引擎是如何创建执行上下文的。
执行上下文分两个阶段创建：1)创建阶段； 2)执行阶段
创建阶段
在任意的JavaScript代码被执行前，执行上下文处于创建阶段。在创建阶段总共发生了三件事情：
确定this的值，也被称为This Binding；
LexicaEnvironment(词法环境)组件被创建；
VariableEnvironment(变量环境)组件被创建。
因此，执行上下文可以在概念上表示如下：
ExecutionContext ={
ThisBinding= ,
LexicalEnvironment={ ... },
VariableEnvironment={ ... },
}This Biling:
在全局执行上下文中，this的值指向全局对象，在浏览器中，this 的值指向 window 对象。
在函数执行上下文中，this 的值取决于函数的调用方式。如果它被一个对象引用调用，那么 this 的值被设置为该对象，否则 this的值被设置为全局对象或 undefined(严格模式下)。例如：
let person ={
name:'peter',
birthYear:1994,
calcAge:function() {
console.log(2018 - this.birthYear);
}
}person.calcAge();//'this' 指向 'person', 因为 'calcAge' 是被 'person' 对象引用调用的。
let calculateAge=person.calcAge;
calculateAge();//'this' 指向全局 window 对象,因为没有给出任何对象引用
词法环境(Lexical Environment):
官方ES6文档将词法环境定义为：
词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符与特定变量和函数的关联关系。词法环境由环境记录(environment record)和可能为空引用(null)的外部词法环境组成。
简而言之，词法环境是一个包含标识符变量映射的结构。(这里的标识符表示变量/函数的名称，变量是对实际对象【包括函数类型对象】或原始值的引用)
在词法环境中，有两个组成部分：(1)环境记录(environment record) (2)对外部环境的引用
1.环境记录是存储变量和函数声明的实际位置 2. 对外部环境的引用意味着它可以访问其外部词法环境
词法环境有两种类型：
全局环境(在全局执行上下文中)是一个没有外部环境词法环境的词法环境。全局环境的外部环境引用为null。它拥有一个全局对象(window对象)及其关联的方法和属性(例如数组方法)以及任何用户自定义的全局变量，this的值指向这个全局对象。
函数环境，用户在函数中定义的变量被存储在环境记录中，包含了arguments对象。对外部环境的引用可以是全局环境，也可以是包含内部函数的外部函数环境。
注意：对于函数环境而言，环境记录还包含了一个arguments对象，该对象包含了索引和传递给函数的参数之间的映射以及传递给函数的参数的长度(数量)。例如下面函数的arguments对象：
functionfoo(a, b) {var c = a +b;
}
foo(2, 3);//arguments 对象
Arguments: {0: 2, 1: 3, length: 2},环境记录同样也有两种类型：
声明性环境记录存储变量，函数和参数。一个函数环境包含声明性环境记录。
对象环境记录用于定义在全局执行上下文中出现的变量和函数的关联。全局环境包含对象环境记录。
抽象地说，词法环境的伪代码中看起来像这样：
GlobalExectionContext ={ // 全局执行上下文
LexicalEnvironment: { // 词法环境
EnvironmentRecord: { // 环境记录
Type:"Object", //全局环境//标识符绑定在这里
outer: // 对外部环境的引用
}
}
FunctionExectionContext={ //函数执行上下文
LexicalEnvironment: { //词法环境
EnvironmentRecord: { //环境记录
Type:"Declarative", //函数环境//标识符绑定在这里
outer: //对外部环境的引用
}
}变量环境：
变量环境是一个词法环境，因此它具有上面定义的词法环境的所有属性。
在 ES6 中，词法环境(LexicalEnvironment 组件)和 变量环境(VariableEnvironment 组件)的区别在于前者用于存储函数声明和变量( let 和 const)绑定，而后者仅用于存储变量( var)绑定。
使用例子进行介绍：
let a = 20;
const b= 30;varc;functionmultiply(e, f) {var g = 20;return e * f *g;
}
c= multiply(20, 30);执行上下文如下：
GlobalExectionContext ={
ThisBinding:,
LexicalEnvironment: {
EnvironmentRecord: {
Type:"Object",//标识符绑定在这里
a: < uninitialized >,
b:< uninitialized >,
multiply:< func >}
outer:},
VariableEnvironment: {
EnvironmentRecord: {
Type:"Object",//标识符绑定在这里
c: undefined,
}
outer:}
}
FunctionExectionContext={
ThisBinding:,
LexicalEnvironment: {
EnvironmentRecord: {
Type:"Declarative",//标识符绑定在这里
Arguments: {0: 20, 1: 30, length: 2},
},
outer:},
VariableEnvironment: {
EnvironmentRecord: {
Type:"Declarative",//标识符绑定在这里
g: undefined
},
outer:}
}注意：只有在遇到函数multiply的调用时才会创建函数执行上下文。
变量提升的原因：在创建阶段，函数声明存储在环境中，而变量会被设置为 undefined(在 var 的情况下)或保持未初始化(在 let和 const 的情况下)。所以这就是为什么可以在声明之前访问 var 定义的变量(尽管是 undefined)，但如果在声明之前访问 let 和const 定义的变量就会提示引用错误的原因。这就是所谓的变量提升。
执行阶段
此阶段，完成对所有变量的分配，最后执行代码。
如果JavaScript引擎在源代码中声明的实际位置找不到 let变量的值，那么将为其分配 undefined值。
