(Day1)执行环境与执行堆叠

执行环境 (Execution context)

在 JS 世界中执行环境是根据不同 function ，做区分的不同的函示，执行环境会是不同的。

直接用个简单例子，就可以看出这个观念：

function FN1(){
const string = 'test'
console.log(string)
}
function FN2(){
console.log(string)
}
FN1() //test
FN2() //string is not defined
console.log(string) //string is not defined

如同上面范例中，FN2 函示中、以及全域底下是无法找到 FN1 中的 string 常数，值得一提的是 JS 最底层的执行环境，就是全域本身(window) 。

执行堆叠 (Execution Stack)

执行堆叠是和上面执行环境相关的观念，一般状况下，函示执行完毕，函示记忆体便会释放，比如这个范例：

function FN1(){
	console.log('FN1')
}
function FN2(){
	console.log('FN2')
}
FN1()
FN2()

范例的执行顺序就会是：
执行 FN1 函示 ⇒ FN1 函示执行完毕，释放记忆体 ⇒ 执行 FN2 函示 ⇒ FN2 函示执行完毕，释放记忆体 。
当然这是一般状况，如果我们函示中又『呼叫』了另外的函示，那麽就会造成执行堆叠的状况，比如这个范例：

function FN1(parmNum){
  const number1 = parmNum + 1
  FN2(number1)
}
function FN2(parmNum){
  const number2 = parmNum + 1
	FN3(number2)
	}
function FN3(parmNum){
  const number3 = parmNum + 1
	}
FN1(1)

这边可以使用 chrome 浏览器的 Sources 功能来观察 执行堆叠 状况：

(这边要注意的是图中的 Call Stack 状况，Call Stack 就是执行堆叠状态）

从上面 GIF 可以发现，FN1() 呼叫了 FN2()， 这种函示呼叫另一个函示时，Call Stack 就会一层一层叠起来，而这个堆叠顺序是根据 『怎麽呼叫函示』有关，而非函示的宣告顺序，因此根据程序码执行堆叠顺序就会是：
FN1() ⇒ FN2() ⇒ FN3()

而上面有提到函示执行完毕，会将记忆体释放，而堆叠後的函示释放顺序则不会是一般人预期中的：
FN1() ⇒ FN2() ⇒ FN3()

而是由最後被执行的函示开始释放，因此释放的顺序会是：
FN3() ⇒ FN2() ⇒ FN1()

参考文献

• JavaScript 核心篇 (六角学院）
• JavaScript 核心观念(4)-执行环境与作用域-执行环境与执行堆叠