递归调用栈溢出问题分析与解决

文章出自：递归调用栈溢出问题分析与解决 - 灰信网（软件开发博客聚合）https://www.freesion.com/article/59181236995/

 本文主要是相对做一个保存，主要是因为文章所在的网站本人没有注册账号，再去注册一个就实在是太多了，原文排版还是很不错的，大家可以直接通过上面的连接查看原文

问题模拟

让递归爆栈还是很简单的，例如如下代码就能轻而易举实现

// 故意来一次爆栈体验
function stackOverflow(){
    stackOverflow();
}
stackOverflow();
/* 结果
VM42:3 Uncaught RangeError: Maximum call stack size exceeded
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
    at stackOverflow (<anonymous>:3:5)
*/

我们还能通过如下代码看到浏览器最大的调用栈是多少

(function getStackDepth(){
    try {
        return 1 + getStackDepth();
    } catch (e) {
        // Call stack overflow
        return 1;
    }
})()
/* 结果
12539
*/

数量取决于方法体所占用的空间，占用空间越大，可用栈数量越小。可尝试在方法中增加变量，会发现结果变小。

原因分析

我们都知道，程序运行时有堆内存，还有栈内存。
每一次方法执行，都会把方法压到执行栈中。
栈空间是有大小的，当超过栈空间大小，就会触发Maximum call stack size exceeded异常。

关于调用栈之前的这篇文章中有说明：CodeReview过程中关于JS代码性能的随想整理

解决方案

有了原因分析，解决方案也清晰了，那就是想办法规避掉不停的往调用栈塞方法。

样例准备

准备一个相加的例子（这个例子不具备实际意义，本来想准备个阶乘的例子，发现还没爆栈就超出整形长度了，累加也一样，所以就出现了这么一个看起来有点脑残的样例…）

// 用递归实现相加，比如输入add(10),打印10
function add(num){
  if(num===1){
    return 1;
  }else{
    return 1 + add(num-1);
  }
}

可以看到，参数比较小的时候一切正常，当参数太大的时候就爆栈了

add(10);
// 10
add(100000);
/* 提示爆栈
VM505:2 Uncaught RangeError: Maximum call stack size exceeded
    at add (<anonymous>:2:3)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
    at add (<anonymous>:5:16)
*/

1. 递归转循环

大部分递归都可以转为循环实现

function add(num){
  let result = 0;
  while(num--){
    result = result+1;
  }
  return result;
}
add(100000);
// 正常输出100000
// 100000

2. 蹦床函数

爆栈的核心在于不停的往调用栈塞入函数，那么我们可以想办法每次递归都执行对应函数，避免调用栈增加，该方法在本质上，还是使用了循环去替代递归

对递归改写

// 蹦床函数
function trampoline(fun){
  let result = fun();
  // 循环调用，解决递归问题
  while (typeof(result) === 'function') {
    result = result();
  }
  return result;
}

// 每次返回函数
function add(num, result=1){
  if(num === 1) return result;
  return () => add(num-1, 1+result);
}

trampoline( add(100000) );
// 返回100000

事件

最后还有一个sao操作，就跟传说中的睡眠排序一样，那就是setTimeout，代码如下：

function add(num, result=1){
  return new Promise((resolve, reject)=>{
    if(num===1) resolve(result)
    // 实际上为最少4ms执行一次
    setTimeout(function(){
      add(num-1, 1+result).then(res=>resolve(res))
    }, 0)
  })
}
// 能够正常返回100，参数为15000时，也能返回值(证明不会爆栈)，就是巨慢...
add(100).then(res=>console.log(res))