iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 25

24. 解釋 immutable / immutability

mutable vs. immutable


在開始說明前,先複習一道題目:

var a = {};  
var b = a;                      
var c = b = { number: 1 };      
c.name = 'yahaha';              
console.log(a);                 // output =?

Ans. console.log(a);會輸出 {},也就是空物件。

但可以想一想b和c的輸出是什麼,想好再往下看!

console.log(b);                  // {number: 1, name: 'yahaha'}
console.log(c);                  // {number: 1, name: 'yahaha'}

為什麼明明.name的屬性是給c,卻會影響到b?

這是基於JS裡的物件,是透過 傳參考(call by reference ) 的方式,
藉由共用相同的記憶體位置,共享資料來源。

所以上面題目的關係是這樣子:

var a = {};                     // 指派一個空物件(一個記憶體位置)
var b = a;                      // b指向a
var c = b = { number: 1 };      // c指向b, b 指向一個新的物件(另一個記憶體位置)
c.name = 'yahaha';                
console.log(a);                 // {}

bc指向同樣的記憶體位置,所以內部的屬性改變,就會互相影響。

物件是Mutable(可變的)

這是基於JS裡的物件,除了基本型態外,會透過 傳參考(call by reference ) 的方式共享資料來源。
因此,指向同個物件(同個記憶體位置)的變數會互相影響,所以是可變的。
這樣的好處是可以共享記憶體位置,節省記憶體的空間。

基本型態的資料都是immutable(不可變的)

相對於物件,因為基本型態的資料是直接傳值(call by value),每次指派都會分配新的記憶體位置,在記憶體位置上儲存值。
賦值後如果有任何改變(例如:新增、修改、刪除),不會直接更動記憶體上的資料,而是回傳一個新值,所以是不可變的。

(因為之前沒寫過Data type,下面寫的比較詳細,想要複習可以往下看。)

JavaScript Data type


在JS裡,Data type資料型態 分為 Primitive 基本型態Composite 複合型態

Primitive 基本型態

  1. number
  2. string
  3. boolean
  4. null
  5. undefined
  6. symbol ( ES6新增 )

Composite 複合型態

  • Object literal 物件實字 : 如 { } 為Object建構式的實例(instance),可以建立物件。
> typeof {}
'object'

> let human = { name: 'Winnie the Pooh', age: 108 }
undefined
  • 包裹物件 : 以 new 關鍵字 建立包裹物件
> typeof 10
'number'

> typeof Number
'function'

> typeof Number(10)
'number'

> typeof new Number(10)
'object'
> typeof 'caterpillar'
'string'

> typeof new String('caterpillar')
'object'
  • Array literal 陣列實字 : 陣列也是物件
> typeof []
'object'
> [].length
0
> let arr = [1, 2, 3]
undefined
  • Array-like 類陣列 : 如 字串(從ES5開始)即是類陣列,但字串的內容無法變動。

提問

  • 解釋 mutable 與 immutable objects 之間的不同。
  • 舉個 immutable 在 JavaScript 中例子?
  • immutability 的憂劣?
  • 如何達成 immutability?

【如內文有誤還請不吝指教>< 並感謝閱覽至此的各位:D 】

參考資料 :
-寫 React 的時候常常聽到 immutable,什麼是 immutable ?
-Immutability 為何重要?淺談 immutable.js 和 seamless-immutable
-[ngrx/store-8] Javascript Mutable 跟 Immutable 資料型態

---正文結束---


上一篇
23. React key 的用途
下一篇
25. Redux 的用途 & 入門實作 (上)
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言