本期的主題是調用堆棧，本計劃一共28期，每期重點攻克一個面試重難點，如果你還不了解本進階計劃，文末點擊查看全部文章。

如果覺得本系列不錯，歡迎點贊、評論、轉發，您的支持就是我堅持的最大動力。

---

堆棧的內容和執行順序我就不說了，前面兩篇已經介紹過了。

但是今天補充一個知識點：某些情況下，調用堆棧中函數調用的數量超出了調用堆棧的實際大小，瀏覽器會拋出一個錯誤終止運行。

對于下面的遞歸就會無限制的執行下去，直到超出調用堆棧的實際大小，這個是瀏覽器定義的。

function foo() {foo(); } foo(); 復制代碼

現在正式開始今天的主題，內存空間詳解

棧數據結構

棧的結構就是后進先出**（LIFO）**，如果讀過前面兩篇文章應該是相當熟悉了。文中使用乒乓球盒子的結構來解釋。

處于盒子中最頂層的乒乓球5，它一定是最后被放進去，但可以最先被使用。而我們想要使用底層的乒乓球1，就必須將上面的4個乒乓球取出來，讓乒乓球1處于盒子頂層。

堆數據結構

堆數據結構是一種樹狀結構。它的存取數據的方式與書架和書非常相似。我們只需要知道書的名字就可以直接取出書了，并不需要把上面的書取出來。JSON格式的數據中，我們存儲的key-value可以是無序的，因為順序的不同并不影響我們的使用，我們只需要關心書的名字。

隊列

隊列是一種先進先出（FIFO）的數據結構，這是事件循環（Event Loop）的基礎結構，事件循環我們會在第8期詳解介紹。

變量的存放

首先我們應該知道內存中有棧和堆，那么變量應該存放在哪里呢，堆？棧？

• 1、基本類型 --> 保存在棧內存中，因為這些類型在內存中分別占有固定大小的空間，通過按值來訪問。基本類型一共有6種：Undefined、Null、Boolean、Number 、String和Symbol
• 2、引用類型 --> 保存在堆內存中，因為這種值的大小不固定，因此不能把它們保存到棧內存中，但內存地址大小的固定的，因此保存在堆內存中，在棧內存中存放的只是該對象的訪問地址。當查詢引用類型的變量時， 先從棧中讀取內存地址， 然后再通過地址找到堆中的值。對于這種，我們把它叫做按引用訪問。

在計算機的數據結構中，棧比堆的運算速度快，Object是一個復雜的結構且可以擴展：數組可擴充，對象可添加屬性，都可以增刪改查。將他們放在堆中是為了不影響棧的效率。而是通過引用的方式查找到堆中的實際對象再進行操作。所以查找引用類型值的時候先去棧查找再去堆查找。

幾個問題

問題1：

var a = 20; var b = a; b = 30;// 這時a的值是多少？ 復制代碼

問題2：

var a = { name: '前端開發' } var b = a; b.name = '進階';// 這時a.name的值是多少 復制代碼

問題3：

var a = { name: '前端開發' } var b = a; a = null;// 這時b的值是多少 復制代碼

現在來解答一下，三個問題的答案分別是20、‘進階’、{ name: '前端開發' }

• 對于問題1，a、b都是基本類型，它們的值是存儲在棧中的，a、b分別有各自獨立的棧空間，所以修改了b的值以后，a的值并不會發生變化。
• 對于問題2，a、b都是引用類型，棧內存中存放地址指向堆內存中的對象，引用類型的復制會為新的變量自動分配一個新的值保存在變量對象中，但只是引用類型的一個地址指針而已，實際指向的是同一個對象，所以修改b.name的值后，相應的a.name也就發生了改變。
• 對于問題3，首先要說明的是null是基本類型，a = null之后只是把a存儲在棧內存中地址改變成了基本類型null，并不會影響堆內存中的對象，所以b的值不受影響。

內存空間管理

JavaScript的內存生命周期是

• 1、分配你所需要的內存
• 2、使用分配到的內存（讀、寫）
• 3、不需要時將其釋放、歸還

JavaScript有自動垃圾收集機制，最常用的是通過標記清除的算法來找到哪些對象是不再繼續使用的，使用a = null其實僅僅只是做了一個釋放引用的操作，讓 a 原本對應的值失去引用，脫離執行環境，這個值會在下一次垃圾收集器執行操作時被找到并釋放。

在局部作用域中，當函數執行完畢，局部變量也就沒有存在的必要了，因此垃圾收集器很容易做出判斷并回收。但是全局變量什么時候需要自動釋放內存空間則很難判斷，因此在開發中，需要盡量避免使用全局變量。

思考題

var a = {n: 1}; var b = a; a.x = a = {n: 2};a.x // 這時 a.x 的值是多少 b.x // 這時 b.x 的值是多少 復制代碼

參考

前端基礎進階（一）：內存空間詳細圖解

解讀 JavaScript 之引擎、運行時和堆棧調用

JavaScript變量——棧內存or堆內存

進階系列目錄

• 【進階1期】 調用堆棧
• 【進階2期】 作用域閉包
• 【進階3期】 this全面解析
• 【進階4期】 深淺拷貝原理
• 【進階5期】 原型Prototype
• 【進階6期】 高階函數
• 【進階7期】 事件機制
• 【進階8期】 Event Loop原理
• 【進階9期】 Promise原理
• 【進階10期】Async/Await原理
• 【進階11期】防抖/節流原理
• 【進階12期】模塊化詳解
• 【進階13期】ES6重難點
• 【進階14期】計算機網絡概述
• 【進階15期】瀏覽器渲染原理
• 【進階16期】webpack配置
• 【進階17期】webpack原理
• 【進階18期】前端監控
• 【進階19期】跨域和安全
• 【進階20期】性能優化
• 【進階21期】VirtualDom原理
• 【進階22期】Diff算法
• 【進階23期】MVVM雙向綁定
• 【進階24期】Vuex原理
• 【進階25期】Redux原理
• 【進階26期】路由原理
• 【進階27期】VueRouter源碼解析
• 【進階28期】ReactRouter源碼解析

交流

進階系列文章匯總：github.com/yygmind/blo…，內有優質前端資料，覺得不錯點個star。

我是木易楊，網易高級前端工程師，跟著我每周重點攻克一個前端面試重難點。接下來讓我帶你走進高級前端的世界，在進階的路上，共勉！

總結

以上是生活随笔為你收集整理的【进阶1-3期】JavaScript深入之内存空间详细图解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。