把递归函数改为非递归的通用套路

头像
deepfunc
    阅读 6 分钟
    English

    这里指的通用套路是把递归执行改为在一个函数中循环执行。出于好奇心想找出一种把递归改为非递归的通用方式，并学习其中的思路。在网上找了几篇文章，结合函数调用栈的理解，感觉自己总结的应该比较全面了，所以记录下来跟大家交流下。

    递归执行和普通嵌套执行的区别

    先看一段简单的代码，计算阶乘的递归函数：

    // n! = n * (n - 1) * (n - 2) * ... * 1
function getFactorial(n) {
  if (n === 1) {
    return 1;
  } else {
    return n * getFactorial(n - 1);
  }
}

    递归调用简单点来说就是函数在执行过程中调用了自身。在下一次调用中如果没达到设定的递归结束条件，这个过程会一直持续下去；当递归条件结束时，调用链条中的函数会一个接一个的返回。如以上的代码，当 n === 1 时，就会触发递归的结束条件。

    这里我们思考一下，递归函数的执行跟普通的函数嵌套执行有什么不同？:thinking:

    其实没什么本质区别，递归调用和普通函数嵌套调用的层数一样也是有限的，层数的多少由递归结束条件来决定，无非是递归是自身调用自身（直觉上是代码的执行又回到了前面的行数）。接下我们康康函数嵌套执行时发生了什么。

    计算机是如何嵌套执行函数的？

    如果你了解计算机执行汇编/机器码的原理就会知道我接下来可能会说运行时函数调用栈。不过我打算用一种简单的描述来引导你明白或加深印象。

    首先，我先问个问题：一个函数在某一次的执行过程中，是什么东西让这一次执行与另外一次执行是有所差别的？

    简单点来说，可以把这个问题理解为函数执行上下文。这个上下文有以下内容：

    1. 参数；
    2. 函数体中定义的变量；
    3. 返回值；

    举个函数嵌套执行的栗子，a 函数当前在执行中，这个时候其中有条语句要执行 b 函数，这个时候可以简单理解为计算机做了以下的事情：

    • 保存 a 函数的执行上下文；
    • 切换到 b 函数的上下文；
    • 代码执行来到了 b 函数的开头，b 函数执行完并返回值；
    • 切换回 a 函数的上下文，继续执行 a 函数剩余的代码；

    这个过程就是运行时函数调用栈，用栈这种数据结构来实现了上下文的切换。

    我们上面说到过递归调用可以类比为普通嵌套调用，无非是这一次的执行上下文切换到了下一次的执行上下文，并且注意还有代码执行的控制（前面说过，递归是又回到了前面行数执行）。通过以上的描述我们可以得到一些思路，模拟递归，要解决两个主要问题：

    1. 模拟函数调用栈，切换执行上下文；
    2. 控制语句的执行顺序，从后面的代码回到前面的代码执行；

    执行上下文的切换，可以用栈来模拟。那么如何控制语句的执行顺序呢？下面来介绍一种 Continuation 技术。

    Continuation

    来看个示例：

    function test() {
  console.log(1);
  console.log(2);
  console.log(3);
}

    以上的输出是 123，我们现在要重新封装一个函数，内容一样，但是改变这三句代码的执行顺序，2 输出后继续回到 1，第二次输出 2 时再继续输出 3 并结束，也就是输出 12123。当然，不是要你重复写多余的 console.log 的。

    计算机是通过 PC（Program Counter） 寄存器来取得下一条执行指令的地址。也就是说我们要找到一种模拟 PC 寄存器的工作的方案，看下面的代码：

    function test2() {
  let continuation = 0;
  let count = 0;
  
  while (true) {
    switch (continuation) {
      case 0:
        console.log(1);
        continuation = 1;
        break;
      case 1:
        console.log(2);
        count++;
        continuation = count < 2 ? 0 : 2;
        break;
      case 2:
        console.log(3);
        return;
    }
  }
}

    以上的方式就是用 continuation 变量来模拟 PC 寄存器的操作。根据逻辑来改变程序的执行路径，就可以模拟代码在我们想要的行数继续执行。下面就结合 Continuation 和模拟栈来康康怎么套路改写递归函数。

    改写递归函数

    先来看看套路的模板代码：

    function example(...args) {
  const $stack = []; // 模拟栈操作，切换函数上下文。
  let $result; // 记录每一次函数的执行结果。
  
  /**
   * 调用递归函数，压入新的函数上下文，入栈操作。
   * 函数的参数、函数里面声明的变量都要放入上下文中。
   */
  const $call = (...args) => {
    $stack.push({
      continuation: 0,
      ...args
    });
  };
  
  /**
   * 递归函数执行完毕，切换为上一次的函数上下文，出栈操作。
   * 并记录函数的返回值。
   */
  const $return = result => {
    $stack.pop();
    $result = result;
  };
  
  // 第一次调用。
  $call(...args);
  
  while ($stack.length > 0) {
    const current = $stack[$stack.length - 1];
    switch (current.continuation) {
      // 将递归函数的代码拆分，利用 continuation 控制代码执行。
      // ...
    }
  }
  
  // 返回最后的结果。
  return $result;
}

// 执行 example(...) 开始调用“递归”函数。

    通过以上的代码可以看出，模板就是利用前面说到的两点来改写递归函数：

    1. 模拟函数调用栈，切换执行上下文；
    2. 利用 Continuation 技术控制语句的执行顺序；

    那么前面的阶乘递归函数用这个模板来改写后是这个样子的：

    // n! = n * (n - 1) * (n - 2) * ... * 1
function getFactorial(n) {
  if (n === 1) {
    return 1;
  } else {
    return n * getFactorial(n - 1);
  }
}

// 改为非递归。
function getFactorial2(n) {
  const $stack = [];
  let $result;
  
  const $call = n => {
    $stack.push({
      continuation: 0,
      n
    });
  };
  
  const $return = result => {
    $stack.pop();
    $result = result;
  };
  
  $call(n);
  
  while ($stack.length > 0) {
    const current = $stack[$stack.length - 1];
    switch (current.continuation) {
      case 0: {
        const { n } = current;
        if (n === 1) {
          $return(1);
        } else {
          $call(n - 1);
          current.continuation = 1;
        }
        break;
      }

      case 1: {
        const { n } = current;
        $return(n * $result);
        break;
      }
    }
  }
  
  return $result;
}

    这里理解的重点在于如何拆分和改写代码，原则上调用递归函数的地方都要拆开。比如原代码是 return n * getFactorial(n - 1);，拆成了两个部分：

    case 0: {
  const { n } = current;
  if (n === 1) {
    $return(1);
  } else {
    $call(n - 1); // 调用递归函数的地方。
    current.continuation = 1;
  }
  break;
}

case 1: {
  const { n } = current;
  $return(n * $result); // 这里是拿到子递归的返回值并返回这次递归的结果。
  break;
}

    因为要模拟函数调用的过程，等到有返回值后才能再执行后面的代码，所以必须要这样拆分才行。同时还要注意的是，因为是用 while 循环来改写递归，所以当涉及一些语法糖或者 for..in 这种循环的时候，必须要改写为对应的 while 循环代码才行。

    下面再来看一个复杂点的例子，对象深拷贝递归函数：

    // JS 对象深拷贝，简单实现。
function deepCopy(obj, map = new Map()) {
  if (typeof obj === 'object') {
    let res = Array.isArray(obj) ? [] : {};
    if (map.has(obj)) {
      return map.get(obj);
    }
    map.set(obj, res);
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        res[key] = deepCopy(obj[key], map);
      }
    }
    return map.get(obj);
  } else {
    return obj;
  }
}

function deepCopy2(obj, map = new Map()) {
  const $stack = [];
  let $result = {};

  const $call = (obj, map) => {
    $stack.push({
      continuation: 0,
      obj,
      map,
      res: null,
      keys: [],
      key: ''
    })
  };

  const $return = obj => {
    $stack.pop();
    $result = obj;
  };

  $call(obj, map);

  while ($stack.length > 0) {
    const current = $stack[$stack.length - 1];

    switch (current.continuation) {
      case 0:
        {
          const { obj, map } = current;
          if (typeof obj === 'object') {
            current.res = Array.isArray(obj) ? [] : {};
            if (map.has(obj)) {
              $return(map.get(obj));
              break;
            }
            current.continuation = 1;
            break;
          } else {
            $return(obj);
            break;
          }
        }

      case 1:
        {
          const { obj, map, res } = current;
          map.set(obj, res);
          for (const key in obj) {
            if (obj.hasOwnProperty(key)) {
              current.keys.push(key);
            }
          }
          current.continuation = 2;
          break;
        }

      case 2:
        {
          if (current.keys.length > 0) {
            current.key = current.keys.shift();
            const { obj, map, key } = current;
            $call(obj[key], map);
            current.continuation = 3;
            break;
          } else {
            $return(map.get(current.obj));
            break;
          }
        }

      case 3:
        {
          current.res[current.key] = $result;
          current.continuation = 2;
          break;
        }
    }
  }

  return $result;
}

    这个例子就出现了 for..in 这种循环，所以必须要先变成 while 循环可以处理的方式；还有一点要注意的是 res[key] = deepCopy(obj[key], map); 这句代码中调用了递归，那么 key 也在需要保存的上下文变量中。

    总结

    理论上所有的递归函数都可以用以上的模板套路改写为非递归形式。但我觉得这种方式其实没有多大的实用性，本质上也是模拟了函数调用栈的实现，而且这种改写会使代码更新复杂和难以理解。但另一方面，我觉得理解和学习这种改写方式还是有价值的，可以加深函数调用栈和计算机怎么运行代码控制的理解，还是有点意思的。

    欢迎 star 和关注我的 JS 博客：小声比比 JavaScript

    函数计算机原理javascript
    deepfunc
    776 声望634 粉丝
    « 上一篇
    技巧与思维可兼得——读 TypeScript of Redux 有感
    下一篇 »
    Flutter/布局：彻底搞懂 Align 是怎么对齐的

    引用和评论

    推荐阅读
    头像
    MVVM 到底比 MVC 好在哪里？

    deepfunc阅读 1.8k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新