乐趣区

关于前端:JavaScript-调用栈

什么是调用栈?

原文链接:https://note.noxussj.top/?source=sifou

什么是调用栈?

咱们写的 JS 代码大多数都是同步模式,也就是从上往下顺次执行。后一个工作必须要等前一个工作完结能力开始执行,程序的执行程序和咱们代码的编写程序是完全一致的。程序执行中每遇到一个工作都会先入栈,以后入栈的工作执行结束后就会出栈。原本栈的概念是留到数据结构算法在讲的,然而这里用到了能够提前介绍一下。


什么是栈?

栈是根底数据结构,栈是一种遵循后进先出准则的有序汇合,增加新元素的一端称为栈顶,另一端称为栈底,操作栈的元素时,只能从栈顶操作(增加、移除、取值)。

上面通过代码的例子和调试工具去更好的了解栈和 JS 调用栈。

console.log('global begin')

function bar() {console.log('bar task')
}

function foo() {console.log('foo task')

    bar()}

foo()

console.log('global end')

执行程序如下

  1. JS 引擎会将整个 script 的代码提取到一个匿名函数(anonymous)中,并且压入调用栈(也就是入栈)开始逐行执行
  1. 首先是第一行 global begin,压入调用栈
  1. 执行 global begin 在控制台打印结束后,出栈
  1. 接下来就遇到了函数的申明 bar 和 foo,只有代码的调用才会入栈,申明是不会的
  1. 遇到了 foo 函数的调用,压入调用栈
  1. 执行 foo 函数,foo 函数第一行是 foo task 压入调用栈![]
  1. 执行 foo task(控制台打印)实现后,往下就是调用了 bar 函数,将 bar 函数压入调用栈![]
  1. 在 bar 函数执行过程中将 bar task 入栈![]
  1. 执行 bar task(控制台打印)完后,也代表咱们的 bar 函数执行实现,bar 函数执行实现也代表 foo 函数执行实现,将它们顺次出栈。最初 global end 也压入调用栈
  1. 最初将 global end 入栈,执行结束后出栈。整个匿名函数(anonymous)也执行实现![]

在浏览器调试工具右侧能够看到调用栈:


原文链接:https://note.noxussj.top/?source=sifou

退出移动版