当前位置：首页 > 文章列表 > 文章 > 前端 > 递归函数解析：状态、顺序与返回详解

递归函数解析：状态、顺序与返回详解

2025-09-21 08:00:47 0浏览收藏

从现在开始，我们要努力学习啦！今天我给大家带来《递归函数解析：状态、顺序与返回值详解》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

深入理解递归函数：全局状态、执行顺序与返回值解析

本文深入解析了一个JavaScript递归函数在处理全局数组时的行为，阐明了其如何通过递归调用栈的“回溯”阶段向全局数组添加元素，以及为何尽管存在返回空数组或数字的基线条件，最终却能向初始调用者返回一个填充完毕的数组。文章强调了全局状态、执行顺序和调试工具在理解复杂递归逻辑中的关键作用。

递归函数行为分析

在JavaScript中，递归函数是一种强大的编程范式，它通过调用自身来解决问题。然而，当递归与全局状态（如全局变量）结合时，其行为可能会变得复杂，尤其是在理解函数返回值和副作用方面。下面是一个示例函数，它旨在创建一个包含指定数量 x 个 n 的数组：

let arr = []; // 全局数组

function rep(x, n) {
  // 基线条件1：x为负数时返回空数组
  if (Math.sign(x) === -1) {
    return [];
  }

  // 基线条件2：x小于1时返回数字1
  if (x < 1) {
    return 1;
  } else {
    // 递归调用：递减x
    rep(x - 1, n);
  }

  // 在递归调用之后，向全局数组添加元素
  arr.push(n);
  // 返回全局数组
  return arr;
}

console.log(rep(5, 5)); // 期望输出 [5, 5, 5, 5, 5]

这个函数能够成功生成预期的数组，例如 rep(5, 5) 输出 [5, 5, 5, 5, 5]。然而，初学者可能会对以下问题感到困惑：

为什么函数最终能够返回一个填充好的数组，而不是基线条件中返回的 [] 或 1？
基线条件中的返回值去了哪里，为什么它们没有影响最终的 console.log 输出？

要解答这些疑问，我们需要深入理解递归函数的执行流程，特别是调用栈（Call Stack）的工作原理以及全局变量的影响。

递归执行流程详解

理解上述函数的关键在于其执行顺序和全局变量 arr 的作用。

1. 全局变量 arr 的作用

arr 在函数外部声明，这意味着它是一个全局变量，所有对 rep 函数的调用都共享和修改同一个 arr 实例。这是函数产生副作用（Side Effect）的关键，即函数不仅返回一个值，还改变了外部状态。

2. 调用栈的“下潜”阶段

当 rep(5, 5) 被调用时，执行流程如下：

rep(5, 5) 被调用。x 不满足基线条件。
执行 rep(x - 1, n)，即 rep(4, 5)。当前 rep(5, 5) 的执行暂停，等待 rep(4, 5) 返回。
rep(4, 5) 被调用。x 不满足基线条件。
执行 rep(x - 1, n)，即 rep(3, 5)。当前 rep(4, 5) 的执行暂停。
...这个过程一直持续到 rep(1, 5) 调用 rep(0, 5)。

3. 基线条件的触发与返回值

当 rep(0, 5) 被调用时：

x 为 0，满足 x < 1 的条件。
rep(0, 5) 执行 return 1; 并返回。

此时，调用栈开始“回溯”。

4. 调用栈的“回溯”阶段

这是理解函数行为的关键部分。当 rep(0, 5) 返回 1 时，这个值被 rep(1, 5) 接收。然而，rep(1, 5) 并没有对这个返回值做任何处理。它继续执行其暂停的代码：

rep(1, 5) 恢复执行：
- rep(0, 5) 返回 1，这个值被 rep(1, 5) 接收但未被使用。
- 接着执行 arr.push(n)，即 arr.push(5)。此时，全局 arr 变为 [5]。
- 执行 return arr;，rep(1, 5) 返回 [5]。
rep(2, 5) 恢复执行：
- rep(1, 5) 返回 [5]，这个值被 rep(2, 5) 接收但未被使用。
- 接着执行 arr.push(n)，即 arr.push(5)。此时，全局 arr 变为 [5, 5]。
- 执行 return arr;，rep(2, 5) 返回 [5, 5]。
这个过程继续向上，直到最初的 rep(5, 5)：
- rep(5, 5) 恢复执行：
- rep(4, 5) 返回 [5, 5, 5, 5]，这个值被 rep(5, 5) 接收但未被使用。
- 接着执行 arr.push(n)，即 arr.push(5)。此时，全局 arr 变为 [5, 5, 5, 5, 5]。
- 执行 return arr;，rep(5, 5) 返回 [5, 5, 5, 5, 5]。

最终，console.log(rep(5, 5)) 接收到的就是这个完整的 [5, 5, 5, 5, 5] 数组。

解答核心疑问

“为什么它不返回 [] 或 1？”

它确实返回了！当 x 变为 0 时，rep(0, 5) 返回 1。当 x 变为 -1 时（如果发生），rep(-1, 5) 返回 []。

但是，这些返回值只被其直接的调用者（即上一层递归函数）接收。由于 rep 函数的结构是：

  // ...
  else {
    rep(x - 1, n); // 递归调用，其返回值被忽略
  }
  arr.push(n);    // 修改全局状态
  return arr;     // 返回全局状态

上一层递归函数在接收到返回值后，并没有将其继续传递出去，而是继续执行 arr.push(n) 和 return arr。因此，只有在最外层（即 console.log 直接调用的 rep(5, 5)）的 return arr 语句，其返回的值才会被 console.log 捕获并打印。中间层的返回值都被“吞噬”了。

编程实践与优化建议

这种利用全局变量和递归的副作用来实现功能的方式虽然有效，但在实际开发中通常不被推荐，因为它增加了代码的复杂性和维护难度，使得函数不够“纯净”（pure）。

1. 避免全局状态

全局变量使得函数在不同调用之间产生耦合，难以预测和测试。更好的做法是让函数尽可能独立，不依赖或修改外部状态。

2. 使用调试器

对于理解递归函数的复杂执行流程，使用调试器（如Chrome开发者工具中的JavaScript调试器）是极其有效的。通过设置断点并逐步执行代码，您可以观察到调用栈的变化、变量的值以及函数的返回路径，从而清晰地理解每个步骤。

3. 重构为更纯净的函数

为了提高代码的可读性、可维护性和可测试性，可以重构此函数，避免使用全局变量。以下是两种常见的重构方法：

方法一：使用累加器参数

将要构建的数组作为参数传递给递归函数，并在每次递归调用中更新它。

function repWithAccumulator(x, n, accumulator = []) {
  if (x <= 0) { // 基线条件：x小于等于0时停止
    return accumulator;
  }

  // 先进行递归调用，将元素添加到累加器中
  repWithAccumulator(x - 1, n, accumulator);

  // 在回溯阶段添加当前层的元素
  accumulator.push(n); 

  return accumulator;
}

console.log(repWithAccumulator(5, 5)); // 输出 [5, 5, 5, 5, 5]
console.log(repWithAccumulator(2, 5)); // 输出 [5, 5]
console.log(repWithAccumulator(0, 5)); // 输出 []

注意： 这种方法虽然避免了全局变量，但 accumulator 仍然是一个在函数调用链中共享和修改的对象。如果需要完全的函数式纯净，应考虑方法二。

方法二：每次返回新数组（更函数式）

在每次递归调用中都创建一个新的数组并返回，而不是修改共享的数组。这符合函数式编程中不可变数据的原则。

function repPure(x, n) {
  if (x <= 0) { // 基线条件：x小于等于0时返回空数组
    return [];
  }

  // 递归调用获取子数组
  const subArray = repPure(x - 1, n);

  // 将当前元素添加到子数组的副本中，并返回新数组
  // 使用 spread operator 创建新数组，避免修改 subArray
  return [...subArray, n]; 
}

console.log(repPure(5, 5)); // 输出 [5, 5, 5, 5, 5]
console.log(repPure(2, 5)); // 输出 [5, 5]
console.log(repPure(0, 5)); // 输出 []

这种 repPure 函数更加清晰和可预测，因为它不依赖任何外部状态，并且每次都返回一个新数组，不会产生副作用。