JavaScript执行上下文与执行栈是什么

JavaScript 是一门单线程、解释执行的编程语言，它的执行机制与其他语言有所不同。理解 JavaScript 的执行上下文（Execution Context）和执行栈（Execution Stack）是掌握 JavaScript 运行机制的关键。本文将深入探讨这两个概念，帮助你更好地理解 JavaScript 代码的执行过程。

1. 什么是执行上下文？

执行上下文（Execution Context）是 JavaScript 代码执行的环境。每当 JavaScript 代码运行时，它都会在一个特定的上下文中执行。执行上下文决定了代码可以访问的变量、函数以及 this 的值。

1.1 执行上下文的类型

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

1. 全局执行上下文（Global Execution Context）：这是默认的、最外层的执行上下文。在浏览器环境中，全局执行上下文是 window 对象；在 Node.js 环境中，它是 global 对象。全局执行上下文中的代码在整个程序的生命周期内都存在。

2. 函数执行上下文（Function Execution Context）：每当一个函数被调用时，都会为该函数创建一个新的执行上下文。每个函数都有自己的执行上下文，函数执行完毕后，其执行上下文会被销毁。

3. Eval 执行上下文（Eval Execution Context）：在 eval 函数内部执行的代码也会创建一个新的执行上下文。由于 eval 的使用不推荐，本文不深入讨论这种类型的执行上下文。

1.2 执行上下文的生命周期

执行上下文的生命周期可以分为两个阶段：

1. 创建阶段（Creation Phase）：在这个阶段，JavaScript 引擎会创建执行上下文，并执行以下操作：

   • 创建变量对象（Variable Object），用于存储变量、函数声明和函数参数。
   • 建立作用域链（Scope Chain），用于确定变量的可访问性。
   • 确定 this 的值。

2. 执行阶段（Execution Phase）：在这个阶段，JavaScript 引擎会逐行执行代码，并分配变量值、执行函数调用等操作。

1.3 变量对象与作用域链

在创建阶段，JavaScript 引擎会创建一个变量对象（Variable Object），用于存储当前上下文中的变量、函数声明和函数参数。变量对象是执行上下文的一部分，它包含了当前上下文中所有可访问的变量和函数。

作用域链（Scope Chain）是由当前执行上下文的变量对象和所有父级执行上下文的变量对象组成的链式结构。作用域链决定了变量和函数的可访问性。当 JavaScript 引擎在当前上下文中找不到某个变量时，它会沿着作用域链向上查找，直到找到该变量或到达全局执行上下文。

2. 什么是执行栈？

执行栈（Execution Stack），也称为调用栈（Call Stack），是一个用于存储执行上下文的数据结构。JavaScript 是单线程的，这意味着它一次只能执行一个任务。执行栈用于管理这些任务的执行顺序。

2.1 执行栈的工作原理

当 JavaScript 引擎开始执行代码时，它会首先创建一个全局执行上下文，并将其推入执行栈中。每当一个函数被调用时，JavaScript 引擎会为该函数创建一个新的执行上下文，并将其推入执行栈的顶部。当函数执行完毕后，其执行上下文会从栈中弹出，控制权会回到之前的执行上下文。

执行栈是一个后进先出（LIFO）的数据结构，这意味着最后被推入栈的执行上下文会最先被弹出。

2.2 执行栈的示例

让我们通过一个简单的例子来理解执行栈的工作原理：

function first() {
  console.log('First function');
  second();
}

function second() {
  console.log('Second function');
  third();
}

function third() {
  console.log('Third function');
}

first();

在这个例子中，JavaScript 引擎的执行过程如下：

1. 首先，全局执行上下文被创建并推入执行栈。
2. first 函数被调用，first 的执行上下文被创建并推入栈顶。
3. first 函数内部调用了 second 函数，second 的执行上下文被创建并推入栈顶。
4. second 函数内部调用了 third 函数，third 的执行上下文被创建并推入栈顶。
5. third 函数执行完毕后，其执行上下文从栈中弹出，控制权回到 second 函数。
6. second 函数执行完毕后，其执行上下文从栈中弹出，控制权回到 first 函数。
7. first 函数执行完毕后，其执行上下文从栈中弹出，控制权回到全局执行上下文。

最终，执行栈中只剩下全局执行上下文。

2.3 执行栈与递归

递归函数是一种调用自身的函数。由于每次函数调用都会创建一个新的执行上下文并将其推入执行栈，递归函数可能会导致执行栈溢出（Stack Overflow）。这是因为执行栈的大小是有限的，当递归调用过深时，执行栈会被填满，从而导致错误。

例如：

function recursive() {
  recursive();
}

recursive();

在这个例子中，recursive 函数会无限调用自身，导致执行栈不断增长，最终抛出“Maximum call stack size exceeded”错误。

3. 执行上下文与执行栈的关系

执行上下文和执行栈是密不可分的。执行栈用于管理执行上下文的创建和销毁，而执行上下文则包含了代码执行所需的所有信息。

每当一个函数被调用时，JavaScript 引擎会为该函数创建一个新的执行上下文，并将其推入执行栈。当函数执行完毕后，其执行上下文会从栈中弹出，控制权会回到之前的执行上下文。这个过程确保了 JavaScript 代码的有序执行。

4. 总结

执行上下文和执行栈是 JavaScript 运行机制的核心概念。执行上下文是代码执行的环境，它决定了变量、函数和 this 的可访问性。执行栈则用于管理执行上下文的创建和销毁，确保代码的有序执行。

理解这些概念有助于你更好地理解 JavaScript 代码的执行过程，尤其是在处理异步编程、闭包、作用域链等高级主题时。通过掌握执行上下文和执行栈的工作原理，你可以编写出更高效、更可靠的 JavaScript 代码。

希望这篇文章能帮助你更好地理解 JavaScript 的执行上下文与执行栈。如果你有任何问题或需要进一步的解释，请随时提问！