JS `call stack` (调用栈) 与栈溢出：递归与异步函数优化

各位靓仔靓女，大家好！我是今天的主讲人，咱们今天聊聊JS里的“神秘组织”——调用栈（Call Stack），以及它搞事情导致的“栈溢出”惨案。

咱们用最接地气的方式，把这些听起来高大上的概念，变成你茶余饭后的谈资。

一、什么是调用栈？你可以把它想象成叠盘子游戏

想象一下，你在一家餐厅洗盘子。每来一个新订单，你就把一个盘子叠在上面。你洗完一个盘子，就从最上面拿走。这就是调用栈的运作方式。

入栈（Push）： 当你调用一个函数时，就像把一个盘子叠上去，这个盘子（函数调用）的信息就被推入栈中。
出栈（Pop）： 当函数执行完毕，它就像被洗干净的盘子，从栈顶被移除。

JS引擎就是餐厅里的洗碗工，它按照栈的顺序，一个一个地执行函数。

来看个例子：

function first() {
  console.log("First function");
  second();
  console.log("First function end"); // 稍后执行
}

function second() {
  console.log("Second function");
  third();
  console.log("Second function end"); // 稍后执行
}

function third() {
  console.log("Third function");
  console.log("Third function end"); // 立即执行
}

first(); // 启动！

这个例子里，调用栈的变化过程是这样的：

first() 被调用，first 入栈。
first() 调用 second()，second 入栈 (在 first 之上)。
second() 调用 third()，third 入栈 (在 second 之上)。
third() 执行完毕，third 出栈。
second() 继续执行，执行完毕，second 出栈。
first() 继续执行，执行完毕，first 出栈。

最后，栈空了，程序执行完毕。控制台输出如下：

"First function"
"Second function"
"Third function"
"Third function end"
"Second function end"
"First function end"

二、栈溢出（Stack Overflow）：盘子叠太多了！

如果盘子一直叠，叠到天花板了，那会发生什么？盘子会掉下来，餐厅会一片狼藉！这就是栈溢出。

在JS里，栈的大小是有限的。如果你不断地调用函数，却不让它们结束（出栈），最终栈就会被填满，导致栈溢出错误。

最常见的栈溢出场景就是无限递归。

function infiniteRecursion() {
  infiniteRecursion(); // 自己调用自己，没完没了！
}

infiniteRecursion(); // 启动！

这段代码会疯狂地把 infiniteRecursion() 推入栈中，直到栈被填满，然后JS引擎会抛出一个错误：Maximum call stack size exceeded (超过最大调用栈大小)。

三、栈溢出的原因：不只是递归

虽然无限递归是栈溢出的典型原因，但还有其他情况也可能导致栈溢出，例如：

过于深层的函数嵌套： 即使没有直接递归，如果函数调用链太长，也可能超过栈的限制。
大型同步操作： 在某些情况下，如果单个函数执行时间过长，导致栈一直被占用，也可能间接导致栈溢出。

四、解决栈溢出：拯救你的程序

既然知道栈溢出的原因，就可以对症下药。以下是几种常见的解决方案：

避免无限递归： 这是最重要的一点！确保你的递归函数有明确的终止条件。

function recursiveFunction(n) {
  if (n <= 0) { // 终止条件！
    return;
  }
  console.log(n);
  recursiveFunction(n - 1); // 递归调用，但 n 逐渐减小
}

recursiveFunction(5);

使用循环代替递归： 很多时候，递归可以用循环来代替。循环通常比递归更节省栈空间。

// 递归版本 (可能栈溢出)
function recursiveSum(n) {
  if (n <= 0) {
    return 0;
  }
  return n + recursiveSum(n - 1);
}

// 循环版本 (更安全)
function iterativeSum(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}

console.log(recursiveSum(100));   //100以内递归没问题
console.log(iterativeSum(100000)); //10万以内循环没问题

尾递归优化 (Tail Call Optimization, TCO)： 某些编程语言（包括一些JS引擎）支持尾递归优化。尾递归是指递归调用是函数体的最后一个操作，并且没有使用递归调用的返回值。如果引擎支持TCO，它可以将尾递归转化为循环，从而避免栈溢出。

注意：目前，JS引擎对TCO的支持并不稳定，所以不要过度依赖它。

"use strict"; // 启用严格模式，某些引擎需要在严格模式下才能启用TCO

// 尾递归函数
function tailRecursiveSum(n, accumulator = 0) {
  if (n <= 0) {
    return accumulator;
  }
  return tailRecursiveSum(n - 1, accumulator + n); // 尾递归调用
}

// 非尾递归函数
function nonTailRecursiveSum(n) {
  if (n <= 0) {
    return 0;
  }
  return n + nonTailRecursiveSum(n - 1); // 非尾递归调用
}

console.log(tailRecursiveSum(10000, 0)); // 有可能被优化成循环
console.log(nonTailRecursiveSum(10000)); // 更有可能栈溢出

区分尾递归和非尾递归的关键在于，尾递归调用之后，函数是否还有其他操作。如果有，就不是尾递归。

使用异步操作： 将大型同步操作分解成小的异步任务，可以避免长时间占用栈。

setTimeout / setInterval： 可以将任务延迟到下一个事件循环中执行。

function processData(data) {
  let i = 0;
  function processChunk() {
    for (let j = 0; j < 1000; j++) { // 处理一小块数据
      console.log(data[i]);
      i++;
      if (i >= data.length) {
        return; // 处理完毕
      }
    }
    setTimeout(processChunk, 0); // 异步调用，释放栈
  }
  processChunk();
}

const largeData = Array(100000).fill("some data");
processData(largeData);

Promise / async/await： 可以使用 Promise 和 async/await 来管理异步操作。

async function processDataAsync(data) {
  for (let i = 0; i < data.length; i++) {
    await new Promise(resolve => setTimeout(resolve, 0)); // 异步等待
    console.log(data[i]);
  }
}

const largeData = Array(100000).fill("some data");
processDataAsync(largeData);

Web Workers： 可以将耗时的计算任务放到 Web Worker 中执行，Web Worker 运行在独立的线程中，不会阻塞主线程，也不会占用主线程的栈。

Trampoline function（蹦床函数）： 蹦床函数是一种避免栈溢出的技巧，它通过返回一个函数来延迟执行，而不是直接调用函数。这样，每次执行完一个函数后，栈就会被清空，从而避免栈溢出。

function trampoline(fn) {
  while (typeof fn === 'function') {
    fn = fn();
  }
  return fn;
}

function recursiveSumTrampoline(n, accumulator = 0) {
  if (n <= 0) {
    return accumulator;
  } else {
    return () => recursiveSumTrampoline(n - 1, accumulator + n); //返回一个函数
  }
}

const result = trampoline(recursiveSumTrampoline(100000));
console.log(result);

在这个例子中，recursiveSumTrampoline 函数不是直接调用自身，而是返回一个函数。trampoline 函数负责执行这些返回的函数，直到返回的值不是函数为止。这样，每次执行完一个 recursiveSumTrampoline 函数后，栈就会被清空，从而避免栈溢出。

五、表格总结：各种优化方法的对比

优化方法	优点	缺点	适用场景
避免无限递归	最直接有效	需要仔细检查代码逻辑	所有递归场景
循环代替递归	节省栈空间，更稳定	代码可读性可能降低	适合可以用循环实现的递归场景
尾递归优化 (TCO)	理论上可以避免栈溢出	JS引擎支持不稳定，不应过度依赖	适合尾递归场景
异步操作	可以分解大型任务，避免长时间占用栈	代码复杂度增加，需要处理异步逻辑	适合大型同步操作，需要长时间执行的任务
蹦床函数（Trampoline）	可以将递归转化为循环，避免栈溢出	代码可读性降低，需要理解蹦床函数的原理	适合递归场景，可以转化为蹦床函数的形式，避免栈溢出

六、调试技巧：定位栈溢出

当出现栈溢出错误时，如何找到问题的根源？

浏览器的开发者工具： 大多数浏览器都提供了开发者工具，可以查看调用栈信息。在控制台中，可以看到错误信息，以及导致错误的函数调用链。
断点调试： 在可能导致递归的函数中设置断点，逐步执行代码，观察调用栈的变化。
日志输出： 在递归函数中添加日志输出，记录函数的调用次数和参数值，帮助你理解递归的执行过程。

七、总结：Stack Overflow 没那么可怕

栈溢出（Stack Overflow）听起来很吓人，但只要理解了调用栈的原理，掌握了常见的解决方案，就能轻松应对。

记住，写代码就像做菜，要掌握火候，控制好食材的用量，才能做出美味佳肴。同样，写JS代码也要注意控制函数的调用，避免栈溢出，才能写出健壮的代码。

希望今天的分享对你有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复