[翻译]JS的递归与TCO尾调用优化

这两天搜了下JS递归的相关文章&＃xff0c; 觉得这篇文章很不错&＃xff0c; 就顺手翻译了下&＃xff0c;也算给自己做个笔记&＃xff0c;题目是我自己加的。原文很长&＃xff0c;写得也很详尽&＃xff0c;这里并非逐字翻译&＃xff0c; 而是作者所讲的主要概念加上我自己的一些理解&＃xff0c;本文中解决方案的实际意义并不是特别大&＃xff0c;但算法的逻辑挺有意思&＃xff0c;不过也略抽象&＃xff0c;理解需要花点时间&＃xff08;囧&＃xff0c;估计我太闲了&＃xff09; 文中的用例?全部来自原文&＃xff1a;

原文链接&＃xff1a;&＃xff08;原题为&＃xff1a;理解JS函数式编程中的递归&＃xff09;
Understanding recursion in functional Javascript programming

递归存在的问题

在JS的递归调用中&＃xff0c;JS引擎将为每次递归开辟一段内存用以储存递归截止前的数据&＃xff0c;这些内存的数据结构以“栈”的形式存储&＃xff0c;这种方式开销非常大&＃xff0c;并且一般浏览器可用的内存非常有限。
下面这个函数使用递归的方式求和&＃xff1a;

//使用递归将求和过程复杂化
function sum(x, y) {if (y > 0) {return sum(x &＃43; 1, y - 1);} else {return x;}
}sum(1, 10); // &＃61;> 11

当运算规模较小时&＃xff0c;这种方式可以正常输出结果&＃xff0c;可是当把参数变为sum(1,100000)时&＃xff0c;就会造成“栈溢出错误&＃xff08;stack overflow 这可不是那个问答网站哦&＃xff09;”浏览器就会报错Uncaught RangeError: Maximum call stack size exceeded

尾调用优化 Tail Call Optimisation

在有些语言中&＃xff0c;执行尾递归时将会被自动识别&＃xff0c;继而在运行时优化成循环的形式&＃xff0c;这种优化逻辑大多是Tail Call Optimisation尾部调用优化&＃xff0c;&＃xff08;尾调用概念就是在函数最后一步调用其他函数&＃xff0c;尾递归即在最后一步调用自身&＃xff09;关于尾递归与尾调优化更详细的概念解读可以看下阮一峰的这篇文章? 尾调用优化 &＃xff08;也就是说执行尾递归时&＃xff0c;程序无须储存之前调用栈的值&＃xff0c;直接在最后一次递归中输出函数运算结果&＃xff0c;这样就大大节省了内存&＃xff0c;而这种优化逻辑就是在代码执行的时候将其转换为循环的形式&＃xff09;
另外在Babel的说明文档中也提到了尾调用? BABEL Tail Calls

以上的sum函数&＃xff0c; 使用尾递归&＃xff0c;将是这个样子&＃xff1a;

function sum(x, y) {function recur(a, b) {if (b > 0) {return recur(a &＃43; 1, b - 1);} else {return a;}}
//尾递归即在程序尾部调用自身&＃xff0c;注意这里没有其他的运算return recur(x, y);
}sum(1, 10); // &＃61;> 11

以上这种写法在有TCO机制的语言中将在执行时内部优化成循环形式而不会产生“栈溢出”错误&＃xff0c;注意&＃xff0c;在当前版本的JS中以上写法是无效的&＃xff01;因为在当前普遍的JS版本&＃xff08;ES5&＃xff09;中并没有这个优化机制。但是在ES6中已经实现了这个机制 在当前普遍的JS版本中我们只能使用替代方案。

这里插一句&＃xff1a;使用Babel可以在当前JS版本中用ES6的特性&＃xff08;Babel可以将使用ES6特性编程的代码转换成兼容的ES5形式&＃xff09;&＃xff0c;将原sum()函数输入Babel的编译器后&＃xff0c;确实被转换成了循环的形式&＃xff0c;感兴趣的同学可以自己试试&＃xff1a;
BABEL编译器转换sum()函数的结果如下&＃xff08;对于算法逻辑不太感兴趣的同学看到这里就差不多了&＃xff0c;
可以直接将一些深递归放到Babel中转换下就可以了&＃xff09;&＃xff1a;

var _again &＃61; true;_function: while (_again) {var x &＃61; _x,y &＃61; _x2;_again &＃61; false;if (y > 0) {_x &＃61; x &＃43; 1;_x2 &＃61; y - 1;_again &＃61; true;continue _function;} else {return x;} } }

替代方案

在当前的JS版本&＃xff08;ES5&＃xff09;中可以使用以下方式来优化递归。
我们可以定义一个Trampolining&＃xff08;蹦床&＃xff09;函数来解决参数过大造成的“栈溢出”问题。

//放入trampoline中的函数将被转换为函数的输出结果
function trampoline(f) {while (f && f instanceof Function) {f &＃61; f();}return f;
}function sum(x, y) {function recur(x, y) {if (y > 0) {return recur.bind(null, x &＃43; 1, y - 1);} else {return x;}}
//return trampoline(recur.bind(null, x, y));
}sum(1, 10); // &＃61;> 11

在以上的方案中&＃xff0c; trampoline函数接受一个函数作为参数&＃xff0c;如果参数是函数就被执行后返回&＃xff0c;如果参数不是函数将被直接返回&＃xff0c;嵌套函数recur中&＃xff0c;当y>0时返回一个参数更新了的函数&＃xff0c;这个函数被转入trampoline中循环&＃xff0c;直到recur返回x&＃xff0c;x不是函数于是在trampoline中被直接返回。原文中作者对于每一步都有详尽的解释&＃xff0c; 感兴趣的同学建议可以去看看原文。简单地说&＃xff1a;以上逻辑就是将递归变成一个条件&＃xff0c; 而外层trampoline函数执行这个条件判断并循环。好吧&＃xff0c;接下来更绕的来了-_-#

以上这种方法虽然解决了大参数递归的问题&＃xff0c;但是却需要将代码转换成trampoline的模式&＃xff0c;比较不灵活&＃xff0c; 下面作者介绍了一种更灵活方便的方案。

更好的方案

作者在此警告&＃xff1a;前方高能&＃xff0c; 该方法不需要改动源码&＃xff0c;但是略抽象&＃xff0c;理解可能需要花点时间。


function tco(f) {var value;var active &＃61; false;var accumulated &＃61; [];return function accumulator() {accumulated.push(arguments);if (!active) {active &＃61; true;while (accumulated.length) {value &＃61; f.apply(this, accumulated.shift());}active &＃61; false;return value;}}
}
//这种方式确实有点奇怪&＃xff0c;但的确没有改动很多源码&＃xff0c;只是以直接量的形式使用tco函数包裹源码
var sum &＃61; tco(function(x, y) {if (y > 0) {return sum(x &＃43; 1, y - 1)}else {return x}
});
sum(1, 10) // &＃61;> 11
sum(1, 100000) // &＃61;> 100001 没有造成栈溢出

• 首先以函数表达式的形式将tco函数的返回值赋给sum&＃xff0c;tco函数的返回值是accumulator函数&＃xff0c;也就是说当执行sum(1,10)的时候即是在执行accumulator(1,10)&＃xff0c;牢记这点对后续理解很有帮助。

• accumulator是个闭包&＃xff0c;这意味着可以访问在tco中定义的value&＃xff0c;active以及accumulated

• 前面已经讲了&＃xff0c;当我们执行sum的时候相当于是执行accumulator&＃xff0c;于是accumulator 将实参传入accumulated数组&＃xff0c;比如执行sum(1,10)那么这里传入的就是类数组对象[1&＃xff0c;10]&＃xff0c;accumulated现在就是一个length为1的二维数组。

• 进入while循环&＃xff0c;这里是关键&＃xff1a;value &＃61; f.apply(this, accumulated.shift()); 在这条语句中&＃xff0c; f表示外包的匿名函数&＃xff0c;它判断y的值后返回一个sum &＃xff08;这里很容易产生混乱&＃xff0c;如果我们忽略while循环中的细节&＃xff0c;很容易将其误认为也是递归&＃xff09;

• 匿名函数f判断y的值返回一个sum&＃xff0c;sum的参数被改变了&＃xff0c;前面提到执行sum相当于执行accumulator&＃xff0c;于是新的参数被加入到了accumulator但是因为这时active的值依然是true&＃xff08;因为现在执行流还在while循环里&＃xff09;&＃xff0c;所以执行这个被返回的sum就会得到一个undefined的值&＃xff0c;value被赋值为undefined

• 可是因为执行了被返回的sum&＃xff08;也就是执行了accumulator&＃xff09;尽管没有进入if(!active),但是执行了第一条语句&＃xff0c;所以accumulated被重新push进了在外包的匿名函数中被修改的实参&＃xff0c;所以while循环继续&＃xff08;理解这里是关键&＃xff09;。

• while循环一直执行到accumulated中的值为空&＃xff0c; 在value &＃61; f.apply(this, accumulated.shift()); 每次return一次sum后accumulated 都会被重新推入一个实参&＃xff08;accumulated的length始终为1&＃xff09;&＃xff0c;直到匿名的外包函数return出x&＃xff0c;于是x的值被赋给value被返回出来。

注意&＃xff1a;以上主要还是根据我自己的理解来阐述逻辑&＃xff0c; 确实比较绕&＃xff0c;作者原文写得更加详细

总结

以上方法就是在不改动源码的情况下实现的TCO优化&＃xff0c; 作者在该文章的Update中介绍了另外的非TCO的优化递归的方法&＃xff0c;不过篇幅有限就不再贴出来了&＃xff0c;就我自身感觉而言&＃xff0c;如果对算法的逻辑实现不感兴趣&＃xff0c; 大可以直接用Babel将深递归转换成优化后的形式。另外这也有一篇介绍JS中递归与循环的的文章&＃xff0c;其中也有TCO优化的相关介绍&＃xff1a;
?Recursion in Functional Javascript

感觉以上代码的实际意义可能并没有那么大&＃xff0c; 为了写这篇博客也是耗了我一天&＃xff0c;囧rz&＃xff0c;但也挺佩服这哥们&＃xff1a;“我靠&＃xff0c;这也能想得到&＃xff01;”