尾调用及递归优化

讨论尾调用前，先看函数正常调用时其形成的堆栈（stack frame）情况。

函数的调用及调用堆栈

先看一个概念：调用堆栈（call stack），或叫调用帧（stack frame）。

我理解的调用堆栈：因为函数调用后，流程会进入到被调用函数体，此时需要传入一些入参，这些入参需要存放到一个位置，另外当函数调用结束后，执行流程需要返回到被调用的地方，这个返回的地方也需要被记录下来。所以会为这次函数调用分配一个存储区域，存放调用时传入的入参，调用结束后返回的地址。这个存储区域保存的都是跟本次函数调用相关的数据，所以，它是该函数的调用堆栈。

考察下面的示例代码：

function g(x) {
  return x; // (C)
}
function f(a) {
  let b = a + 1;
  return g(b); // (B)
}
console.log(f(2)); // (A)

下面模拟 JaavScript 引擎在执行上面代码时的流程，

• 首先对于全局作用哉来说，存在两个字面量（不算上全局 window） f,g，所以一开始执行时，已经默认有一个全局的堆栈信息了，看起来大概是这样子：

+-------------------------------------+
|                                     |
|         f=function(a){...}          |
|         g=function(x){...}          |
|                                     |
+-------------------------------------+

• 调用 f(2) 并生成调用堆栈，代码执行流程进入 f 的函数体中。形成了第一个 stack frame，里面有 f(2) 入参 a，函数体中声明的变量 b 以及被调用的位置 A。此时的堆栈是下面的样子：

+-------------------------------------+
|                                     |
|         a=2                         |
|         b=2+1                       |
|         Line A                      |
|                                     |
+-------------------------------------+
|                                     |
|         f=function(a){...}          |
|         g=function(x){...}          |
|                                     |
+-------------------------------------+

• 在函数 f 的函数体中，调用 g 代码流程进入 g 的函数体，同样，为其生成相应的调用堆栈，保存入参 x，调用位置 B。

+-------------------------------------+
|                                     |
|         x=3                         |
|         Line B                      |
|                                     |
+-------------------------------------+
|                                     |
|         a=2                         |
|         b=2+1                       |
|         Line A                      |
|                                     |
+-------------------------------------+
|                                     |
|         f=function(a){...}          |
|         g=function(x){...}          |
|                                     |
+-------------------------------------+

• 函数 g 中 return 进行返回后，因为 g 已经完成使命，其相关的调用堆栈被销毁。代码执行流程回到 g 被调用的地方 A，相当于代码执行流程回到了 f 函数体中。此时的堆栈是这样的：

+-------------------------------------+
|                                     |
|         a=2                         |
|         b=2+1                       |
|         Line A                      |
|                                     |
+-------------------------------------+
|                                     |
|         f=function(a){...}          |
|         g=function(x){...}          |
|                                     |
+-------------------------------------+

• f 函数体中拿到 g 的返回后，什么也没干，直接 return 返回，此时结束了 f 的执行，流程回到 f 被调用的地方 A，即流程回到全局作用域，销毁 f 的调用堆栈。此时的堆栈为：

+-------------------------------------+
|                                     |
|         f=function(a){...}          |
|         g=function(x){...}          |
|                                     |
+-------------------------------------+

• 全局作用域中，得到返回值后将其打印输出结束了整段代码。

尾调用

如果一个函数最后一步是调用另一个函数，则这个调用为尾调用。比如：

function g(x) {
  return x;
}
function f(y) {
  var a = y + 1;
  return g(a);
}

但下面这个就不算尾调用了：

function g(x) {
  return x;
}
function f(y) {
  var a = y + 1;
  return g(a) + 1;
}

因为这里 f 中最后一步操作并不是对 g 的调用，在拿到 g 函数的返回后还进行了另外的操作 g(a)+1。其代码相当于如下的形式：

function g(x) {
  return x;
}
function f(y) {
  var a = y + 1;
  var tmp = g(a);
  var result = tmp + 1;
  return result;
}

经过改造后就能很明显看出，其中对 g 的调用不是尾调用了。

尾调用的判定

函数的调用形式

首先，JavaScript 中调用函数是多样的，只要这是另一函数中最后一步操作，都可称作尾调用。比如以下的函数调用形式：

• 正常函数调用：fn(...)
• 访问对象属性并调用：obj.method(...)
• 通过 Function.prototype.all 调用：fn.call(...)
• 通过 apply 调用：fn.apply(...)

表达式中的尾调用

因为剪头函数的函数体可以是表达式，所以表达式最终的步骤是什么决定了该剪头函数中是否包含尾调用。

能够形成尾调用的表达式有如下这些，

• 三元表达式：?:

const a = x => x ? f() : g();

其中 f() 和 g() 都是尾调用，表达式最终结果要么是对 f() 的调用，要么是对 g() 的调用。

• 逻辑或表达式：||

const a = () => f() || g();

上面示例中， f() 不是尾调用，而对 g() 的调用是尾调用。这点可通过下面转换后的等效代码看出来：

const a = () => {
    let fResult = f(); // not a tail call
    if (fResult) {
        return fResult;
    } else {
        return g(); // tail call
    }
};

a||b 的意思是如果 a 真则返回 a 的值，否则继续判定 b，此时无论 b 真假与否，整个表达式的返回都是 b。

所以从上面的转换中看出，对于 f() 的调用，需要进一步对其返回值进行处理，而不是直接将 f() 进行返回，所以 f() 并不是函数体中最后一步操作，但 g() 是，因为对于 g() 的返回值没有其他操作，而是直接返回。

• 逻辑与表达式：&&

const a = () => f() && g();

与逻辑或表达式雷同，这里需要对 f() 的返回值进一步处理，进行判定后决定整个表达式的执行，所以 f() 不是尾调用，而 g() 是。 其等效的代码如下：

const a = () => {
    let fResult = f(); // not a tail call
    if (!fResult) {
        return fResult;
    } else {
        return g(); // tail call
    }
};

• 逗号表达式：expression，expression

const a = () => (f() , g());

这个就比较好理解了，逗号表达式是依次执行的，整个表达式返回结果为最后一个表达式。所以这里 f() 不是尾调用，g() 是。

需要注意的是，单独的函数调用并不是尾调用，比如下面这样：

function foo() {
    bar(); // this is not a tail call in JS
}

这里 bar() 并不是尾调用，因为函数体中，最后一步操作并不是返回 bar()，而是隐式地返回 undefined。其等效的代码为：

function foo() {
    bar();
    return undefined;
}

像这种情况其实并不能简单地通过加一个 return 将其变成尾调用。因为这样就改变了 foo 的返回值，其功能有可能就变了，调用方就不能再依赖于 foo() 返回的是 undefined。

尾调用优化

回到最开始的那个示例：

function g(x) {
  return x; // (C)
}
function f(a) {
  let b = a + 1;
  return g(b); // (B)
}
console.log(f(2)); // (A)

这里 f(a) 中就包含一个尾调用 g(b)。并且通过前面的调用堆栈的分析，可以知道，每一次函数调用都需要生成相应的调用堆栈，会有存储的开销。

如果仔细看前面调用过程的分析，会发现，在 f(a) 函数体中，当我们调用 g(b) 时，就可以将 f(a) 的调用堆栈直接销毁了，其中 f(a) 相关的内容不会再被用到，除了其中关于 f(a) 被调用位置的记录。这个位置需要在调用 g(b) 后返回。

所以，完全可以省掉 f(a) 作为中间商这一步，将 f(a) 反返回地址告诉 g(x)，这样 g(x) 在执行完成后直接返回到代码中 A 标记处。

上面优化后的执行场景下，其调用堆栈的分配则变成了：

• 调用 f(2)，为其分配堆栈
• 调用 g(b)，为其分配堆栈。同时发现 g(b) 在 f(a) 的末尾直接被返回， f(a) 中存储的变量 b 这些在后续执行中不会再被用到，将 f(a) 的调用规模销毁。
• 执行 g(b) 并返回到 A 标记处。

最最开始不同之处在于，在创建 g(b) 的调用堆栈时，同时销毁了 f(a) 的调用堆栈。这当然是 JavaScript 引擎去实现的。

其好处显而易见，在函数连续调用过程中，堆栈数没有增加。假如不止一次尾调用， g(x) 中还存在对另外函数的尾调用，这样的优化可以持续下去，也就是说，堆栈数并没有随着函数调用的增多而增加。

利用这个特性，我们可以将一些不是尾调用的函数想办法改成尾调用，达到优化调用堆栈的目的，这便是尾调用优化。

尾递归调用

如果函数的尾调用是对自己的调用，便形成了递归调用，同时还是归调用，所以合称 尾递归调用。相比于传统的递归，调用堆栈极速增加的不同，尾递归调用的调用堆栈是恒定的，这由前面的分析可知。

所以尾调用优化特别适合用于递归的情况，收益会很大。

计算阶乘就是典型的递归场景：

function factorial(x) {
    if (x <= 0) {
        return 1;
    } else {
        return x * factorial(x-1); // (A)
    }
}

但上面这样的实现并不是尾调用。不过可以通过添加一个额外的方法来达到优化成尾调用的目的。

function factorial(n) {
    return facRec(n, 1);
}
function facRec(x, acc) {
    if (x <= 1) {
        return acc;
    } else {
        return facRec(x-1, x*acc); // (A)
    }
}

此时 facRec 便是一个尾递归调用。

其他示例

利用尾递归调用实现循环语句。

function forEach(arr, callback, start = 0) {
    if (0 <= start && start < arr.length) {
        callback(arr[start], start, arr);
        return forEach(arr, callback, start+1); // tail call
    }
}
forEach([‘a‘, ‘b‘], (elem, i) => console.log(`${i}. ${elem}`));

// Output:
// 0. a
// 1. b

function findIndex(arr, predicate, start = 0) {
    if (0 <= start && start < arr.length) {
        if (predicate(arr[start])) {
            return start;
        }
        return findIndex(arr, predicate, start+1); // tail call
    }
}
findIndex([‘a‘, ‘b‘], x => x === ‘b‘); // 1

相关资源

• 2ality - Tail call optimization in ECMAScript 6
• ES6 尾调用优化在各引擎中的实现支持情况
• What Is Tail Call Optimization?