关于前端:javascript尾递归优化

JS 中的递归

咱们来看一个阶乘的代码

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

foo(5);  // 120

上面剖析一下，代码运行过程中, 执行上下文栈是怎么变动的

1. 这个代码是在全局作用域中执行的，所以在 foo 函数失去执行之前，上下文栈中就曾经被放入了一个全局上下文。之后执行一个函数，生成一个新的执行上下文时，JS 引擎都会将新的上下文 push 到该栈中。如果函数执行实现，JS 引擎会将 对应的上下文 从上下文栈 中弹出
2. 一开始执行 foo 函数的时候，JS 引擎会创立 foo 的执行上下文，将该执行上下文 push 进上下文栈。而后开始执行 foo 中的代码。

当初上下文栈中曾经有了两个执行上下文了

3. 在执行到 foo 中代码快完结时，return 表达式中，又调用了 foo 函数。所以又会创立一个新的执行上下文。并且 JS 引擎会把这新的执行上下文 push 到上下文栈中。

当初上下文栈中曾经有了三个执行上下文了

4. 开始反复第 3 步的执行。始终到 n <=1，才不会有新的执行上下文产生。

此刻上下文栈中，曾经有了 6 个上下文了（蕴含了全局上下文）

构想一下

1. 如果刚开始调用的时候，传入 n 的初始值为 100，到 n <= 1 时，上下文栈中会有几个上下文。101 个。
2. 如果初始值为 1000 呢？到 n <= 1 时，会有 1001 个执行上下文
3. 也就是说，传入的初始值越大，执行上下文栈中，就会有越多的执行上下文🥲
4. 对于高低栈，它的空间是无限的，一旦寄存的上下文占用内存产出了它的最大内存，就会呈现栈溢出。RangeError: Maximum call stack size exceeded
5. 而在 chrome 中，不仅会对栈的空间有限度，还会对函数的递归次数有限度

递归优化

咱们来看一个样例代码

function outer() {return inner();
}

outer();

剖析一下，这里的上下文栈是怎么变动的

1. 调用 outer 函数的时候，第二个栈帧被推到了栈上。

第一个 栈帧 是全局上下文

把上下文栈中的一个上下文称作一个 栈帧

2. 执行到了 return 语句，必须要计算 inner 调用后果，能力返回值
3. 调用 inner 函数，第三个栈帧被推入到栈上。

参考 前端进阶面试题具体解答

4. 执行 inner 函数，将返回值传回到 outer 函数。inner 执行结束。第三个栈帧被弹出栈

5. outer 函数再返回值。outer 函数执行结束，第二个栈帧被弹出栈

等等，状况不是一样的么？优化在哪里

1. 在执行到 outer 中的 return 语句的时候，要先计算 inner 函数的值。这时候 JS 引擎发现，把第二个栈帧弹出去也没有关系。因为到时候，间接拿 inner 的返回值返回进来就好了，第二个栈帧就没有必要保留了。
2. 将第二个栈帧弹出

这个时候，栈中只有一个栈帧了 – 全局上下文

3. 执行到 inner 函数，inner 函数的上下文被 push 到栈中

这个时候，栈中有两个栈帧了

4. 开始执行 inner 函数，计算返回值后，inner 函数执行结束。inner 的上下文栈帧被弹出栈。

栈中又只剩一个栈帧了 – 全局上下文

综上，咱们能够看出：如果没有优化，没多调用一次嵌套函数，就会多减少一个栈帧；有了优化之后，无论调用多少次嵌套，栈中只会有两个栈帧。这就是 ES6 尾调用优化的要害😄

递归优化的条件

1. 代码在严格模式下执行
2. 内部函数的返回值，是对尾调用函数的调用
3. 尾调用函数返回后，不须要执行额定的逻辑
4. 尾调用函数不是内部函数作用域中自在变量的闭包

上面是《高程》外面的示例，帮忙大家了解

// 无优化：尾调用没有返回
function outer(){inner();
}

// 无优化：尾调用没有间接返回
function outer(){let innerResult = inner();

  return innerResult;
}

// 无优化：尾调用返回值后，必须要转型为字符串
function outer(){return inner().toString();}

// 无优化：尾调用是一个闭包
function outer(){
  let foo = 'bar';

  function inner(){ return foo;}

  return inner();}

其实我感觉下面的倒数第二个，它是齐全能够尾调用优化的。因为这个计算是不须要内部函数的上下文外面内容反对的。可能是这样的计算必须要在内部函数的上下文中实现吧，咱也不懂。记一下吧。

有哪位同仁可能帮我解答一下我这个问题吗😁

实操一个优化代码

上面是一个一般的求斐波那契数列的函数

function fib(n){if( n < 2){return n;}

  return fib(n - 1) + fib(n - 2)
}

这是一个非常简单的斐波那契数列的函数，能够看到它不合乎尾递归的条件。因为返回值的调用函数参加了额定计算

咱们来优化一下

function fib(n){return fibImpl(0, 1, n);
}

function fibImpl(a, b, n){if(n === 0){return a;}

  return fibImpl(b, a+b, n-1);
}

看，这样是不是就合乎尾递归调用函数了

简略解说一下下面的代码

1. 把原先的一个函数拆成了两个
2. 第一个函数承受一个参数。这个参数示意求第几位的斐波那契数。
3. 第二个参数接管三个参数。前两个参数示意正在计算的两个地位的数字，第三个参数示意还要计算多少次

斐波那契数法则，就是从第三位开始，每一位的数字都是前两位数字的和

那下面的计算的阶乘代码怎么优化呢？

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

foo(5);  // 120

这个是下面计算阶乘的代码，咱们能够用同样的思路，来对其做尾递归函数优化

function foo(n){return inner(n, n - 1)
}

function inner(sum, n){if(n <= 1){return sum；}
  return inner(sum * n , n -1);
}

foo(5);

是不是超简略😁

最新版的浏览器曾经反对尾递归

能够在计算斐波那契数列的时候，比拟尾递归和非尾递归的工夫。置信你会和我一样，会情不自禁的感叹

总结

1. JS 中的递归函数调用的时候，上下文栈是怎么变动的
2. 什么是递归优化
3. 递归优化的条件是什么
4. 手动优化一个递归代码