>[success] # JS中的堆(Heap)棧(Stack)內存 1. 原始類型占據的空間是在棧內存中分配的； 2. 對象類型占據的空間是在堆內存中分配的 ~~~ 1.JavaScript 中,創建變量、函數等行為的時候JS 引擎會為此分配內存，并在不再需要時釋放它，每一次 它們都會經歷三個階段'分配內存 -- 使用內存 -- 釋放內存' 1.1.'分配內存':JavaScript 為我們解決了這個問題：它為我們創建的對象分配我們需要的內存。 1.2.'使用內存':使用內存是我們在代碼中明確做的事情讀取和寫入內存只不過是讀取或寫入變量。 1.3.'釋放內存':這一步也由 JavaScript 引擎處理。一旦分配的內存被釋放，它就可以用于新的目的。 簡單的說JS引擎會分配內存并在我們不再需要時將其釋放 2.關于儲存的位置JavaScript 引擎有兩個地方可以存儲數據'堆'和'棧' ~~~ >[info] ## 棧 -- Stack ~~~ 1.棧內存由操作系統直接管理，所以棧內存的大小也由操作系統決定是 2.像`string`、`number`、`bigint`、`boolean`、`undefined`、`null`和`symbol`指向對象和函數的引用(內存地址)， 這些數據有一個共同點。這些數據生成對應的值大小是固定的，并且這些值的大小在編譯時就可以知道，并且 會為這些不會改變的每個值分配固定數量的內存（在執行之前分配內存的過程稱為靜態內存分配） 3.雖然`typeof null`返回的是`'object'`，但是`null`不是對象 4.棧它具有以下特點： 4.1.操作數據快，因為是在棧頂操作 4.2.數據必須是靜態的，數據大小在編譯時是已知的 4.3.棧的內存管理簡單，且由操作系統完成 4.4.棧大小有限，可能發生棧溢出（Stack Overflow） ~~~ >[danger] ##### 關于賦值 ~~~ 1.'let myNumber = 23' 賦值過程經歷三個步驟 儲存的空間都在棧中 1.1.為變量創建一個唯一標識符（'myNumber'）。 1.2.在內存中分配一個地址（將在運行時分配）。 1.3.在分配的地址 (23) 中存儲一個值。 ~~~ * 如圖在棧中有個變量聲明myNumber 他的值是23  ~~~ // 根據打印結果可以看出雖然myNumber 賦值給 newVar 但 當給myNumbe 加 1的時候并沒有影響newVar // 說明棧基本類型賦值時候是重新開辟了空間 let myNumber = 23 let newVar = myNumber myNumber = myNumber + 1 console.log(myNumber ) // 24 console.log(newVar ) // 23 ~~~ * 如圖 myNumber 雖然賦值給了newVar 但是newVar 依舊在棧中新開辟了自己的空間記錄自己  ~~~ // js中的原始數據類型，因此將分配新的內存地址，abcd存儲在那里，并將mystring指向這個新的內存地址 let myString = 'abc' myString = myString + 'd' ~~~ * 當我們給之前變量重新賦值時候如圖并不是在之前基礎上的地址直接加上'd' 而是開辟了新的地址  >[danger] ##### 總結 ~~~ 1.思考"let myString = 'abc' ;myString = myString + 'd' " 為什么是新開辟地址，在開篇說過棧中的數據 有一個共同點。這些數據的大小是固定的，如果從原來的'abc' 內存大小直接變成'abcd' 完全不符合這點 相反卻變成了動態內存，因此在棧中的每一次變化都是一次新的空間開辟 ~~~ >[info] ## 堆 ~~~ 1.堆是用于存儲 JavaScript 對象和函數的數據與棧不同，引擎不會為這些對象分配固定數量的內存。 程序需要使用指針在堆中查找數據，特點 1.1.操作速度慢，但容量大 1.2.可以將動態大小的數據存儲在此處 1.3.堆在應用程序的線程之間共享 1.4.因為堆的動態特性，堆管理起來比較困難 1.5.值大小沒有限制 ~~~ >[danger] ##### 關于賦值 ~~~ 1.'let myArray= []' 賦值過程經歷四個步驟對 象的引用地址在棧中，數據存在堆中 1.1.為變量創建一個唯一標識符（'myArray'）。 1.2.分配內存中的地址（在運行時分配）。 1.3.在分配的內存地址指向堆（在運行時分配） 1.4.在內存地址指向的堆中儲存一個空數組[],這個空間是動態的 ~~~ * 如圖 myArray 變量聲明的表示符號指向棧中一個地址這個地址對應棧中的value 實際是對象堆的內存地址  ~~~ let myArray= [] myArray.push("first") myArray.push("second") myArray.push("third") myArray.push("fourth") ~~~ * 當變量賦值給另一個變量的時候內存地址指向其實是同一個 ~~~ const reference = [1]; const refCopy = reference; reference.push(2); ~~~  * 當變量重新賦值時候改變的是內存地址指向 ~~~ let obj = { first: 'reference' }; obj = { second: 'ref2' } ~~~  >[info] ## 總結 ~~~ 1.簡單通過模型來看堆棧中的關系如圖 ~~~   >[info] ## 參考文章 [在 Javascript 中解釋值與引用 ](https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0) [# JavaScript 內存詳解 & 分析指南](https://developers.weixin.qq.com/community/minigame/article/doc/000e641c5f0d1862cb8bdbe0c58c13) [# JavaScript's Memory Management Explained](https://felixgerschau.com/javascript-memory-management/#conclusion) [# JavaScript 的內存模型](https://medium.com/@ethannam/javascripts-memory-model-7c972cd2c239) [# V8中的JavaScript的內存管理與垃圾回收](https://cdmana.com/2021/09/20210912121834535c.html) [javascript-fundamentals-call-stack-and-memory-heap](https://medium.com/@allansendagi/javascript-fundamentals-call-stack-and-memory-heap-401eb8713204) [memory-life-cycle-heap-stack-javascript/](https://blog.alexdevero.com/memory-life-cycle-heap-stack-javascript/) https://www.javascripttutorial.net/javascript-call-stack/