前情提要

上回偷拿远距离初阶魔法攻击艾草。

艾草：「我看你拿魔法丢我丢得挺顺的了(╬•᷅д•᷄╬)，那开始教你中阶魔法吧！」

「喔喔喔喔喔，被我扔到良心发现了吗？」

艾草：「我们来玩达摩塔吧！」

「．．．？？？」

艾草：「规则是要由下往上叠後由上往下敲打。」

「怎麽这麽突然？」

艾草：「为了让你对执行环境与堆叠有更深的体悟呀！」

「咦咦，那赶紧先教我吧！」

艾草：「喔，对了，这游戏输了可是有处罚的，这次的执行环境与执行堆叠，可要好好了解唷！」

(艾草心里 os 不晓得处罚输家要被赢家当达摩塔敲解不解气(｀∀´)Ψ)

执行环境 Execution Context

今天让我们来聊聊 JavaScript 的执行环境 Execution Context 吧！

什麽是执行环境呢？

执行环境 Execution Context

全域执行环境 Global Execution Context

JavaScript 在执行时会先建立全域执行环境 Global Execution Context ，而执行环境在网页开始时就会被建立时，建立时会分别经历两个阶段：

第一阶段：创造阶段 Creation Phase

• 建立全域物件：window
• 建立 this
• 建立 Variable Object (VO) ：hoisting 提升的原因

第二阶段：执行阶段 Execute Phase

在此阶段会依造程序码一行一行去执行。

除了全域执行环境 Global Execution Context 外，还有函式执行环境 Function Execution Context。

函式执行环境 Function Execution Context

函式执行环境怎麽产生的呢？

全域环境在执行阶段会一行一行去读程序码，当读到函式时并不会立刻产生执行环境，在呼叫该函式时，才会产生该函式的执行环境。

那全域执行环境不会跟函式执行环境打架吗？这边就要提到 JavaScript 是单执行绪！

单执行绪简单来说，就是 JavaScript 一次只会去做一件事情，那 JavaScript 到底怎麽帮我们分类要先做全域执行环境的程序码还是函式执行环境的程序码呢？

执行堆叠 Execution Stack

刚刚提到 JavaScript 是单执行绪一次只能做一件事，在做的事情就一定是有先後顺序的，而先後顺序要怎麽区分，就要来谈谈执行堆叠 Execution Stack 是什麽了！

你可以想像成每一个环境都是在盖大楼，如图：

• 红色箭头代表这栋大楼怎麽盖，会从底层开始慢慢往上盖
• 绿色箭头代表我要怎麽去执行，会从最上方开始执行
• 深灰色的地方则是每个执行环境

接着，让我们来用程序码举个例子吧！

console.log("范例开始");
function one() {
  console.log("我是第一个被呼叫的函式");
  two();
	console.log("呼叫 two 後执行")
}
function two() {
  console.log("我是第二个被呼叫的函式"); 
}
one();
console.log("呼叫 one 後执行");

执行後结果：

可以看到执行後的结果，当全域执行环境执行到呼叫函式 one 时，JavaScript 会先跑去执行函式 one ，而函式 one 执行到呼叫函式 two 时，JavaScript 又会先跑去执行并印出"我是第二个被呼叫的函式"，等函式 two 、函式 one 执行後，才会继续执行全域执行环境的 "呼叫 one 後执行"。

当执行到函式 two 时执行堆叠会长成下图：

如图，最底层一定会先建立一个全域执行环境，当我们在全域执行环境呼叫 function one () 时，就会产生 function one 的执行环境，在 function one 呼叫 two 时，也会将 two 的环境堆叠上去，而 JavaScript 会依照绿色箭头的方向，由最上层一层一层往下执行！

如何透过浏览器查看执行堆叠

以下以 Chrome 浏览器示范：

步骤一、点选 Sources ，并於左侧选单选取想查看的档案

步骤二、点选想观察的程序码

步骤三、刷新页面并点选图示按钮

步骤四、向下逐行观察显示结果

总结

知识点：执行环境

• 执行环境分为：全域执行环境、函式执行环境
• 执行环境建立时分为创造阶段、执行阶段
• 函式执行环境为呼叫该函式时才会产生
• JavaScript 是单执行绪

知识点：执行堆叠

• 最底层一定是全域执行环境
• 执行环境会由底层往上层堆叠
• 执行时会由最上层往底层执行

小练习

请参考以下程序码，选出执行到注解处时，执行堆叠正确的选项

function a() {
  console.log("我是第一个被呼叫的函式");
  b();
}
function b() {
  console.log("我是第二个被呼叫的函式");
  c();
}
function c() {
  //当程序码执行到此处时的执行堆叠为何
  console.log("我是第三个被呼叫的函式");
}
a();

(由左到右分别代表底层到上层)
A 全域执行环境 > function a > function b > function c
B function c > function b > function a > 全域执行环境
C function b > function a > 全域执行环境 > function c
D 全域执行环境 > function c > function b > function a

解答：选项 A 正确，执行堆叠由底层往上堆叠

参考文献

JavaScript 核心篇(六角学院)
https://medium.com/魔鬼藏在程序细节里/浅谈-javascript-执行环境-2976b3eaf248
https://medium.com/itsems-frontend/javascript-execution-context-and-call-stack-e36e7f77152e
https://medium.com/unalai/开发必备-摸索不完的-chrome-devtools-小技巧之设置断点篇-4d72cb35fa39