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]}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 概述 JavaScript提供了一个内部数据结构,用来描述一个对象的属性的行为,控制它的行为。这被称为“属性描述对...
    许先生__阅读 569评论 0 1
  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,968评论 0 5
  • 概述 JavaScript提供了一个内部数据结构,用来描述一个对象的属性的行为,控制它的行为。这被称为“属性描述对...
    zjh111阅读 789评论 0 0
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 2,681评论 9 22
  • 我們必須要 不斷提醒自己要強大 因為 脆弱無處不在 《潮騷~蔡振源》
    蔡振源阅读 276评论 0 1

友情链接更多精彩内容