iT邦幫忙

2021 iThome 鐵人賽

DAY 22
1
自我挑戰組

重新開始 JavaScript系列 第 22

[Day22] 傳值跟傳參考概念

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 核心篇

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


上一篇
[Day21] 物件的基礎概念2
下一篇
[Day23] 物件傳參考範例
系列文
重新開始 JavaScript32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言