JS调用栈

264 阅读2分钟

什么是栈?

栈是一种后进先出的数据结构。

调用栈是什么?

调用栈就是用来管理函数调用关系的一种数据结构。比如我们执行一个函数首先会从全局执行上下文中取出该函数,然后对函数里的代码进行编译并创建该函数的执行上下文,最后执行代码输出结构。JavaScript 引擎利用栈结构来管理执行上下文。在执行上下文创建好后,JavaScript 引擎会将执行上下文压入栈中。

JS调用栈的执行过程?

第一步:创建全局上下文,并将其压入栈底。

第二步:调用函数编译该函数并创建函数执行上下文将该函数执行上下文压缩栈中。

第三步:函数执行完后出栈

JS代码为什么会溢出?

其实调用栈的存储空间是有大小限制的,当我们只有入栈操作没有出栈操作的时候栈就会溢出,比如写了 一个递归的,但是没有任何终止条件。

如何利用浏览器查看调用栈的信息?

可以打开“开发者工具”,点击“Source”标签,选择 JavaScript 代码的页面,然后在第 3 行加上断点,并刷新页面。你可以看到执行到 add 函数时,执行流程就暂停了,这时可以通过右边“callstack”来查看当前的调用栈的情况。右边的“call stack”下面显示出来了函数的调用关系:栈的最底部是anonymous,也就是全局的函数入口;中间是 addAll 函数;顶部是 add 函数。这就清晰地反映了函数的调用关系,所以在分析复杂结构代码,或者检查 Bug 时,调用栈都是非常有用的。