JavaScript函数调用栈
理解JavaScript的函数调用栈是非常重要的。它可以让我们知道Javscript在函数调用时是怎么运行的。
1. 函数调用栈(call stack)
调用栈是一种栈结构,它用来存储计算机程序执行时候其活跃子程序的信息。（比如什么函数正在执行，什么函数正在被这个函数调用等等信息）。
下面我们以一个简单的例子来看看什么是调用栈。
function test1(){
var a = 1;
return function test2() {
return a + 1;
}
}
console.log(test1()());
对代码分析如下：
- 首先运行consol.log(). 这个时候log()方法被调用.入栈,形成一个栈帧。
- 然后调用 test1。test1 被调用，入栈。又形成一个新的栈帧，这个栈帧在之前的栈之上。
- tes1 返回值是一个函数test2，这个时候被调用，同时也生成一个栈帧。
- 当test2运行完之后，返回a+1；被推出栈，test1与console.log()依次也被推出栈帧。
还有另外一种情况。在JS中，我们知道还要处理很多异步操作，比如http请求、setTimeout等。他们之中包含有异步函数。对于这种异步函数的调用，JS会把他们放到运行队列中，在运行之前他们首先会看调用栈里面是否有等待执行的函数，异步函数只会在等待调用栈被清空之后才会入栈执行。
对于setTimeout, 它是在等待某个时间之后进入运行队列。
小结：
- 当函数被调用时，会入栈，形成栈帧。
- 当函数里在调用函数时，内部函数会在外部函数上再次形成栈帧。
- 函数运行完之后，会被推出栈。
- 异步函数运行，首先进入运行队列，然后在进入栈。
2. Javascript递归
- 递归函数时在一个函数通过名字调用自身的情况下构成的。如：
function factorial(num){
if(num === 1) return num;
return num * factorial(num -1);
}
但是上面的例子在我处理一个非常大的数的阶乘的时候，就会发生如下的事情：
function factorial(100000) //Uncaught RangeError: Maximum call stack size exceeded
对，没错。造成了栈溢出。那我们怎么办呢？
- 尾递归
对于尾调用可以参考一下阮一峰老师对尾调用以及尾递归的实现的讲解。
我们使用之前factorial的例子，来进行尾递归。代码如下：
function factorial(num,total){
if(num === 1) return num;
return factorial(num -1 ,num*total);
}
factorial(10,1) // 3628800
使用尾递归可以很轻松的解决了递归栈溢出的问题(只保留了内层函数的调用帧)。
记住:只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。
但是上面的尾递归只能在Javascript的严格模式下才能有用。
- 自己实现尾递归
怎么实现尾递归呢? 我们可以用'循环函数'代替递归函数.
(1). 使用 trampoline函数实现尾递归。
还是以之前阶乘的例子为例。我们知道如下代码会报出栈错误。
function factorial(num){
if(num === 1) return num;
return num * factorial(num -1);
}
我们实现一个 trampoline函数，这个函数会不断的循环另外一个函数。
function trampoline(f){
while (f && f instanceof Function){ // 知道f 不是函数 或空为止，跳出循环。
f = f();
}
return f;
}
那么 trampoline函数里的参数是f是实现阶乘逻辑的函数，也是我们用'循环'代替递归的那个函数。这个函数实现如下：
function toFactorial2(n,total){
if(n == 1) return total;
return toFactorial2.bind(null,n-1,n*total);
}
toFactorial2函数的返回值是toFactorial2使用bind方法绑定的另一个函数。这样每次循环函数使得前一个toFactorial2 能出栈。这样就不会造成栈溢出。
接下来我们使用这个函数。
trampoline(toFactorial2(1000000,1)) //Infinity
(2). 还有另外一种方式。
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)
这个函数才是真正的尾递归优化，对于尾递归优化，读者朋友们可以去看阮一峰老师对尾调用以及尾递归的实现的讲解。里面详解很到位。以上内容是我对javscript调用栈以及递归的简单记录。