JavaScript对象不变性知多少

属性描述符

ES5开始所有的属性都有了属性描述符,以表示属性的一些特性。 我们可以通过Object.getOwnPropertyDescriptor(...)查看属性描述符。

let obj = {a: 'a'};
let descriptor = Object.getOwnPropertyDesciptor(obj, 'a');
//descriptor: {value: 'a', writable: true, enumerable: true, configurable: true}
复制代码

这里我们只讨论其中的writable(可写)、configurable(可配置),我们可以通过Object.defineProperety(...)来配置属性描述符。 当设置了writable为false时,该属性的值无法修改。

Object.defineProperty(obj, 'a', {writable: false});
obj.a = 'b'; //obj.a = 'a'
复制代码

当设置了configurable为false时,无法重新配置该属性的特性,且无法删除该属性,该操作是不可逆的。(唯一可以设置的情况是,将writable为true 改为writable为false)

Object.defineProperty(obj, 'a', {configurable: false});
delete obj.a //obj.a = 'a';
Object.defineProperty(obj, 'a', {configurable: true}); //Type Error
Object.defineProperty(obj, 'a', {writable: false});
obj.a = 'aa'; //obj = {a: 'a'}
复制代码

禁止扩展

Object.preventExtensions(...)防止后续向对象新增属性。

let obj = {a: 'a'};
Object.preventExtensions(obj);
obj.b = 'b'; //obj = {a: 'a'}
console.log(Object.isExtensible(obj)); //false
复制代码

密封对象

Object.seal(...)可以创建一个密封的对象,该对象的属性不可扩展、配置、删除,但可以修改。实际上该方法就是对对象先用Object.preventExtensions禁止扩展属性,再将对象所有属性的configurable特性设置false。

let obj = {a: 'a', b: 'b'};
Object.seal(obj);
obj.c = 'c'; //obj = {a: 'a', b: 'b'}
delete obj.a;
delete obj.b; //obj = {a: 'a', b: 'b'}
obj.a = 'aa'; //obj = {a: 'aa', b: 'b'}
console.log(Object.isSealed(obj)); //true
复制代码

冻结对象

Object.freeze(...)可以创建一个冻结的对象,该对象的属性不可扩展、配置、删除、修改,是js中对象最高不可变性。实际上该方法就是调用Object.seal(...)将对象设置成密封对象后,在将所有数据访问属性设置为writable:false。

let obj = {a: 'a', b: 'b'};
Object.freeze(obj);
obj.c = 'c'; //obj = {a: 'a', b: 'b'}
delete obj.a;
delete obj.b; //obj = {a: 'a', b: 'b'}
obj.a = 'aa'; //obj = {a: 'a', b: 'b'}
console.log(Object.isFrozen(obj)); //true
复制代码

这个方法是你可以应用在对象上的级别最高的不可变性,它会禁止对于对象本身及其任意直接属性的修改(不过这个对象引用的其他对象是不受影响的)。 ###注意 这里对象中的不可变性都是浅不变性,如果属性引用的是对象、数组等引用类型,该引用的对象、数组本身都是可变的(比如往数组里添加元素),除非再把每个引用类型属性递归冻结。

let obj = {a: [1, 2]};
Object.freeze(obj);
obj.a.push(3); //obj = {a: [1, 2, 3]}
复制代码

本文属个人理解,旨在互相学习,有说的不对的地方,师请纠正。转载请注明原帖

转载于:https://juejin.im/post/5cdbfc48e51d456e8240ddbc

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值