JavaScript的記憶體模型

引言

在我們的前端日常作業中，無時無刻不在進行著變數的宣告和賦值，你是否也曾碰到過變數宣告報錯或變數被污染的問題，如果你跟筆者一樣碰到過，那么我們應該暫時停下來好好思考問題發生的原因以及如何采取相應的補救措施，當然排查問題最好的方式就是深入其底層細節，了解在JavaScript中的記憶體分配方式，只有我們對底層細節有一定的了解之后，才能輕而易舉地化解在寫代碼程序中遇到的各種問題，本文基于JavaScript的記憶體模型繼續衍生出let和const的差異性對比，若文中有錯誤的地方，還請指出，

1、記憶體是什么

在講解JavaScript中的記憶體模型之前，我們先從硬體層面來簡單了解下記憶體是什么，

記憶體是計算機中重要的部件之一，它是外存與CPU進行溝通的橋梁，計算機中所有程式的運行都是在記憶體中進行的，因此記憶體的性能對計算機的影響非常大，記憶體(Memory)也被稱為記憶體儲器和主存盤器，其作用是用于暫時存放CPU中的運算資料，以及與硬碟等外部存盤器交換的資料，只要計算機在運行中，CPU就會把需要運算的資料調到記憶體中進行運算，當運算完成后CPU再將結果傳送出來，記憶體的運行也決定了計算機的穩定運行，

記憶體條是計算機組成結構中的關鍵部分，其本身是一個非常精密的部件，內部包含了上億個電子元器件，它們很小，達到了納米級別，這些元器件，實際上也就是電路，電路的電壓會發生變化，但只有兩種可能，要么0V(低電平)，要么5V(高電平)，0V是斷電，用0來表示，5V是通電，用1來表示，因此一個元器件包含了兩個狀態0和1，即表示一位(bit)，但是作為人類，我們并不擅長使用bit來思考和計算，因此我們會將它們劃分成更大的組，例如8位表示1個byte(位元組)，16位表示2個byte(位元組)，32位表示4個byte(位元組)，有很多東西都是存盤在記憶體中的，比如我們的程式代碼，程式中所宣告的變數以及作業系統的代碼等，

2、記憶體的生命周期

了解了記憶體的基本概念后，我們來簡單聊聊記憶體的生命周期，JavaScript作為一門高級編程語言，不像其他語言(例如C語言)中需要開發人員手動地去管理記憶體，系統會自動為你分配記憶體，但是無論是哪種編程語言，記憶體的生命周期都主要分為三個階段：

• 分配記憶體：由作業系統來分配記憶體，供程式使用，在JavaScript中，這一步由作業系統來自動分配，無需開發人員手動操作，
• 使用記憶體：程式獲得作業系統所分配的記憶體之后，在記憶體中發生讀和寫操作，
• 釋放記憶體：程式使用完記憶體之后，會將這部分記憶體釋放出來供其他程式使用，在JavaScript中，這一步同樣不需要開發人員手動操作，由作業系統自動釋放，

我們知道，在JavaScript中的資料型別分為基本資料型別和參考資料型別，其中基本資料型別包括String、Number、Boolean、Null、Undefined，ES6中新增的Symbol以及最新的BigInt，除了這些以外，其他的均為參考資料型別，例如Array、Date、Function、RegExp、Error，Object等，那么這兩種資料型別的其中一個區別就是，基本資料型別的記憶體大小都是固定的，而參考資料型別的記憶體大小都是動態不固定的，可能會隨時發生變化，因此在記憶體分配階段這兩種資料型別會有一定的差異，

編譯器在編譯代碼時，對于基本資料型別，由于其空間大小固定，編譯器在檢查時會提前計算它們需要的記憶體大小，并插入與作業系統互動的代碼，向作業系統申請存盤變數所需的堆疊位元組數，然后將申請到的記憶體分配給呼叫堆疊中的程式，稱為靜態記憶體分配，例如在呼叫函式時，函式中的變數所需的記憶體會被添加到現有的記憶體之上，當函式執行完畢后，這部分記憶體又會以后進先出(LIFO)的順序被移除，但是對于參考資料型別，其空間大小是動態的，在編譯階段無法直接確定其需要多少記憶體，因此不能在堆疊上為其分配記憶體，相反，需要在運行時向作業系統申請適當的記憶體，并且這部分記憶體是在堆空間進行分配的，稱為動態記憶體分配，靜態記憶體分配和動態記憶體分配的區別如下表所示：

3、JavaScript中的記憶體分配

在我們的前端開發日常作業中，幾乎每天都在做著變數的宣告和賦值，這些變數最終都會被存放到記憶體中，所以我們還是有必要了解一下在JavaScript中的記憶體分配方式，這里使用基本資料型別和參考資料型別來分別講述一下記憶體的分配程序，幫助我們理解JavaScript的底層細節，
首先我們從一個簡單的基本資料型別的賦值開始，代碼如下：

let num = 1;

當JavaScript引擎在執行到這行代碼時，會執行如下操作：

• 為變數num創建一個唯一識別符號(identifier)，該識別符號用于與堆疊記憶體中的地址A1形成映射關系，
• 在堆疊記憶體中為其分配一個地址A1，
• 將值1存盤到分配的地址，

示例圖如下：

通常我們說num變數的值等于1，但其實嚴格意義上來講，num變數的值等于堆疊記憶體中存放對應值的記憶體地址(如圖中的A1)，接下來我們創建一個新的變數newNum并將num賦值給它：

let newNum = num;

經過以上賦值之后，通常說newNum的值為1，同樣從嚴格意義上來講的話是指newNum和num指向同一個記憶體地址A1，如下圖所示：

如果接下來我們執行以下操作，看會發生什么：

num = num + 1;

我們對num變數進行自增長，很顯然num變數的值為2，由于newNum和num指向同一個記憶體地址A1，那么此時newNum的值是否也為2呢，在回答這個問題之前，我們先來看一下當前記憶體地址發生的變化：

在上圖中我們可以發現，num變數的記憶體地址發生了改變，由原來的A1變為A2，這是因為在JS中的基本資料型別都是不可變的，一旦修改，只會為其分配新的記憶體地址并將修改后的新值存入到新的地址中，因此回答上面的那個問題，newNum的值保持不變，依舊為1，因為它的記憶體地址沒有發生改變，再看如下示例：

let str = 'ab';
str = str + 'c';

因為字串也是屬于基本資料型別，基本資料型別都是不可變的，所以即使上述代碼中只是簡單的將c拼接到了原來的字串ab后面，但是依舊會為其分配新的記憶體地址，變數str最侄訓指向這個新的記憶體地址，如下圖所示：

了解了基本資料型別的記憶體分配方式之后，接下來我們來了解下參考資料型別的記憶體分配方式，同樣我們從一個簡單的參考資料型別的賦值開始：

let arr = [];

當JavaScript引擎在執行到這行代碼時，會執行如下操作：

• 為變數arr創建一個唯一識別符號(identifier)，該識別符號用于與堆疊記憶體中的地址A3形成映射關系，
• 在堆疊記憶體中為其分配一個地址A3，
• 堆疊記憶體中存盤在堆中分配的記憶體地址的值H1，
• 在堆中存盤分配的值空陣列[]，

示例圖如下：

在JavaScript引擎(例如Chrome和Node的V8引擎)中主要是由兩個部件組成，一個叫記憶體堆(Memory Heap)，一個叫呼叫堆疊(Call Stack)，其中呼叫堆疊除了函式呼叫之外，主要用于存放基本資料型別的值，而參考資料型別的值一般都存放在記憶體堆中，堆中存放的資料都是無序的并且可以動態地增長，所以非常適合用于存盤陣列和物件，

4、let和const的差異性對比

在了解完以上兩種資料型別的記憶體分配方式后，我們這里對let和const的使用方式進行一下對比，通常來說，我們建議在寫代碼的程序中能使用const的地方盡量減少使用let，這樣可以在某種程度上避免變數被無端修改而引發的一系列問題，如下代碼：

let num = 1;
num = num + 1;
let arr = [];
arr.push(1);
arr.push(2);
arr.push(3);

在上述代碼中，變數num因為使用let的方式宣告，所以允許其被修改，因為基本型別的值是不可變的，所以會為num變數分配新的記憶體地址，對于arr變數，這里同樣使用let方式進行宣告，表示允許其修改，但是對于push操作其實并沒有修改arr變數的記憶體地址，只是將新的值推入了堆記憶體的陣列中，所以此處建議修改為使用const進行宣告，

筆者的觀點是：將修改理解為修改記憶體地址，若允許修改記憶體地址，則使用let進行宣告，否則使用const進行宣告，

如下示例：

const num = 1;
num = num + 1;

由在上一小節中了解到的基本資料型別的記憶體分配方式，我們知道為變數num在堆疊記憶體中分配了一個地址來保存對應的值，

但是這里我們是使用const的方式來進行宣告的，當我們重新為變數num進行賦值時，JS嘗試為其分配新的記憶體地址，那么這里也就是拋出錯誤的地方，因為我們明確不允許對其進行修改，

因此在控制臺中我們會看到對應的報錯資訊，

再看如下示例：

const arr = [];

對于參考資料型別，我們知道會在堆疊記憶體上為其分配記憶體地址，存盤的是堆中的記憶體地址的值，

我們做如下操作：

arr.push(1);
arr.push(2);
arr.push(3);

執行push操作實際上是將新值推入堆中的陣列，記憶體地址并沒有發生改變，這也就是為什么雖然使用const宣告變數，但是依舊沒有報錯的原因，但是如果我們使用如下方式：

arr = 1;
arr = undefined;
arr = null;
arr = [];
arr = {};

這些方式都會修改原陣列的記憶體地址，const宣告是不允許修改記憶體地址的，所以很明顯會拋出錯誤，因此這里也是建議默認情況下使用const宣告變數，除非需要修改記憶體地址，const宣告的變數必須在宣告時進行初始化，也方便了其他前端人員能一眼看出哪些變數是不可變的，

5、總結

在本篇中主要總結了一下JavaScript中的記憶體模型，并針對基本資料型別和參考資料型別分別講述了其在JavaScript中的記憶體分配方式，然后對let和const這兩種在代碼中的變數宣告方式進行對比以了解其中的差異性，下篇基于記憶體模型繼續講解JavaScript引擎中的垃圾回識訓制以及在寫代碼程序中的幾種有效避免記憶體泄漏的方式，和大家一起了解JavaScript的底層細節，

6、交流

若覺得筆者的文章對你有幫助的話，不妨關注下筆者的公眾號，每周都會原創和整理一些前端技術干貨，關注公眾號后可以邀你入群，我們一起交流前端，相互學習，共同進步，

文章已同步更新至Github博客，若覺文章尚可，歡迎前往star！

你的一個點贊，值得讓我付出更多的努力！

逆境中成長，只有不斷地學習，才能成為更好的自己，與君共勉！

標籤：JavaScript

上一篇：一起學Vue之計算屬性和偵聽器

下一篇：中華人民共和國行政區劃：省級（省份直轄市自治區）、 地級（城市）、 縣級（區縣）、 鄉級（鄉鎮街道）、 村級（村委會居委會）