JavaScript 执行上下文详解

JavaScript（以下简称 JS）是一种运行在浏览器中的编程语言，它常常被用来实现交互性和动画效果。理解 JavaScript 的执行上下文对于掌握 JS 编程至关重要，这篇文章将为你详细讲解 JS 执行上下文的工作原理及其相关的知识点。

JS 执行上下文

JS 执行上下文是在代码执行时，JavaScript 引擎所创建的一个内部数据结构，用于存储关于代码执行的所有信息。每当一个新的执行上下文被创建时，JS 引擎会对当前上下文进行压栈，即将其推到调用栈顶部。

执行上下文三要素

每个执行上下文由三个关键要素组成：

1. 变量环境（Variable Environment）- 存储在当前执行上下文中声明的变量，同时也包含了函数声明等信息；
2. 词法环境（Lexical Environment）- 保存了当前执行上下文中声明的所有符号（标识符）和它们对应的值（变量、函数）的映射。在函数的执行上下文中，它还记录了函数声明时的词法环境；
3. this 值（This Binding） - 在执行上下文的创建阶段，JS 引擎会确定 this 的值，并将其绑定到执行上下文中。

执行上下文的类型

在 JavaScript 中，有三种类型的执行上下文：

1. 全局执行上下文，它是 JS 引擎在代码执行的开头创建的第一个执行上下文，它的作用域为全局作用域。
2. 函数执行上下文，每当函数被调用时，都会创建一个新的函数执行上下文，它的作用域为函数作用域。
3. Eval 执行上下文，由 eval() 函数所创建，它的作用域依赖于调用 eval() 函数代码所处的执行上下文。

执行上下文创建阶段

当一个新的执行上下文被创建时，它将经历两个阶段的过程：创建阶段和执行阶段。

创建阶段

1. 变量对象的创建： 变量对象（Variable Object）是一个关键的元素，用于在代码执行前存储变量、函数定义等信息。针对全局执行上下文，它是全局变量对象，包含了全局变量、函数，以及用let和const定义的变量。针对函数执行上下文，它是活动对象（Active Object），除了包含函数的参数和局部变量，还包含函数声明和变量声明。
2. 词法环境的创建： 词法环境是一种规范类型，用于管理符号和变量之间的关系，它会在代码执行之前被创建，并在执行期间维护。对于全局执行上下文，词法环境通常与全局变量对象相同；针对函数执行上下文，它会创建一个函数环境，其中包括当前执行上下文内声明的变量和函数。
3. 绑定 this 值：在创建阶段，JS 引擎还会确定 this 的值，并将其绑定到执行上下文中。

执行阶段

当执行上下文创建完成后，JS 引擎会开始执行代码。JS代码可以定义变量、函数、逻辑判断和控制流，这些操作都会在执行阶段内完成。

示例说明

接下来，我们通过几个示例的说明来加深对执行上下文的理解。

示例1: 全局执行上下文

var x = 'hello ';
console.log(x + y + z);
var y = 'world';

执行上下文的创建过程如下：

1. 变量环境（Global Environment）被创建并压入调用栈；
2. 全局变量 x 被创建并分配内存空间；
3. console 对象及其方法被创建并分配内存空间；
4. 代码执行顺序到达第二行，JS 引擎尝试打印 x、y 和 z 三个变量的值，由于此时 y 和 z 还未声明，所以它们的值为 undefined；
5. 变量 y 被创建并分配内存空间，此时它的值为 undefined；
6. 变量 z 被创建并分配内存空间，此时它的值为 undefined；
7. 执行上下文被销毁并弹出调用栈。

示例2：函数执行上下文

function foo() {
  var x = 'foo';
  function bar() {
    var y = 'bar';
  }
  bar();
}
foo();

执行上下文的创建过程如下：

1. 变量环境（Global Environment）被创建并推入调用栈；
2. 函数 foo() 被创建，并分配内存空间；
3. 函数 bar() 被创建，并分配内存空间；
4. 创建 foo() 的执行上下文；
5. 创建 bar() 的执行上下文；
6. 把执行控制交给 bar()；
7. bar() 执行完成并从调用栈中弹出，控制权回到 foo() 执行；
8. foo() 执行完毕并从调用栈中弹出，控制权回到全局执行上下文。

总结

学习 JavaScript 的执行上下文是理解 JavaScript 引擎如何执行代码的关键所在。通过了解它的生命周期、结构和类型，我们可以更好地编写 JavaScript 代码，并避免一些常见的错误。希望本文对您有所帮助！