调用栈

2020-06-08 本文已影响0人 _1633_

在 JS 中，当一段代码被执行时， JS 引擎会对其进行编译，并创建 执行上下文。那么哪些代码才会在执行前就进行编译并创建执行上下文：

1. 当 JS 执行全局代码的时候，会编译全局代码并创建 全局执行上下文，在整个页面的生存周期内，全局执行上下文只有一份。

2. 当调用一个函数的时候，函数体内的代码会被编译，并创建 函数执行上下文，一般情况下，函数执行结束后，创建的 函数执行上下文会被销毁。

3. 当使用 eval 函数的时候，eval 代码也会被编译，并创建执行上下文。

那么 JS 如果管理这些这些执行上下文：通过一种栈的数据结构来管理。

一段简单的代码示例

执行过程：

1. 编译阶段，创建 全局执行上下文，起中包含了变量环境： a = undefined 和 foo 函数；

2. 执行阶段，当执行 foo 函数的时候，JS 判断这是一个函数调用，将执行下列操作：

1) 从全局执行上下文取出 foo 函数

2）对 foo 函数进行编译，并创建 foo 函数的执行上下文和执行代码

3) 执行代码，输出结果

当执行 foo 函数的时候，我们就有了两个执行上下文：全局的和 foo 函数的。

栈

栈是一种 后进先出 的数据结构，就像垒积木，当我们每次放置一块积木，这样的操作就叫入栈，而每次取出最上面的那块的操作就叫出栈。只有将栈内的数据一层层取出，我们才能拿到最开始进入的数据。

JS 调用栈： JS 利用这种数据结果来管理执行上下文，在创建好执行上下文后，JS 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又叫 调用栈。

举个栗子

分析代码

全局执行上下文1

1. 编译代码，创建全局执行上下文，将全局上下文压入栈底。

2. 执行代码，将 b 赋值为 1，执行 bar(2, 3) 函数，JS 引擎会编译该函数，创建函数的执行上下文并将该上下文压入栈中

bar 函数执行上下文

1) 进入 bar 函数的执行阶段，首先将 c 赋值为 2，接着执行 foo() 函数，为其创建 foo 函数的执行上下文，并压入栈顶

foo 函数执行上下文

2) foo 函数执行阶段，返回结果设置 result 的值，执行结束后， foo 函数的执行上下文销毁，从栈顶弹出

弹出foo函数执行上下文

3）接着执行 bar 函数的执行代码，返回结果， bar 函数执行结束，弹出执行上下文

弹出bar函数执行上下文

调用栈只剩全局执行上下文，JS 代码执行结束，整个流程也就结束了。

调用栈是JavaScript引擎追踪函数执⾏的⼀个机制，当⼀次有多个函数被调用时，通过调用栈就能够追踪到哪个函数正在被执行以及各函数之间的调用关系。

调用栈在 JS 调试过程的作用

当我们在调试 JS 代码的时候，往往会加入断点，通过该断点，我们就可以查看改函数的调用栈了，一步步分析每个函数执行上下文，查找到 bug 所在。

vs code 调试代码

左侧是调用栈的数据，跟上面图片中的结构一致；我们也可以通过 console.trace() 来打印出当前的栈内数据情况。

栈溢出

调用栈是有大小限制的，当超出一定的数目，JS 就会报错，就是所谓的栈溢出。

最常见到的就是当写递归代码的时候，却没有写退出条件。

JS 引擎开始执行这段代码时，首先调⽤函数add，并创建执⾏上下⽂，压⼊栈中;这个函数是递归的，没有终止的条件，所以它会⼀直创建新的函数执行上下文，并反复将其压⼊栈中，栈是有大小限制的，超过最大数量后就会出现栈溢出的错误。

所以我们在写递归的时候一定要注意退出的条件，或者将递归改成其他形式的，比如 for 循环。

总结

1. 每调用⼀个函数，JS 引擎会为其创建执行上下文，并把该执行上下文压⼊调用栈，接着执行函数内的代码。

2. 如果在⼀个函数A中调用了另外⼀个函数B，那么JS 引擎会为B函数创建执行上下⽂，并将B函数的执行上下文压入栈顶。

3. 当前函数执行完毕后，JS 引擎会将该函数的执行上下文弹出栈。

4. 当调用栈空间被占满时，会引发“堆栈溢出”问题。