# <font class="h2">執行環境execution contexts與執行堆疊execution stack</font>

###### tags: `javascript`
<style>
.h2 {
background: linear-gradient(135deg,#fff,#537479) ;
color: #537479;
display:block;
padding: 6px 5px;
border-radius: 4px;
}
.h3 {
background: linear-gradient(180deg,#fff 50%,#c9d5d4) ;
color: #537479;
display:block;
padding: 6px 5px;
border-bottom: 3px solid #537479;
}
.h4 {
color: #537479;
font-weight:bold;
font-size:1.1em;
}
</style>
<br>


### <font class="h3">執行環境execution contexts </font>

瀏覽器裡的Javascript 引擎 (engine) 所提供能讓javascript運行的環境，成為「執行環境execution contexts」

執行環境又分為幾種類型:
### <font class="h4">➤全域執行環境 (Global Execution Context)</font>

javascript預設的執行環境，==當一個Javascript程式被載入時，第一個進入執行環境就是全域執行環境。==
執行環境的概念很單純，不再任何函式裡面的程式碼就是在全域執行環境內。
全域執行環境會做幾件事
- 創造全域環境(全域物件)
- 創造`this`變數，並指向全域物件
可以打開瀏覽器的開發者工具並把`this`的值印出來查看，在瀏覽器內會是全域物件`window`


- 進行記憶體指派的流程

### <font class="h4">➤函式執行環境 (Function Execution Context)</font>
每當一個函式被呼叫，一個全新的執行環境也會跟著被創造出來，這也代表 JS 已經開始解析你的程式碼並執行。
函式執行環境產生時做的事情差不多，差別是不會產生全域物件，而相對的會在函式內產生 argument 物件，內容是執行階段時函式引數的內容。每個函式都有屬於自己的執行環境，但是只會在函式被呼叫的時候才會產生，這種執行環境可以同時存在好幾個。

### <font class="h4">➤eval函式執行環境 (Function Execution Context)</font>
eval 函式內的執行環境：在 eval 函式內可以透過字串的方式去執行 JavaScript Code ，但是因為 eval 函式現在已經不常被使用，普遍也不被推薦使用，這邊就先不細提，想知道為什麼不被推薦，可以搜尋關鍵字「Eval is evil.」。
<br>

### <font class="h3">執行堆疊execution stack </font>
在 JavaScript 中的執行堆疊（called stack）會記錄目前執行到程式的哪個部分，如果進入了某一個函式（step into），便把這個函式添加到stack當中的最上方；如果在函式中執行了 `return` ，則會將此函式從stack的最上方中抽離（pop off）。

後進先出(Frist in Last Out)規則，碰到 `return `關鍵字結束並離開這個執行環境。
<br>

Push:把資料放入; Pop:把資料拿出

<br>

:::info
範例:
:::

<br>

---
[latentflip測試Stack Queue狀態](http://latentflip.com/loupe/?code=!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)
https://ithelp.ithome.com.tw/articles/10216450