JavaScript 的型別有兩種 - 純值與物件，而在 JavaScript 中，賦予一個值到變數上時會有兩個特性 - 傳值與傳參考，純值是透過傳值的方式來做傳遞，而物件則是透過傳參考，以下是關於傳值與傳參考的說明：

傳值 (call by value)

傳值是一種複製的概念，而 純值是透過傳值的方式來做傳遞，當一個變數被賦予至另一個變數上，在賦予值之後，兩個變數就沒有關係了

以下範例是使用字串(純值)來做傳遞

• 宣告 變數 person 後，記憶體會存放 變數 person 的名稱與值
• 宣告 變數 person2 並將 變數 perosn 賦予至 變數 person2 上，變數 person2 會直接接收 變數 perosn 的值 -> 此種方式就是傳值
• 就算更改 變數 person2 的值，變數 person 的值也不會改變

var person = 'Carol';
var person2 = person;
person2 = 'Mary';

console.log(person); // Carol
console.log(person2); // Mary

運作過程：

純值有：

• Number 數字型別
• String 字串型別
• Boolean 布林值
• Null 空
• Undefined 未定義
• BigInt 整數數值
• Symbol

傳參考 (call by reference)

物件型別(ex: 物件、陣列、函式)都屬於傳參考

範例1

此範例中當更改了 變數 person2 的值，變數 person 同樣也會被更改到，因他們指向相同物件。使用嚴格相等也可看到 變數 person、變數 person2 是指向同個記憶體參考路徑

• 設定 變數 person 並賦予一個物件型別的值，這個物件會存放在記憶體中，而 變數 person 則會指向此物件的 記憶體參考路徑
• 當將 變數 person 賦予至 變數 person2，變數 person2 也會指向同一個 記憶體參考路徑
• 所以當我們修改 變數 person2 的物件時，因與 變數 person 是指向相同物件，所以 變數 person 也同樣會被更改到

var person = {
    name: 'Carol',
    money: 200
};
var person2 = person;
person2.nickName = 'Jay';

console.log(person); // {name: 'Jay', money: 200}
console.log(person2); // {name: 'Jay', money: 200}
console.log(person === person2); // true

範例1 運作過程

範例2

當變數重新賦予新的物件時，表示指向新物件的 記憶體參考路徑

此範例中當將 變數 person2 重新賦予一個新的物件，變數 person2 會指向新物件，所以就算修改 變數 person2 也不會影響 變數 person。使用嚴格相等也可看到 變數 person、變數 person2 是指向不同個記憶體參考路徑

• 賦予 變數 person 一個物件型別的值，此物件會存放在記憶體中，而 變數 person 會指向此物件的 記憶體參考路徑
• 當將 變數 person 賦予至 變數 person2，變數 person2 會與 變數 person 指向同一個 記憶體參考路徑
• 當我們重新賦予 變數 person2 一個物件型別的值，變數 person2 會指向新物件的記憶體參考路徑
• 所以當修改 變數 person2 的物件時，因與 變數 person 已指向不同的 記憶體參考路徑，故 變數 person 不會被更改到

var person = {
    name: 'Carol',
    money: 200
};
var person2 = person;
person2 = { name: 'Jay' };
person2.name = 'Mary';

console.log(person); // {name: 'Carol', money: 200}
console.log(person2); // {name: 'Mary'}
console.log(person === person2); // false

範例2 運作過程

參考文獻

六角學院 - JavaScript 核心篇

心得： 畫圖真的很花時間 ><