递归时内存中的调用栈的变化

 先看一个最简单的累加的递归函数：

function sum(n){
    if(n <= 1) return 1
    return n + sum(n - 1)
}
console.log(sum(100));  // 5050

当传入的参数过大时会导致栈溢出：

 

即：超过了最大调用堆栈大小

那这是如何导致栈溢出的呢？这里需要知道正常我们写的JS代码是如何来运行的，可以参考另一篇博客：JS调用栈和队列

大致就是执行到哪个方法，那个方法就压入栈中，函数执行结束就从栈中移除。

那么，递归执行时调用栈是如何变化的呢？

就以上面哪个累加的递归函数为例，如传入的参数是5，就以一个图表展示：

 

说明：

• 这个图表是本人的大致理解，如果有错误之处请大神指出
• 执行sum(5)，调用栈中从下往上压入了9个事件，全部压入了以后，从上往下执行
• 可以看出如果传入的参数越大，调用栈中的待执行事件将越多，达到一定程度就会超出栈能保存的最大容量

解决递归的调用栈溢出可以使用尾调用优化。