【进阶 1 期】 调用堆栈

Posted on | In |
Words count in article: 427

JS调用栈的工作机制

简单的说：函数被调用时，就会被加入到调用栈顶部，执行结束之后，就会从调用栈顶部移除该函数，这种数据结构的关键在于后进先出，即大家所熟知的 LIFO。比如，当我们在函数y 内部调用函数x的时候，调用栈从下往上的顺序就是 y -> x 。

简单用代码举个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function c() {
    console.log('c');
}

function b() {
    console.log('b');
    c();
}

function a() {
    console.log('a');
    b();
}

a();

这段代码再运行时，首先a会被加入到调用栈的顶部，a内部调用了b，紧接着b被加入到调用栈的顶部，b内部调用了c，c也被加入了调用栈的顶部。
此时，调用栈从下到上的顺序是这样的，a->b->c。在c执行完毕之后，c从调用栈中移除，依次执行b,a，直到全部从调用栈中移除。

为了更好的说明调用栈的运行机制，使用console.trace来把当前调用栈输出到console中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function c() {
    console.log('c');
    console.trace();
}

function b() {
    console.log('b');
    c();
}

function a() {
    console.log('a');
    b();
}

a();

在浏览器console运行此代码，会得到如下结果。

1
2
3
4
5
6
7
a
b
c
console.trace
c
b
a

显然，调用栈从下往上执行的结构是：a->b->c

最后总结下调用栈的工作机制：调用函数的时候，会被推到调用栈的顶部，而执行完毕之后，就会从调用栈移除。

参考链接
浅析javascript调用栈 https://segmentfault.com/a/1190000010360316
你不知道的 JS 错误和调用栈常识 https://segmentfault.com/a/1190000008621990