这里指的通用套路是把递归执行改为在一个函数中循环执行。出于好奇心想找出一种把递归改为非递归的通用方式，并学习其中的思路。在网上找了几篇文章，结合函数调用栈的理解，感觉自己总结的应该比较全面了，所以记录下来跟大家交流下。
递归执行和普通嵌套执行的区别
先看一段简单的代码，计算阶乘的递归函数：
// n! = n * (n - 1) * (n - 2) * ... * 1
function getFactorial(n) {
if (n === 1) {
return 1;
} else {
return n * getFactorial(n - 1);
}
}递归调用简单点来说就是函数在执行过程中调用了自身。在下一次调用中如果没达到设定的递归结束条件，这个过程会一直持续下去；当递归条件结束时，调用链条中的函数会一个接一个的返回。如以上的代码，当 n === 1 时，就会触发递归的结束条件。
这里我们思考一下，递归函数的执行跟普通的函数嵌套执行有什么不同？:thinking:
其实没什么本质区别，递归调用和普通函数嵌套调用的层数一样也是有限的，层数的多少由递归结束条件来决定，无非是递归是自身调用自身（直觉上是代码的执行又回到了前面的行数）。接下我们康康函数嵌套执行时发生了什么。
计算机是如何嵌套执行函数的？
如果你了解计算机执行汇编/机器码的原理就会知道我接下来可能会说运行时函数调用栈。不过我打算用一种简单的描述来引导你明白或加深印象。
首先，我先问个问题：一个函数在某一次的执行过程中，是什么东西让这一次执行与另外一次执行是有所差别的？
简单点来说，可以把这个问题理解为函数执行上下文。这个上下文有以下内容：
- 参数；
- 函数体中定义的变量；
- 返回值；
举个函数嵌套执行的栗子，a 函数当前在执行中，这个时候其中有条语句要执行 b 函数，这个时候可以简单理解为计算机做了以下的事情：
- 保存 a 函数的执行上下文；
- 切换到 b 函数的上下文；
- 代码执行来到了 b 函数的开头，b 函数执行完并返回值；
- 切换回 a 函数的上下文，继续执行 a 函数剩余的代码；
这个过程就是运行时函数调用栈，用栈这种数据结构来实现了上下文的切换。
我们上面说到过递归调用可以类比为普通嵌套调用，无非是这一次的执行上下文切换到了下一次的执行上下文，并且注意还有代码执行的控制（前面说过，递归是又回到了前面行数执行）。通过以上的描述我们可以得到一些思路，模拟递归，要解决两个主要问题：
- 模拟函数调用栈，切换执行上下文；
- 控制语句的执行顺序，从后面的代码回到前面的代码执行；
执行上下文的切换，可以用栈来模拟。那么如何控制语句的执行顺序呢？下面来介绍一种 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(...) 开始调用“递归”函数。通过以上的代码可以看出，模板就是利用前面说到的两点来改写递归函数：
- 模拟函数调用栈，切换执行上下文；
- 利用 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