52. 什么是执行栈（Call Stack）？如何造成栈溢出？副本.md

1. 核心概念 (Core Concept)

执行栈（Call Stack） 是一种用于管理 JavaScript 代码执行上下文的数据结构，它本质上是一个后进先出（LIFO）的栈。每当一个函数被调用时，一个新的“栈帧”（Stack Frame）就会被推入执行栈的顶部；当函数执行完毕并返回时，其对应的栈帧就会从栈顶弹出。这个过程决定了函数调用的顺序。

2. 为什么需要它？ (The "Why")

执行栈是 JavaScript 引擎执行代码时不可或缺的一部分，它主要解决了以下问题：

跟踪函数调用顺序： 确保函数按照正确的顺序调用和返回，维护程序的执行流程。
管理作用域和变量： 每个栈帧包含了当前函数的执行上下文信息，包括局部变量、参数、this 的值等，确保函数内部的变量在正确的作用域内访问。
处理函数递归： 递归函数的调用和返回过程正是通过执行栈的压入（push）和弹出（pop）来实现的。

3. API 与用法 (API & Usage)

执行栈是 JavaScript 引擎的内部机制，JavaScript 代码本身并没有直接操作执行栈的 API。我们主要通过函数调用来隐式地影响执行栈的行为。

当执行一段 JavaScript 代码时：

全局代码首先创建一个全局执行上下文，并将其压入执行栈底部。
当调用一个函数时，引擎为该函数创建一个新的执行上下文，并将其压入栈顶。
当函数执行完毕并 return 或遇到代码末尾时，该函数的执行上下文从栈顶弹出。
如果函数抛出未捕获的错误，执行栈会“展开”（unwind），弹出栈帧直到找到合适的错误处理机制（如 try...catch），或者直到栈底，此时程序终止。

经典的函数调用示例：

function firstFunction() {
  console.log("Entering firstFunction");
  secondFunction();
  console.log("Exiting firstFunction");
}

function secondFunction() {
  console.log("Entering secondFunction");
  // Some code
  console.log("Exiting secondFunction");
}

// Call Stack: [] -> [Global]
firstFunction();
// Call Stack (while firstFunction is running): [Global] -> [Global, firstFunction]
// Call Stack (while secondFunction is running): [Global, firstFunction] -> [Global, firstFunction, secondFunction]
// Call Stack (after secondFunction finishes): [Global, firstFunction]
// Call Stack (after firstFunction finishes): [Global]
// Call Stack (after script finishes): []

在这个例子中，执行栈的变化如下：

程序开始，全局上下文压栈：[Global]
调用 firstFunction，其上下文压栈：[Global, firstFunction]
在 firstFunction 中调用 secondFunction，其上下文压栈：[Global, firstFunction, secondFunction]
secondFunction 执行完毕，其上下文弹出：[Global, firstFunction]
firstFunction 执行完毕，其上下文弹出：[Global]
全局代码执行完毕，全局上下文弹出：[]

栈溢出（Stack Overflow）

栈溢出发生在执行栈中推入了过多的栈帧，超出了引擎分配的栈空间。这通常是由于递归函数没有正确定义终止条件，导致函数无限或极大地递归调用自身。每次递归调用都会创建一个新的栈帧，最终耗尽内存。

如何造成栈溢出（典型示例 - 无休止的递归）：

function CauseStackOverflow() {
  // 没有终止条件
  CauseStackOverflow();
}

// 调用这个函数会导致栈溢出错误
// CauseStackOverflow();

运行上述代码会看到类似 RangeError: Maximum call stack size exceeded 的错误。

4. 关键注意事项 (Key Considerations)

理解同步执行： 执行栈只负责管理同步代码的执行顺序。异步任务（如定时器、网络请求回调）不直接在当前的执行栈中执行，它们被放入任务队列，等待当前执行栈清空后才会被执行（通过事件循环）。
栈帧大小限制： 每个 JavaScript 引擎对执行栈的大小都有一个限制。递归深度过大或函数调用层级过多都可能触及这个限制，导致栈溢出。
尾调用优化 (Tail Call Optimization - TCO): 在严格模式下，一些引擎（如 V8 在某些情况下）可以对尾调用进行优化。如果一个函数的返回值仅仅是另一个函数调用的结果，并且这个调用是函数体的最后一个操作，引擎可能重用当前的栈帧而不是创建一个新的，从而避免深层递归导致的栈溢出。但需要注意的是，TCO 并非在所有环境下都得到广泛支持或默认开启。
调试工具： 现代浏览器和 Node.js 的开发者工具通常提供“调用堆栈”（Call Stack）面板，可以实时查看当前的执行栈状态，这对于调试函数调用流程和定位栈溢出非常有帮助。

5. 参考资料 (References)

MDN Web Docs - Concurrency model and Event Loop: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop (虽然标题是事件循环，但其对执行栈和任务队列的关系有详细解释)
JavaScript V8 Engine Blog - Articles about the Call Stack and Execution Context: (V8 引擎博客通常会有关于内部机制的深度文章，可以通过关键词搜索 "Call Stack", "Execution Context")
Understanding the JavaScript Call Stack (Industry Blog Example - conceptual): (可以搜索一些被广泛引用的技术博客，如 freeCodeCamp, CSS-Tricks 等关于 Call Stack 的文章，作为知识点梳理的辅助理解，但API和核心概念仍以官方为准)

原文链接与附件索引

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop