要知道什么是尾调用，我们就要先从调用栈开始说起。

什么是调用栈 ？

调用栈(（Call Stack)是一个基本的计算机概念，这里引入一个概念：栈帧。

栈帧是指为一个函数调用单独分配的那部分栈空间。

调用栈.png

当运行的程序从当前函数调用另外一个函数时，就会为下一个函数建立一个新的栈帧，并且进入这个栈帧，这个栈帧称为当前帧。而原来的函数也有一个对应的栈帧，被称为调用帧。每一个栈帧里面都会存入当前函数的局部变量。

我们的递归函数的调用栈可以通过console.trace()来查看。

function factoria(n) {
    console.trace()
    if (n === 0) {
        return 1
    }

    return n * factorial(n - 1)
}

factorial(3)

查看出来的结果：

race
    at factoria (H:\company_work_space\Demos\Demo1.js:39:13)
    ...
Trace
    at factoria (H:\company_work_space\Demos\Demo1.js:39:13)
    at factoria (H:\company_work_space\Demos\Demo1.js:44:16)
    ...
Trace
    at factoria (H:\company_work_space\Demos\Demo1.js:39:13)
    at factoria (H:\company_work_space\Demos\Demo1.js:44:16)
    at factoria (H:\company_work_space\Demos\Demo1.js:44:16)
    ...
Trace
    at factoria (H:\company_work_space\Demos\Demo1.js:39:13)
    at factoria (H:\company_work_space\Demos\Demo1.js:44:16)
    at factoria (H:\company_work_space\Demos\Demo1.js:44:16)
    at factoria (H:\company_work_space\Demos\Demo1.js:44:16)
    ... 

达到调用栈最后，发现里面的有四个fatorial,每一个栈帧都会保存当前函数的临时变量和本地变量，以及调用着记录的调用函数的位置。

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

什么是尾调用呢？

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

function f(x){
  return g(x);
}

如上面f函数的最后一步调用是g函数，这就是尾调用。

下面的情况都不是尾调用：

// 情况一
function f(x){
  let y = g(x);
  return y;
}

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

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

情况一：函数最后一步是返回y，不是尾调用函数。
情况二：函数的最后是调用g函数返回的值在加一。不是尾调用函数。
情况三：函数的最后一步并没有返回。相当于下面

function f(x){
  g(x);
  return undefined;
}

尾调用不一定是最后一步：

function f(x){
    if(x<1){
        return g(x)
    }
    return n(x)
}

尾调用优化

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

我们在上面调用栈中说过，函数的调用会形成一个调用栈。每一个栈帧都会保存当前函数的临时变量和本地变量，以及调用着记录的调用函数的位置。所以A函数内部调用B函数，那么就会在A的栈帧上方形成B的函数栈帧。
当B函数的调用完成以后，B的函数栈帧会被推出调用栈，然后返回A的栈帧里。如果B函数里面调用C的，那么还会形成一个C的栈帧，以此类推。

尾调用是函数调用的最后一步，所以不需要保留外层函数的调用帧（栈帧），因为调用位置和内部变量都不会用到了。只要使用内部的调用帧取代了外部的调用帧就可以了。

function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

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

// 等同于
g(3);

上面f函数调用g。如果g函数不是最后一步调用，那么函数f就要保存内部变量m和n。同时还要保存函数g的调用位置，当g调用完成后，在保存的调用位置回到f函数，然后继续执行下面的。

现在上面的g函数是最后一步，不再需要回调f函数。f函数的调用帧不需要在保存。

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

需要注意的是：只有完全不再使用外部函数的内部变量时，内部函数的调用帧才能取代外部函数的调用帧。这个也是实现尾递归优化的关键。

function addOne(a){
  var one = 1;
  function inner(b){
    return b + one;
  }
  return inner(a);
}

上面的函数不是尾调用优化，因为内部函数inner的内部使用外部函数的内部变量one.

什么是尾递归 ？

函数调用自身叫递归，尾调用自身的话就是尾递归。

递归非常消耗内存，每一个函数会形成自己的栈帧(调用栈)。当递归同时保存非常多的时候，就会出现栈溢出。但对于尾递归来说，至始至终只存在一个调用帧，就不会出现栈溢出的问题。

我们还是从熟悉的阶乘函数开始。计算n的阶乘，最多需要保存n个调用记录，复杂度O(n)

function factorial(n) {
  if (n === 1) return 1;
  return n * factorial(n - 1);
}

factorial(5) // 120

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

function factorial(n,total){
    if(n == 1) return total;
    return factorial(n-1,n * total);
}

factorial(5,1);

还记得我们上面说的尾递归优化的关键吗？只有完全不再使用外部函数的内部变量时，内部函数的调用帧才能取代外部函数的调用帧。

上面函数的改写原理是：把所有的内部变量变成函数参数传递下去，这样内部就不会保存内部变量了。我们设定了两个参数，第一个参数是阶乘的参数，第二个参数我们计算后的那个值。上面的第一个例子的函数n * factorial（n - 1）。

把相乘的操作放到了第二个参数里了。第一次相乘的时候是5*1也就是自己,第二次的时候就是5*4,第三次就是20*3.知道最后。

n*total 5
n*total 20
n*total 60
n*total 120
n*total 120

递归函数的改写

两个方法可以解决这个问题。方法一是在尾递归函数之外，再提供一个正常形式的函数。

function tailFactorial(n, total) {
  if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

function factorial(n) {
  return tailFactorial(n, 1);
}

factorial(5) // 120

上面代码通过一个正常形式的阶乘函数factorial，调用尾递归函数tailFactorial，看起来就正常多了。

函数式编程有一个概念，叫做柯里化（currying），意思是将多参数的函数转换成单参数的形式。这里也可以使用柯里化。

function currying(fn, n) {
  return function (m) {
    return fn.call(this, m, n);
  };
}

function tailFactorial(n, total) {
  if (n === 1) return total;
  return tailFactorial(n - 1, n * total);
}

const factorial = currying(tailFactorial, 1);

factorial(5) // 120

上面代码通过柯里化，将尾递归函数tailFactorial变为只接受一个参数的factorial。

第二种方法就简单多了，就是采用 ES6的函数默认值。

function factorial(n, total = 1) {
  if (n === 1) return total;
  return factorial(n - 1, n * total);
}

factorial(5) // 120

这样就简单多了。

总结一下，递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都用递归实现，这就是为什么尾递归对这些语言极其重要。对于其他支持“尾调用优化”的语言（比如 Lua，ES6），只需要知道循环可以用递归代替，而一旦使用递归，就最好使用尾递归。

但是需要注意的是：ES6的尾调用优化只在严格模式下开启，正常模式是无效的。

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

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

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

既然尾递归优化只有在ES6的情况下才有效，那么正常模式下怎么实现呢？

正常模式下实现尾递归优化

它的原理非常简单。尾递归之所以需要优化，原因是调用栈太多，造成溢出，那么只要减少调用栈，就不会溢出。怎么做可以减少调用栈呢？就是采用“循环”换掉“递归”。

下面是一个正常的递归函数。

function sum(x, y) {
  if (y > 0) {
    return sum(x + 1, y - 1);
  } else {
    return x;
  }
}

sum(1, 100000)
// Uncaught RangeError: Maximum call stack size exceeded(…)

上面的递归函数会爆出栈溢出错误。

蹦床函数（trampoline）可以将递归执行转为循环执行。

function trampoline(f) {
  while (f && f instanceof Function) {
    f = f();
  }
  return f;
}

上面就是蹦床函数的一个实现，它接受一个函数f作为参数。只要f执行后返回一个函数，就继续执行。注意，这里是返回一个函数，然后执行该函数，而不是函数里面调用函数，这样就避免了递归执行，从而就消除了调用栈过大的问题。

然后，要做的就是将原来的递归函数，改写为每一步返回另一个函数。

function sum(x, y) {
  if (y > 0) {
    return sum.bind(null, x + 1, y - 1);
  } else {
    return x;
  }
}

面代码中，sum函数的每次执行，都会返回自身的另一个版本。

现在，使用蹦床函数执行sum，就不会发生调用栈溢出。

trampoline(sum(1, 100000))

蹦床函数并不是真正的尾递归优化，下面的实现才是。

function tco(f) {
  var value;
  var active = false;
  var accumulated = [];

  return function accumulator() {
    accumulated.push(arguments);
    if (!active) {
      active = true;
      while (accumulated.length) {
        value = f.apply(this, accumulated.shift());
      }
      active = false;
      return value;
    }
  };
}

var sum = tco(function(x, y) {
  if (y > 0) {
    return sum(x + 1, y - 1)
  }
  else {
    return x
  }
});

sum(1, 100000)

上面代码中，tco函数是尾递归优化的实现，它的奥妙就在于状态变量active。默认情况下，这个变量是不激活的。一旦进入尾递归优化的过程，这个变量就激活了。然后，每一轮递归sum返回的都是undefined，所以就避免了递归执行；而accumulated数组存放每一轮sum执行的参数，总是有值的，这就保证了accumulator函数内部的while循环总是会执行。这样就很巧妙地将“递归”改成了“循环”，而后一轮的参数会取代前一轮的参数，保证了调用栈只有一层。

学习链接：尾调用优化