什么是javascript递归函数_如何避免递归导致栈溢出【教程】_技术教程

递归函数是直接或间接调用自身的函数，常用于树遍历、阶乘等场景；关键是有自身调用且需终止条件，否则易因调用栈溢出导致RangeError。

递归函数是什么：调用自身的函数

JavaScript 递归函

数就是函数在执行过程中，直接或间接调用自己。它不是语法特性，而是一种编程模式，常用于遍历树结构、计算阶乘、解析嵌套对象等场景。

关键判断标准：function foo() { foo(); } —— 只要函数体内有对自身的调用，且没有可靠的终止条件，就构成递归。

但递归本身不危险，危险的是「无限递归」或「深度过大」。JS 引擎对调用栈深度有限制（通常 10k–15k 层，具体取决于引擎和内存），超过即抛出 RangeError: Maximum call stack size exceeded。

为什么递归容易栈溢出：每次调用都压栈

JS 是单线程、基于调用栈执行的。每次函数调用，引擎都会在栈上保存当前执行上下文（变量、参数、返回地址）。递归每深入一层，就新增一帧；返回时才逐层弹出。

这意味着：

factorial(10000) 可能成功，factorial(20000) 很可能失败
深度为 100 的树遍历，若用朴素递归，栈深就是 100 —— 看似安全，但若树不平衡（比如退化成链表），实际可能逼近极限
箭头函数、async 函数、generator 中递归，同样受栈限制，不会自动优化

如何避免栈溢出：改写策略与边界控制

不能一概禁用递归，而是根据场景选择更稳妥的实现方式。核心思路是：把「依赖调用栈维护状态」转为「手动管理状态」。

推荐做法：

对已知深度较大的场景（如扁平化 1000+ 层嵌套数组），优先用 while + stack 模拟递归，例如：

function flattenDeep(arr) {
  const result = [];
  const stack = [...arr];
  while (stack.length > 0) {
    const val = stack.pop();
    if (Array.isArray(val)) {
      stack.push(...val);
    } else {
      result.push(val);
    }
  }
  return result.reverse();
}

对可预测的浅层递归（如 DOM 树遍历、JSON Schema 验证），加深度计数器强制中断：

function traverse(node, depth = 0, maxDepth = 100) {
  if (depth > maxDepth) throw new Error('Recursion depth exceeded');
  // 处理 node...
  for (const child of node.children || []) {
    traverse(child, depth + 1, maxDepth);
  }
}

尾递归优化（TCO）理论上可解，但目前所有主流浏览器都不支持 ES6 尾调用优化，写成尾递归形式（return fn(...)）也无济于事，栈照样增长

容易被忽略的隐式递归点

有些代码看似没递归，实则触发了隐蔽的调用链：

JSON.stringify() 序列化循环引用对象时，会报 TypeError: Converting circular structure to JSON，但若自定义 toJSON 方法又调回自身，就变成真递归
Vue / React 中，computed 或 useMemo 依赖项里读取另一个计算属性，而后者又反向依赖前者 → 无限求值，本质是逻辑递归
事件监听器中触发相同事件（如 input 改值 → dispatchEvent → 又触发 input），形成事件递归，虽不占 JS 调用栈，但会导致 UI 卡死或内存暴涨