什么是 JavaScript 执行上下文？
简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。
执行上下文的类型
JavaScript 中有三种执行上下文类型。
全局执行上下文： 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的window对象（浏览器的情况下），并且设置this的值等于这个全局对象。一个程序中只会有一个全局执行上下文。函数执行上下文： 每当一个函数被调用时, 都会为该函数创建一个新的上下文。每个函数都有它自己的执行上下文，不过是在函数被调用时创建的。函数上下文可以有任意多个。每当一个新的执行上下文被创建，它会按定义的顺序（将在后文讨论）执行一系列步骤。Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用。
执行上下文的特点
- 单线程，只在主线程上运行。
- 同步执行，从上向下按顺序执行。
- 全局上下文只有一个，也就是
window对象。 - 函数执行上下文没有限制。
- 函数每调用一次就会产生一个新的执行上下文环境。
执行栈
执行栈，也就是在其它编程语言中所说的“调用栈”，是一种拥有 LIFO（后进先出，类似于向乒乓球桶中放球，最先放入的球最后取出）数据结构的栈，被用来存储代码运行时创建的所有执行上下文。
当 JavaScript 引擎第一次遇到你的脚本时，它会创建一个全局的执行上下文并且压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部。
引擎会执行那些执行上下文位于栈顶的函数。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。
让我们通过下面的代码示例来理解：
let a = 'Hello World!'; // 1. 全局上下文环境
function first() {
console.log('Inside first function');
second(); // 3. second 上下文环境
console.log('Again inside first function');
}
function second() {
console.log('Inside second function');
}
first(); // 2. first 上下文环境
console.log('Inside Global Execution Context');
上述代码的执行上下文栈。
当上述代码在浏览器中加载时，JavaScript 引擎创建了一个全局执行上下文并把它压入当前执行栈。当遇到 first() 函数调用时，JavaScript 引擎为该函数创建一个新的执行上下文并把它压入当前执行栈的顶部。
当从 first() 函数内部调用 second() 函数时，JavaScript 引擎为 second() 函数创建了一个新的执行上下文并把它压入当前执行栈的顶部。当 second() 函数执行完毕，它的执行上下文会从当前栈弹出，并且控制流程到达下一个执行上下文，即 first() 函数的执行上下文。
当 first() 执行完毕，它的执行上下文从栈弹出，控制流程到达全局执行上下文。一旦所有代码执行完毕，JavaScript 引擎从当前栈中移除全局执行上下文。
怎么创建执行上下文
到现在，我们已经看过 JavaScript 怎样管理执行上下文了，现在让我们了解 JavaScript 引擎是怎样创建执行上下文的（执行上下文生命周期）。
执行上下文的生命周期, 分为三个阶段：
- 创建阶段
- 执行阶段
- 销毁阶段
① 创建阶段
在 JavaScript 代码执行前，执行上下文将经历创建阶段。在创建阶段会发生三件事：
- 确定 this 的值, 也就是绑定
this(This Binding)。 - 创建
词法环境组件。 - 创建
变量环境组件。
看下面这张图帮你理解👇
this 绑定
在全局执行上下文中，this 的值指向全局对象。(在浏览器中，this引用 Window 对象)。This 绑定： 在函数执行上下文中，this 的值取决于该函数是如何被调用的。如果它被一个引用对象调用，那么 this 会被设置成那个对象，否则 this 的值被设置为全局对象或者 undefined（在严格模式下）。例如：
let foo = {
baz: function() {
console.log(this);
}
}
foo.baz(); // 'this' 引用 'foo', 因为 'baz' 被对象 'foo' 调用
let bar = foo.baz;
bar(); // 'this' 指向全局 window 对象，因为没有指定引用对象
词法环境
官方的 ES6 文档把词法环境定义为
词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由
环境记录器和一个可能的引用外部词法环境的空值组成。
简单来说词法环境是一种持有标识符—变量映射的结构。（这里的标识符指的是变量/函数的名字，而变量是对实际对象[包含函数类型对象]或原始数据的引用）。
现在，在词法环境的内部有两个组件， 环境记录器和一个外部环境的引用。
- 环境记录器是存储变量和函数声明的实际位置。
- 外部环境的引用意味着它可以访问其父级词法环境（作用域）。
「词法环境有两种类型」:
全局环境（在全局执行上下文中）是没有外部环境引用的词法环境。全局环境的外部环境引用是 null。它拥有内建的 Object/Array/等、在环境记录器内的原型函数（关联全局对象，比如 window 对象）还有任何用户定义的全局变量，并且 this的值指向全局对象。
在函数环境中，函数内部用户定义的变量存储在环境记录器中。并且引用的外部环境可能是全局环境，或者任何包含此内部函数的外部函数。
「环境记录器也有两种类型」:
声明式环境记录器存储变量、函数和参数。对象环境记录器用来定义出现在全局上下文中的变量和函数的关系。
在函数环境中，环境记录器是声明式环境记录器。在全局环境中，环境记录器是对象环境记录器。
注意：对于函数环境，声明式环境记录器还包含了一个传递给函数的 arguments 对象（此对象存储索引和参数的映射）和传递给函数的参数的 length。
抽象地讲，词法环境在伪代码中看起来像这样：
GlobalExectionContext = { // 全局执行上下文
LexicalEnvironment: { // 词法环境
EnvironmentRecord: { // 环境记录
Type: "Object", // 全局环境
// 标识符绑定在这里
outer: <null> // 对外部环境的引用
}
}
FunctionExectionContext = { // 函数执行上下文
LexicalEnvironment: { // 词法环境
EnvironmentRecord: { // 环境记录
Type: "Declarative", // 函数环境
// 标识符绑定在这里 // 对外部环境的引用
outer: <Global or outer function environment reference>
}
}
变量环境：
它同样是一个词法环境，其环境记录器持有变量声明语句在执行上下文中创建的绑定关系。
如上所述，变量环境也是一个词法环境，所以它有着上面定义的词法环境的所有属性。
在 ES6 中，词法环境组件和变量环境组件的一个不同就是前者被用来存储函数声明和变量（let 和 const）绑定，而后者只用来存储 var 变量绑定。
我们看点样例代码来理解上面的概念：
let a = 20;
const b = 30;
var c;
function multiply(e, f) {
var g = 20;
return e * f * g;
}
c = multiply(20, 30);
执行上下文看起来像这样：
GlobalExectionContext = {
ThisBinding: <Global Object>,
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Object",
// 在这里绑定标识符
a: < uninitialized >,
b: < uninitialized >,
multiply: < func >
}
outer: <null>
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Object",
// 在这里绑定标识符
c: undefined,
}
outer: <null>
}
}
FunctionExectionContext = {
ThisBinding: <Global Object>,
LexicalEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// 在这里绑定标识符
Arguments: {0: 20, 1: 30, length: 2},
},
outer: <GlobalLexicalEnvironment>
},
VariableEnvironment: {
EnvironmentRecord: {
Type: "Declarative",
// 在这里绑定标识符
g: undefined
},
outer: <GlobalLexicalEnvironment>
}
}
「注意」:
只有遇到调用函数 multiply 时，函数执行上下文才会被创建。
可能你已经注意到 let 和 const 定义的变量并没有关联任何值，但 var 定义的变量被设成了 undefined。
这是因为在创建阶段时，引擎检查代码找出变量和函数声明，虽然函数声明完全存储在环境中，但是变量最初设置为 undefined（var 情况下），或者未初始化（let 和 const 情况下）。
这就是为什么你可以在声明之前访问 var 定义的变量（虽然是 undefined），但是在声明之前访问 let 和 const 的变量会得到一个引用错误。
这就是我们说的变量声明提升。
② 执行阶段
这是整篇文章中最简单的部分。在此阶段，完成对所有这些变量的分配，最后执行代码。（变量赋值，函数引用，执行其他的代码）
「注意」:
在执行阶段，如果 JavaScript 引擎不能在源码中声明的实际位置找到 let 变量的值，它会被赋值为 undefined。
③ 销毁阶段
执行完毕出栈，等待回收被销毁。
变量对象
VO/AO
① VO(变量对象), 也就是variable object, 创建执行上下文时与之关联的会有一个变量对象，该上下文中的所有变量和函数全都保存在这个对象中。
② AO(活动对象), 也就是activation object,进入到一个执行上下文时，此执行上下文中的变量和函数都可以被访问到，可以理解为被激活了。
变量对象和活动对象的区别就在于，执行周期不一样，在创建阶段叫做变量对象，在执行阶段叫做活动对象。当进入到一个执行上下文后，这个变量对象才会被激活，这时候活动对象上的各种属性才能被访问。
变量对象的创建，依次经历了以下几个过程👇
变量对象的创建主要有三个阶段：
- 创建
arguments对象。 - 检查
function 函数声明创建属性。在VO对象中以函数名建立一个属性，属性值为函数的地址。如果函数名的属性已经存在了，那么该属性将会被新的引用所覆盖。 - 检查
var变量声明创建属性。在VO对象中以变量名建立一个属性，属性值为 undefined。为了防止同名的属性值会被修改为 undefined，则会直接跳过，原属性值不会被修改。
举个变量提升和函数提升的例子，就明白了
function test(){
console.log(a);
console.log(foo());
var a = 1;
function foo(){
return 2;
}
}
test();
这是一个典型的变量提升和函数提升的例子，最后会输出 undefined 和 2,接下来以执行上下文的生命周期来讲解。
创建过程：
testEC = {
VO:{...}, // 创建变量、参数、函数arguments对象
scopeChain:{}, // 建立作用域链
this:{} // 确定this的值
}
VO = {
arguments:{},
foo:<foo reference>,
a:undefined
}
执行阶段：
VO->AO
AO={
arguments:{},
foo:<foo reference>,
a:2 // 变量赋值
}
等同于
function test(){
function foo(){
return 2;
}
var a;
console.log(a);
console.log(foo());
a = 1;
}
test();
执行过程
首先来看看一个执行上下文(EC) 被创建和执行的过程👇
「创建阶段」:
- 创建变量、参数、函数 arguments 对象。
- 建立作用域链。
- 确定this的值。
「执行阶段」:
变量赋值，函数引用，执行代码。
进入执行上下文
在创建阶段, 也就是还没有执行代码之前
此时的变量对象包括函数(如下顺序初始化):
- 函数的所有形参(仅在函数上下文): 没有实参, 属性值为 undefined;
- 函数声明：如果变量对象已经存在相同名称的属性，则完全替换这个属性;
- 变量声明：如果变量名称跟已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性;
来看看下面的例子🌰
function fn (a) {
var b = 2;
function c () {};
var d = function {};
b = 20
}
fn(1)
对于上面的例子，此时的 AO 是:
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: undefined,
c: reference to function c() {},
d: undefined
}
可以看到, 形参 arguments 此时已经有赋值了, 但是变量还是 undefined。
代码执行
到了代码执行时, 会修改变量对象的值, 执行完后 AO 如下:
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: 20,
c: reference to function c() {},
d: reference to function d() {}
}
在此阶段， 前面的变量对象中的值就会被赋值了， 此时变量对象处于激活状态。
总结
- JavaScript 中有三种执行上下文类型。（全局执行上下文 ，函数执行上下文，Eval 函数执行上下文 ）
- 执行上下文特点。（单线程，同步执行，函数每调用一次就会产生一个新的执行上下文环境）
- 执行上下文创建阶段分为绑定 this，创建词法环境，变量环境三步，两者区别在于词法环境存放函数声明与 const，let 声明的变量，而变量环境只存储 var 声明的变量。
- 词法环境主要由环境记录与外部环境引入记录两个部分组成，全局上下文与函数上下文的外部环境引入记录不一样，全局为null，函数为全局环境或者其它函数环境。环境记录也不一样，全局叫对象环境记录，函数叫声明性环境记录。
- 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值，在代码执行阶段，会再次修改变量对象的属性值。
参考文章：
