Immutable 在 JavaScript 中的应用
Mutable对象
在JavaScript中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为Mutable,中文的字面意思是「可变」。
对于Mutable的对象,其灵活多变的优点有时可能会成为其缺点,越是灵活多变的数据越是不好控制,对于一个复杂结构的对象来说,一不小心就在某个不经意间修改了数据,假如该对象又在多个作用域中用到,此时很难预见到数据是否改变以及何时改变的。
varobj={/*一个复杂结构的对象*/}; doSomething(obj); //上面的函数之行完后,此时的obj还是最初的那个obj吗?
针对这种问题,常规的解决办法可以通过将对象进行深拷贝的形式复制出一个新的对象,再在新对象上做修改的操作,这样能确保数据的可控性,但是频繁的复制会造成内存空间的大量浪费。
varobj={/*一个复杂结构的对象*/}; //copy出一个新的obj2 //但是copy操作会浪费内存空间 varobj2=deepClone(obj); doSomething(obj2); //上面的函数之行完后,无论obj2是否变化,obj肯定还是原来那个obj
Immutable对象
为了能更好的解决上述的问题,出现了Immutable对象,Immutable从字面上翻译成中文是「不可变」。每次修改一个Immutable对象时都会创建一个新的不可变的对象,在新对象上操作并不会影响到原对象的数据。这种特殊的对象并不是JavaScript新出的功能特性,而是业界为了解决这种问题提供的一套解决方案,并且涌现出了一些优秀的开源类库,其中最有名的就是Facebook的LeeByron开源的immutable.js。当然,Immutable的这种解决方案并不是独创的,而是来源于Clojure和Scala。
Mutable和Immutable的性能对比
对于Mutable的对象的低效率操作主要体现在复制和比较上,而Immutable对象就是解决了这两大低效的痛点。
普通的Mutable对象的深拷贝操作会将一整份数据都复制一遍,而Immutable对象在修改数据时并不会复制一整份数据,而是将变化的节点与未变化的节点的父子关系转移到一个新节点上,类似于链表的结构。从“复制”的角度来看,做到了最小化的复制,未变化的部分都是共享的,Mutable在复制的时候是“全量”,而Immutable复制的是“增量”,对于内存空间的使用率的比较高低立判。
并且基于每次修改一个Immutable对象都会创建一个新的Immutable对象的这种特性可以将数据的修改状态保存成一组快照,这也是挺方便的。
再来说说比较操作。对于Mutable的对象,如果要比较两个对象是否相等,必须遍历对象的每个节点进行比较,对于结构复杂的对象来说,其效率肯定高不到哪去。对于Immutable对象,immutable.js提供了直接判断两个Immutable对象的「值」是否相等的API。
varmap1=Immutable.Map({a:1,b:1,c:1}); varmap2=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的数据结构:包含了ListStackMapOrderedMapSetOrderedSetRecord,这些数据结构与原生的Mutable的数据结构大致对应。
各数据结构的用法这里不细说,主要说说Immutable对象与Mutable对象在使用上的区别吧。
原生的Mutable对象在「读」和「写」上非常方便。
varmutableObj={}; //写入数据 mutableObj.foo='bar'; //读取数据 console.log(mutableObj.foo);
而Immutable对象需要通过set和get来对数据进行「读」和「写」。
varimmutableObj1=Immutable.Map(); //写入数据 varimmutableObj2=immutableObj1.set('foo','bar'); //读取数据 console.log(immutableObj2.get('foo'));//=>'bar'
上面的例子为了说明set方法的使用才在一开始创建了一个空对象,实际上可以在实例化的时候传初始值。
varimmutableObj=Immutable.Map({'foo','bar'});
对于层级比较深的数据,immutable.js提供的访问接口很方便。
varimmutableObj1=Immutable.fromJS({ a:{ b:'c' }, d:[1,2,3] }); //读取深层级的数据 console.log(immutableObj1.getIn(['a','b']));//=>'c' console.log(immutableObj1.getIn(['d',1]));//=>2 //修改深层级的数据 varimmutableObj2=immutableObj1.setIn(['a','b'],'d'); console.log(immutableObj2.getIn(['a','b']));//=>'d'
如果是原生的Mutable对象,在链式访问一个深层级的数据时可能会报对象undefined的错误,而Immutable对象在碰到这种情况时不会报错,返回的是undefined。
在调试的时候,如果想查看一个Immutable对象的内部结构,建议使用toJSON()先转换为普通的Mutable对象。