调用栈（Call Stack）是 JavaScript 引擎管理函数执行的核心机制，它使单线程运行环境能够准确记住“当前执行的位置、下一步返回的位置以及各函数的变量存储位置”。若缺少调用栈，函数嵌套调用后将无法回归，局部变量也会出现混乱。当递归无终止条件、嵌套层次过深或循环引用导致栈帧持续压入而无法弹出时，便会触发“Maximum call stack size exceeded”错误。
调用栈承担的三项关键任务
记录函数执行位置：每次进入一个函数，引擎就在栈顶记下该函数的执行上下文；
确保调用顺序的正确返回：函数执行结束时，引擎自动弹出栈顶并将控制权交还给栈帧下方的函数；
隔离各函数的局部作用域：每个函数的参数、let/const/var变量、this以及作用域链，都封装在各自的栈帧中，彼此互不干扰。
函数调用时的工作原理
以 greet("Alice") 调用 createMessage(name) 为例：
- 全局代码启动后，全局执行上下文首先入栈（位于栈底）
- 执行到
greet("Alice")时，引擎创建greet的执行上下文并压入栈顶 - 在
greet内部遇到createMessage("Alice")调用，则再次创建其执行上下文并压入栈顶 createMessage执行完毕并返回值后，其栈帧立即被弹出- 控制权回到
greet的断点，继续执行console.log，完成后greet的栈帧也被弹出 - 最终仅剩全局上下文，脚本执行结束
为什么会出现“Maximum call stack size exceeded”错误
这本质上是因为栈空间被耗尽。常见原因包括：
- 递归函数没有编写终止条件，例如
function foo() { foo(); }，每次调用都会压入一层栈帧，永不弹出 - 过深的嵌套调用（几十层以上），尤其在旧版浏览器或 Node.js 默认限制下容易触发
- 意外的循环引用，例如两个对象的方法互相调用，形成隐式的无限调用
如何观察与调试调用栈
无需猜测，可以直接查看：
- 在 Chrome DevTools 的 Sources 面板设置断点后，右侧的“Call Stack”区域会实时显示当前栈帧，点击即可跳转到对应的代码行
- 在任意代码位置添加
console.trace()语句，控制台会打印完整的调用路径，例如at createMessage (script.js:2)→at greet (script.js:5) - 报错时的堆栈信息（Stack Trace）即为调用栈的快照，最上面一行表示错误发生点，越往下调用的时间越早
