Mutable 對象
在JavaScript 中,對像是引用類型的數據,其優點在於頻繁的修改對象時都是在原對象的基礎上修改,並不需要重新創建,這樣可以有效的利用內存,不會造成內存空間的浪費,對象的這種特性可以稱之為Mutable,中文的字面意思是「可變」。
對於Mutable 的對象,其靈活多變的優點有時可能會成為其缺點,越是靈活多變的數據越是不好控制,對於一個複雜結構的對象來說,一不小心就在某個不經意間修改了數據,假如該對象又在多個作用域中用到,此時很難預見到數據是否改變以及何時改變的。
var obj = { /* 一個複雜結構的對象*/ };doSomething(obj);// 上面的函數之行完後,此時的obj 還是最初的那個obj 嗎?針對這種問題,常規的解決辦法可以通過將對象進行深拷貝的形式複制出一個新的對象,再在新對像上做修改的操作,這樣能確保數據的可控性,但是頻繁的複制會造成內存空間的大量浪費。
var obj = { /* 一個複雜結構的對象*/ };// copy 出一個新的obj2// 但是copy 操作會浪費內存空間var obj2 = deepClone(obj);doSomething(obj2);// 上面的函數之行完後,無論obj2 是否變化,obj 肯定還是原來那個objImmutable 對象
為了能更好的解決上述的問題,出現了Immutable 對象,Immutable 從字面上翻譯成中文是「不可變」。每次修改一個Immutable 對象時都會創建一個新的不可變的對象,在新對像上操作並不會影響到原對象的數據。這種特殊的對象並不是JavaScript 新出的功能特性,而是業界為了解決這種問題提供的一套解決方案,並且湧現出了一些優秀的開源類庫,其中最有名的就是Facebook 的Lee Byron 開源的immutable.js。當然,Immutable 的這種解決方案並不是獨創的,而是來源於Clojure 和Scala。
Mutable 和Immutable 的性能對比
對於Mutable 的對象的低效率操作主要體現在復制和比較上,而Immutable 對象就是解決了這兩大低效的痛點。
普通的Mutable 對象的深拷貝操作會將一整份數據都複製一遍,而Immutable 對像在修改數據時並不會復制一整份數據,而是將變化的節點與未變化的節點的父子關係轉移到一個新節點上,類似於鍊錶的結構。從“複製” 的角度來看,做到了最小化的複制,未變化的部分都是共享的,Mutable 在復制的時候是“全量”,而Immutable 複製的是“增量”,對於內存空間的使用率的比較高低立判。
並且基於每次修改一個Immutable 對像都會創建一個新的Immutable 對象的這種特性可以將數據的修改狀態保存成一組快照,這也是挺方便的。
再來說說比較操作。對於Mutable 的對象,如果要比較兩個對像是否相等,必須遍歷對象的每個節點進行比較,對於結構複雜的對象來說,其效率肯定高不到哪去。對於Immutable 對象,immutable.js 提供了直接判斷兩個Immutable 對象的「值」是否相等的API。
var map1 = Immutable.Map({a:1, b:1, c:1});var map2 = Immutable.Map({a:1, b:1, c:1});assert(map1 !== map2); // 不同的Immutable 實例,此時比較的是引用地址assert(Immutable.is(map1, map2)); // map1 和map2 的值相等,比較的是值assert(map1.equals(map2)); // 與Immutable.is 的作用一樣在實際的開發應用中,性能並不總是最關鍵和重要的,對於普通的JavaScript 的項目來說,由於Immutable 的特性帶來的數據的可控性比起性能來說更有優勢,對於Mutable 對象適合在封閉的作用域小範圍使用,而Immutable 對象適合數據需要跨多個作用域傳遞時使用。
Mutable 和Immutable 在使用上的區別
immutable.js 提供了多種Immutable 的數據結構:包含了List Stack Map OrderedMap Set OrderedSet Record,這些數據結構與原生的Mutable 的數據結構大致對應。
各數據結構的用法這裡不細說,主要說說Immutable 對象與Mutable 對像在使用上的區別吧。
原生的Mutable 對像在「讀」和「寫」上非常方便。
var mutableObj = {};// 寫入數據mutableObj.foo = 'bar';// 讀取數據console.log(mutableObj.foo);而Immutable 對象需要通過set 和get 來對數據進行「讀」和「寫」。
var immutableObj1 = Immutable.Map();// 寫入數據var immutableObj2 = immutableObj1.set('foo', 'bar');// 讀取數據console.log(immutableObj2.get('foo')); // => 'bar'上面的例子為了說明set 方法的使用才在一開始創建了一個空對象,實際上可以在實例化的時候傳初始值。
var immutableObj = Immutable.Map({'foo', 'bar'});對於層級比較深的數據,immutable.js 提供的訪問接口很方便。
var immutableObj1 = Immutable.fromJS({ a: { b: 'c' }, d: [1, 2, 3]});// 讀取深層級的數據console.log(immutableObj1.getIn(['a', 'b'])); // => 'c'console.log(immutableObj1.getIn(['d', 1])); // => 2// 修改深層級的數據var immutableObj2 = immutableObj1.setIn(['a', 'b'], 'd');console.log(immutableObj2.getIn(['a', 'b'])); // => 'd'如果是原生的Mutable 對象,在鍊式訪問一個深層級的數據時可能會報對象undefined 的錯誤,而Immutable 對像在碰到這種情況時不會報錯,返回的是undefined。
在調試的時候,如果想查看一個Immutable 對象的內部結構,建議使用toJSON() 先轉換為普通的Mutable 對象。