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]}

你可能感兴趣的:(JavaScript中对象的不变性)