JS尾递归

发表于

源于前端群里面的一道社招笔试题

实现一个斐波拉契数列， 已知第一项为0，第二项为1，第三项为1，后一项是前两项之和,如下，即f(n) = f(n - 1) + f(n -2)。

1
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, ...

拿到这个题目，二话没想就写了,扔到群里

1
2
3
4
5
function f(n) {
    if(n === 0) return0;
    if(n === 1) return1;
    return f(n - 1) + f(n -2);
}

群里有大神提醒这个题放到社招题里面明显没这么简单，每次递归调用都会呈指数往调用栈里增加记录调用帧，这样做，当项比较多，就会出现栈溢出的！！！

也就是，以上Code只能说刚刚及格，正确姿势应该用尾递归优化，调用帧保持只有一个。

正解就是：

1
2
3
4
5
6
function f(n, prev, next) {
    if(n <= 1) {
        return next;
    }
    return f(n - 1, next, prev + next);
}

下面来复习一下知识点：尾调用和尾递归。

尾调优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 尾递归方式
function factorial1(n,total) {
    if (n === 1) {
        return total;
    }
    return factorial1(n - 1, n * total);
}

// 普通递归方式
function factorial2(n) {
    if (n === 1) {
        return 1;
    }
    return n * factorial2(n - 1);
}

console.log(factorial1(25,1)); // 1.5511210043330984e+25 
console.log(factorial2(25)); // 1.5511210043330986e+25

在知道尾递归之前，我们要直到什么是尾调用优化，因为尾调用优化是尾递归的基础。
尾调用就是：在函数的最后一步调用另一个函数。

1
2
3
function f() {
  return g()
}

最后一步必须是调用另一函数，而不能是一个常量或是一个表达式，如 return y或 return g() + 1

尾调用优化的原理是什么？

按照阮一峰老师在es6的函数扩展中的解释就是：

尾调用之所以与其他调用不同，就在于它的特殊的调用位置。

我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。

尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

这里的“调用帧”和“调用栈”，说的应该就是“执行环境”和“作用域链”。因为尾调用时函数的最后一部操作，所以不再需要保留外层的调用帧，而是直接取代外层的调用帧，所以可以起到一个优化的作用。

尾调用

尾调用是指某个函数的最后一步是调用另一个函数。

尾调用之所以与其他调用不同，就在于它的特殊的调用位置。

以下三种情况都不是尾调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 情况一
function f(x) {
    let y = g(x);
    return y;
}

// 情况二
function f(x) {
    return g(x) + 1;
}

// 情况三
function f(x) {
    g(x);
}

情况一是调用函数g之后，还有赋值操作，所以不属于尾调用，即使语义完全一样。情况二也是属于调用后还有操作。情况三等同于：

1
2
g(x);
return undefined;

函数调用会在内存形成一个“调用记录”，又称“调用帧”，保存调用位置和内存变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，依次类推。所有的调用帧，就形成一个“调用栈”。

尾调用由于是函数的最后一步操作，所有不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function f() {
    let m = 1;
    let n = 2;
    return g(m + n);
}
f();

// 等同于
function f() {
    return g(3);
}
f();

// 等同于
g(3);

上面代码中，如果函数g不是尾调用，函数f就需要保存内部变量m和n的值、g的调用位置等信息。但由于调用g之后，函数f就结束了，所以执行到最后一步，完全可以删除f(x)的调用帧，只保留g(3)的调用帧。

这就叫做“尾调用优化”（Tail call optimization），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。

如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”。

注意:只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。

1
2
3
4
5
6
7
function addOne(a) {
    var one = 1;
    function inner(b) {
        return b + one;
    }
    return inner(a);
}

上面的函数不会进行尾调用优化，因为内层函数inner用到了外层函数addOne的内部变量one。这一是闭包常驻内存的原因！！！

尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

递归非常耗费内存，因为需要同时保存成百上千调用帧，很容易发生“栈溢出”错误。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

1
2
3
4
5
function factorial(n) {
    if (n === 1) return1;
    return n * factorial(n - 1);
}
console.log(factorial(5)); // 120

上面最多保存n个调用记录，复杂度是O(n)。

如果改成尾递归，只保留一个调用记录，复杂度O(1)。

1
2
3
4
5
function factorial(n, total) {
    if (n === 0) return total;
    return factorial(n - 1, n * total);
}
console.log(factorial(5, 1)); // 120

下面回到我们的主题，计算Fibonacci数列。

1
2
3
4
5
6
function fibonacci(n) {
    if(n <= 1) return 1;
    return fibonacci(n -1) + fibonacci(n -2);
}
console.log(fibonacci(10)); // 89
console.log(fibonacci(50)); // stack overflow

上面不使用尾递归，项数稍大点就发生”栈溢出“了。

1
2
3
4
5
6
7
function fibonacci(n, prev, next) {
    if(n <= 1) return next;
    return fibonacci(n-1, next, prev + next);
}
console.log(fibonacci(10, 1, 1)); // 89
console.log(fibonacci(100, 1, 1)); // 573147844013817200000
console.log(fibonacci(1000, 1, 1)); // 7.0330367711422765e+208

上面项数再大都状态良好。

柯理化改写

尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。但是这样的话就会增加初始入参，比如fibonacci(10, 1, 1)，后面的两个参数1和1意思不明确，直接用fibonacci(100)才是习惯用法。所以需要在中间预先设置好初始入参，将多个入参转化成单个入参的形式，叫做函数柯理化。通用方式为：

1
2
3
4
5
6
7
8
function curry(fn) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function() {
        var innerArgs = Array.prototype.slice.call(arguments);
        var finalArgs = innerArgs.concat(args);
        return fn.apply(null, finalArgs);
    }
}

用函数柯理化改写阶乘

1
2
3
4
5
6
7
function tailFactorial(n, total) {
    if(n === 1) return total;
    return tailFactorial(n - 1, n * total);
}

var factorial = curry(tailFactorial, 1); 
console.log(factorial(5)); // 120

同样改写斐波拉契数列

1
2
3
4
5
6
7
8
9
function tailFibonacci(n, prev, next) {
    if(n <= 1) return next;
    return tailFibonacci(n - 1, next, prev + next);
}

var fibonacci = curry(fibonacci, 1, 1);
console.log(fibonacci(10)); // 89
console.log(fibonacci(100)); // 573147844013817200000
console.log(fibonacci(1000)); // 7.0330367711422765e+208

ES6改写

柯理化的过程其实是初始化一些参数的过程，在ES6中，是可以直接函数参数默认赋值的。

用ES6改写阶乘

1
2
3
4
5
const factorial = (n, total = 1) => {
    if(n === 1) return total;
    return factorial(n - 1, n * total);
}
console.log(factorial(5)); // 120

用ES6改写斐波拉契数列

1
2
3
4
5
6
7
const fibonacci = (n, prev = 1, next = 1) => {
    if(n <= 1) return next;
    return fibonacci(n - 1, next, prev + next);
}
console.log(fibonacci(10)); // 89
console.log(fibonacci(100)); // 573147844013817200000 
console.log(fibonacci(1000)); // 7.0330367711422765e+208

用ES6极大方便了算法运用！

严格模式

ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。

这是因为在正常模式下，函数内部有两个变量，可以跟踪函数的调用栈。

  • func.arguments：返回调用时函数的参数。
  • func.caller：返回调用当前函数的那个函数。

尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。

1
2
3
4
5
6
function restricted() {
  'use strict';
  restricted.caller;    // 报错
  restricted.arguments; // 报错
}
restricted();

总结

综上，这个问题解决的思路是：

  1. 尾递归+函数柯理化；
  2. 尾递归+ES6默认赋值；