前端學習(26)~js學習(四)：基本數據類型vs引用數據類型

• 2020 年 3 月 18 日
• 筆記

在上一篇文章中，我們介紹過，變數有以下數據類型：

• 基本數據類型（值類型）：String 字元串、Number 數值、Boolean 布爾值、Null 空值、Undefined 未定義。
• 引用數據類型（引用類型）：Object 對象。

本文，我們針對這兩種類型，做進一步介紹。我們先來看個例子。

基本數據類型舉例：

    var a = 23;      var b = a;        a++;        console.log(a); // 列印結果：24      console.log(b); // 列印結果：23

上面的程式碼中：a 和 b 都是基本數據類型，讓 b 等於 a，然後改變 a 的值之後，發現 b 的值並沒有被改變。

但是在引用數據類型中，就不同了，我們來看一看。

引用數據類型舉例：

    var obj1 = new Object();      obj1.name = 'smyh';        // 讓 obj2 等於 obj1      var obj2 = obj1;        // 修改 obj1 的 name 屬性      obj1.name = 'vae';        console.log(obj1.name); // 列印結果：vae      console.log(obj2.name); // 列印結果：vae

上面的程式碼中：obj1 和 obj2 都是引用數據類型，讓 obj2 等於 obj1，然後修改 obj1.name 的值之後，發現 obj2.name 的值也發生了改變。

從上面的例子中，可以反映出，基本數據類型和引用數據類型是有區別的。

那到底有什麼區別呢？我們進一步往下看。

棧記憶體和堆記憶體

我們首先記住一句話：JS中，所有的變數都是保存在棧記憶體中的。

然後來看看下面的區別。

基本數據類型：

基本數據類型的值，直接保存在棧記憶體中。值與值之間是獨立存在，修改一個變數不會影響其他的變數。

引用數據類型：

對象是保存到堆記憶體中的。每創建一個新的對象，就會在堆記憶體中開闢出一個新的空間，而變數保存了對象的記憶體地址（對象的引用）。如果兩個變數保存了同一個對象的引用，當一個通過一個變數修改屬性時，另一個也會受到影響。