數據類型之間的區別（堆內存Heap VS 棧內存Stack）

在瞭解數據類型之間的區別以前咱們首先要了解計算機的運行機制。

1、webkit底層運行機制

底層渲染過程

• 一、在瀏覽器中打開頁面，瀏覽器引擎會渲染相關的代碼（包含JS代碼），換句話說，會把代碼自上而下執行
• 二、瀏覽器想要執行代碼，會提供一個供代碼執行的環境，咱們把這個環境叫作ECStack（Execution Context Stack 執行環境棧）=> 棧內存 Stack（棧內存做用：供代碼自上而下執行）
• 三、最開始執行的是全局代碼，因此會造成一個EC（GLOBAL）全局上下文，在棧內存中執行全局的代碼
• 四、在全局的執行上下文中有一個VO（GLOBAL）全局變量對象，能夠把接下來定義的變量和對應的值儲存到這裏面

內存的概念

• Stack 棧內存
  • 打個比方：內存條：4G/8G......
• Heap 堆內存
  • 打個比方：硬盤：500GB/1TB......

所謂堆棧內存，其實就是在計算機內存中分配出來的一塊空間，用來執行和儲存代碼的

圖例以下：

瞭解了瀏覽器的運行機制，接下來咱們在看基本數據類型和引用數據類型之間的關係

2、基本數據類型（值類型）

值類型因爲結構相對簡單，直接把建立的值存儲到「棧內存」中便可，由此咱們能夠總結一下棧內存的做用；

• 棧內存的做用
  • 一、供代碼自上而下執行
  • 二、存儲基本類型值
• 基本數據類型執行過程：
  • 一、建立一個值（基本類型值直接存儲在棧內存中便可）；
  • 二、建立一個變量a ，把其儲存到VO（GLOBAL）中；
  • 三、讓建立的變量a 和建立的值12 關聯在一塊兒 => =賦值的操做
  • 這就是定義變量的三個步驟（明確順序）順序很重要，不能顛倒
• 例題：

  let a = 12;
  let b = a;
  b = 13;
  console.log(a);
  複製代碼

  結合上面講述的瀏覽器的底層機制簡單分析一下此題：

3、引用數據類型（對象函數）

引用數據類型的結構相對複雜（是一個綜合體，包含不少值），因此不能直接存儲在棧內存中，須要

• 單獨開闢空間來存儲，這個空間就是「堆內存」，引用數據類型值都存儲在單獨開闢的「堆內存」中！

• 堆內存只有一個做用：

  • 存儲引用類型值

• 引用數據類型中對象的執行過程：（不包含函數，函數涉及內容較多後續單獨講解）

  • 一、建立值
    • 開闢一個堆內存（Heap），每個堆內存都有一個16進制的地址
    • 把對象中的鍵值對分別存儲到堆內存中
    • 把堆內存的地址放在棧內存中，用來供變量的引用
  • 二、建立一個變量
  • 三、讓變量和以前建立堆內存的地址進行關聯

• 例題：

  let n = {
      name: '芝麻'
  };
  let m = n;
  m.name = '金色';
  console.log(n.name);
  複製代碼

綜上所述，簡單一句話歸納：

• 基本數據類型是按值操做，值存儲在棧內存中；
• 引用數據類型是按照堆內存的地址來操做；

思惟導圖