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);                 // {}

b和c指向同样的记忆体位置，所以内部的属性改变，就会互相影响。

物件是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 资料型态

---正文结束---