【前端】递归之引起堆栈溢出解决方案-优快云博客

本文介绍了解决JavaScript中因递归调用过多而导致的堆栈溢出问题，提供了两种方法：使用蹦床函数将递归转换为循环执行，以及通过尾递归优化来避免递归执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介：递归引起错误VM434:1 Uncaught RangeError: Maximum call stack size exceeded

优化前递归

```
function obj(x,y){
    if(y>1){
    return obj(x + 1,y - 1);
    }else{
    return x;
    }
}
/**执行方法**/
obj(2,1000); //1001
obj(2,100000); //Uncaught RangeError: Maximum call stack size exceeded
```
复制代码

当递归大于一定数量后出现了堆栈溢出情况（这里是大于10000次出现了）

解决方案1

蹦床函数（trampoline）可以将递归执行转为循环执行。
```
function trampoline(f){
    while(f && f instanceof Function){
        f = f();
    }
    return f;
}
function obj(x,y){
    if(y > 1){
        return obj.bind(null,x + 1,y - 1);
    }else{
        return x;
    }
}

trampoline(obj(2,1000)); //1001
trampoline(obj(2,100000)); //100001
复制代码
```
蹦床函数他接受一个函数f为参数，只要f执行后返回一个函数，就继续执行。

注意：这里返回的是一个函数，然后继续执行函数，而不是函数里面调函数，避免了递归执行调用栈过大的问题

蹦床函数不是真正的尾递归优化。

解决方案2

function tco(f){
    var value,
        active=false,
        accumulated=[];
    return function accumulator(){
        accumulated.push(arguments);
        if(active=false){
            active=true;
            while(accumulated.length){
                value=f.apply(this,accumulated.shift())
            }
            active=false;
            return value;
        }
    }
}
var obj=tco(function(x,y){
    if(y > 1){
        return obj(x + 1, y - 1);
    }else{
        return x;
    }
})
/**执行方法**/
obj(2,1000); //1001
obj(2,100000); //100001
复制代码

上面代码中，tco函数是尾递归优化的实现，他主要在于active的状态，只要进入递归优化过程这个状态就激活了，然后每一轮obj3都返回undefined,所以就避免了递归执行；而accumulated数组存放每一轮obj3执行的参数，总是有值的，保证了accumulator函数内部while的循环总是执行。这样递归就改成了训话，后一轮参数取代前一轮参数，保证栈只有一层。