# <font class="h2">記憶體heap、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">變數資料存放記憶體觀念 </font>
* 變數重要三劍客：記憶體位置、變數、型別
* 記憶體位置介紹：[記憶體圖](https://cacoo.com/diagrams/1NI6DIM02F0zwNkk/D3C8C)、[影片延伸介紹](https://www.youtube.com/watch?v=QuCu4iDpPTU)
<br>

### <font class="h3">記憶體heap、stack </font>
現代電腦系統大多依照范紐曼型架構(Von Neumann Architecture)設計而成，其中一特色stored programming乃指程式執行一定要將欲執行的「指令」跟「資料「放入記憶體方可執行。

JavaScript 引擎有兩個地方可以存儲數據：heap和stack。
heap和stack是引擎用於不同目的的兩種數據結構。
<br>


<br>

| heap | stack |
| ----------------------------------- | ------------------------------------------------- |
| 動態(dynamic)數據<br>資料可變大變小 | 靜態(static)數據<br>資料固定大小 |
| 物件和函數的數據 | 原始型別的值<br>物件與函式的參考位置 |
| 無序的資料 | 堆疊資料結構，遵循後進先出<br>(Frist in Last Out) |

<br>


<br>

### <font class="h4">➤stack堆疊</font>
stack是 JavaScript 用來存儲靜態數據的數據結構。靜態數據是引擎在編譯時知道大小的數據。在 JavaScript 中，這包括原始型別(primitive type) 的值（`strings`、`numbers`、`booleans`、`undefined`和`null`）和指向物件和函數的參考位置reference。
由於引擎知道大小不會改變，它會為每個值分配固定數量的內存。
在執行之前分配內存的過程稱為靜態內存分配。

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

後進先出(Frist in Last Out)規則
<br>

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

<br>

### <font class="h4">➤heap堆積</font>

heap是一個不同的空間，用於存儲 JavaScript 存儲物件和函數的數據。
與stack不同，引擎不會為這些物件分配固定數量的內存。相反，將根據需要分配更多空間。
以這種方式分配內存也稱為動態內存分配。
<br>

:::info
以Google的V8引擎為例，在V8引擎中所有的javascript物件都是通過heap來進行記憶體分配的。當我們在程式碼中宣告變數並賦值時，V8引擎就會在heap記憶體中分配一部分給這個變數。如果已申請的記憶體不足以儲存這個變數時，V8引擎就會繼續申請記憶體，直到heap的大小達到了V8引擎的記憶體上限為止（預設情況下，V8引擎的heap記憶體的大小上限在64位系統中為1464MB，在32位系統中則為732MB）
:::

<br>

:::info
範例:

function ironman(){
    let one = "鐵人賽";
    let two = one;
    let three = { author: "Kyle Mo"};
    let four = three;
}
ironman();


可以發現 Object 類型的數據實際上是存在 Heap 裡，Stack 中存的只是物件在 Heap 中的記憶體位置而已，而變數 four = three 這段 code 實際上是把 Three 指向的物件在 Heap 中的記憶體位置指派給 Four 變數，所以它們實際上指向的是同一個物件，這也是身為 JS 開發者應該十分熟悉的一個特性
為什麼不把所有數據存到 Stack 裡就好？
原因是 JS Engine 是透過 stack 來維護 Execution Context 的切換狀態，如果 Stack 太過肥大，會影響 ==Context Switch== 的執行效率，連帶影響到整個程式執行的效率。以上面的例子來說，當 ironman 這個 function 執行完畢後，JS Engine 會執行環境切換，將指針移到下一層的 Execution Context，也就是 Global Execution Context，然後回收 ironman function 的 執行環境與 stack memory。
:::

<br>

### <font class="h4">➤記憶體的生命週期</font>

1. 記憶體分配：當我們申明變數、函式、物件的時候，系統會自動為他 們分配記憶體
2. 記憶體使用：即讀寫記憶體，也就是使用變數、函式等
3. 記憶體回收：使用完畢，由垃圾回收機制自動回收不再使用的記憶體

### <font class="h4">➤記憶體回收(垃圾回收機制garbage Collection)</font>
每種程式語言都有它的記憶體管理機制，比如簡單的C有低階的記憶體管理基元，像`malloc()`,`free()`。
JavaScript 這門程式語言有一個叫做 「Garbage Collector」的系統，Garbage Collector （簡稱 GC）的工作是「追蹤記憶體分配的使用情況，以便自動釋放一些不再使用的記憶體空間」。這個 GC 的機制方便歸方便，卻讓許多 JavaScript 開發者產生「寫 JS 時可以不須理會記憶體管理」的錯誤認知。
根據 MDN 文件，有 GC 機制的存在仍然不能不管記憶體管理的原因在於 GC 只是「儘量」做到自動釋放記憶體空間，因為判斷記憶體空間是否要繼續使用，這件事是「不可判定(undecidable)」的，也就是不能單純透過演算法來解決。
所以我認為了解 GC 基本的運作方式是很重要的，有了基本的觀念才能避免記憶體洩漏(memory leak) 的發生，讓應用的效能不會因為記憶體空間不足而出現瓶頸甚至崩潰。

| 全域作用域 | 區域性作用域/函式作用域 |
| ---------- | ------------ |
| 不會自動釋放| 執行完畢後就會釋放 |

<br>

### <font class="h4">➤記憶體洩漏(memory leak)</font>

<br><br><br>

### <font class="h4">➤Ｇarbage Collector記憶體回收機制</font>
<br>


<br>

---

https://www.youtube.com/watch?v=SNGhwSunKU4&ab_channel=%E5%81%B7%E7%B1%B3%E9%A8%8E%E5%B7%B4%E5%93%A5

https://blog.openreplay.com/javascript-s-memory-management-explained

https://medium.com/starbugs/%E8%BA%AB%E7%82%BA-js-%E9%96%8B%E7%99%BC%E8%80%85-%E4%BD%A0%E4%B8%8D%E8%83%BD%E4%B8%8D%E7%9F%A5%E9%81%93%E7%9A%84%E8%A8%98%E6%86%B6%E9%AB%94%E7%AE%A1%E7%90%86%E6%A9%9F%E5%88%B6-d9db2fd66f8

[JavaScript 記憶體洩漏（Memory Leak）問題](https://blog.gtwang.org/web-development/javascript-memory-leak-patterns/)

https://roy-code.medium.com/%E6%99%AE%E9%80%9A%E9%A1%9E%E5%9E%8B%E5%92%8C%E5%B0%8D%E8%B1%A1%E7%9A%84%E5%8D%80%E5%88%A5-%E6%A3%A7%E5%85%A7%E5%AD%98-stack-%E5%A0%86%E5%85%A7%E5%AD%98-heap-44295724848c

https://lyn-ho.github.io/posts/b2f2d94f/

https://antrash.pixnet.net/blog/post/70456505

https://medium.com/@yauhsienhuang/stack-%E8%88%87-heap-%E6%9C%89%E4%BD%95%E5%B7%AE%E5%88%A5-acdcc11263a0

https://pjchender.blogspot.com/2017/08/javascript-learn-event-loop-stack-queue.html

https://iter01.com/176253.html

https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=1559s&ab_channel=JSConf

https://jadokao.medium.com/%E7%B6%93%E5%85%B8%E5%BD%B1%E7%89%87-what-the-heck-is-the-event-loop-anyway-%E4%B9%8B%E7%AD%86%E8%A8%98-fa175dbe84c9

https://nwpie.blogspot.com/2017/05/5-stack-heap.html

[堆積(Heap)](https://www.youtube.com/watch?v=klbGg8dmYTM&ab_channel=%E5%A5%AEgame%E7%8E%8B%E7%B4%AB%E6%A5%93)

[堆疊(Stack)](https://www.youtube.com/watch?v=0Kiunabmm0w&t=1s&ab_channel=%E5%A5%AEgame%E7%8E%8B%E7%B4%AB%E6%A5%93)