【修正模型】4-2 呼叫堆叠（Call Stack）

今天要来提提昨天学到的执行上下文对於整个 JavaScript 执行过程中的角色以及当浏览器事件发生时 JavaScript 引擎的运作情形。

呼叫堆叠（Call Stack）

在昨天的章节中我们学到了 JavaScript 一开始执行时会产生一个 全域执行上下文（Global Execution Context），另外在执行函式时则会产生一个 函式执行上下文（Function Execution Context）。

在产生出执行上下文之後，这些上下文之间并非毫无关系，而是会在彼此之间会互相堆叠而形成一个 呼叫堆叠（Call Stack），且处理资料的结构的方式也正如其名，是采後进先出（Last in & First out，LIFO）的方式。

接下来我们以下方程序码来看执行上下文是如何产生与堆叠的：

function funcA () {
  console.log('enter')
}


console.log('func start')
funcA()
console.log('func end')

一开始当我们执行程序码时，就会产生一个 Main 的执行上下文於堆叠的下方。

接着在 Main 的执行阶段中，首先遇到了可呼叫的函式（console.log('func start')），因此产生一个执行上下文 console.log，并且继续执行里面的内容，因而抛出一个 'func start'。

当 'func start' 被抛出後，由於 console.log() 函式没有其他事情要做了，因此将 console.log() 移出呼叫堆叠，接着引擎解析到 funcA() 後执行函式，因此又产生出一个执行上下文 funcA。

这时由於内部还有个可呼叫的函式（console.log('enter')），因此又继续堆叠一个执行上下文 console.log 上去，并执行内部程序；同样的，当 'enter' 被抛出後，由於 console.log() 函式没有其他事情要做了，因此将 console.log 移出呼叫堆叠：

接着，执行上下文 funcA 也没其他事情要做了，因此也移出呼叫堆叠：

现在回到了 Main 执行上下文中，我们剩下 console.log('func end') 还没执行，接着如上方一样，堆叠一个 console.log() 执行上下文，抛出 'func end' 後将 console.log 执行上下文移出：

最後连 Main 函式也没有其他事情要做了，因此最後将 Main 也移出呼叫堆叠，完成本次的程序执行：

在整个堆叠情况中，过程就像是我们昨天那样一步一步的去透过执行上下文来看内部的全域物件、变数物件、执行物件、this、范围链……等等内容，只是执行的速度非常的快速，但它仍然是有规律的在 一行一行 解析你的程序码。

所以只要你对於每个环节中的概念越熟悉，你就会越了解整个执行的过程与结果，而一旦了解它的执行脉络，撰写程序码时就能够更加的顺畅。

「你懂海，海就会帮助你。」

明天我们要继续来理解浏览器中事件循环的机制。