首页>>前端>>JavaScript->JavaScript 中对象处理之 Object.freeze 与 Object.seal

JavaScript 中对象处理之 Object.freeze 与 Object.seal

时间:2023-11-30 本站 点击:0

数据不变性在编程语言中一直非常重要,在 JavaScript 中也是如此。在这里,有两种 JavaScript 方法可以部分保证不变性:Object.freezeObject.seal。本文来总结一下这两个方法都可以用来做什么?都有什么区别?存在什么不足之处?

Object defineProperty

在了解 freezeseal 之前,先来了解一下 Object 中的 defineProperty 方法是什么。当一个对象在初始处理过程中由引擎创建时,JavaScript 将基本属性赋予新创建的对象,以处理来自外部的请求,例如访问或删除属性。

可以修改或设置的属性如下:

value : 属性的值

enumerable :如果为 true,则该属性可通过 for-in 循环或 Object.keys() 进行搜索,默认为 false

writable :如果为 false,则无法修改该属性,它在严格模式下引发错误,默认为 false

可配置 : 如果为 false,则这会使对象的属性不可枚举、不可写、不可删除和不可配置,默认为false

get : 当尝试访问该属性时提前调用的函数,默认为 undefined

set : 当尝试为属性设置某个值时提前调用的函数,默认为 undefined

下面来看一些简单的代码:

可枚举

constobj={};Object.defineProperty(obj,"a",{value:100,enumerable:false,});for(constkeyinobj){console.log(key);}//未定义Object.keys(obj);//[]

可写

constobj={};Object.defineProperty(obj,"a",{value:100,writable:false,});obj.a=200;obj.a===100;//真的(()=>{"usestrict";obj.a=100;//严格模式下的类型错误})();

可配置

constobj={};Object.defineProperty(obj,"a",{value:100,configurable:false,});//1.non-enumerablefor(constkeyinobj){console.dir(key);}//undefinedObject.keys(obj);//[//2.non-writable(()=>{"usestrict";obj.a=200;//TypeErrorinthestrictmode})();//3.non-deletabledeleteobj.a;obj.a===100;//true

但是,当 writableenumerable 为 true 时,将忽略 configure:false

Object.Seal

在 JavaScript 中,Object.seal 也和 密封 做同样的事情。Object.seal 使传递给它的对象的所有属性都不可配置,可用于阻止向对象添加新的属性和删除属性,但允许更改和更新现有属性。,来看下面的例子:

constobj={author:"DevPoint"};console.log(Object.getOwnPropertyDescriptors(obj));/*{author:{value:'DevPoint',writable:true,enumerable:true,configurable:true}}*/Object.seal(obj);console.log(Object.getOwnPropertyDescriptors(obj));/*{author:{value:'DevPoint',writable:true,enumerable:true,configurable:false}}*/obj.author="天行无忌";console.log(obj.author);//天行无忌deleteobj.author;console.log(obj.author);//天行无忌obj.city="Shenzhen";console.log(obj.city);//undefined

上面代码定义了一个对象 obj 有一个属性 author ,其中的值为 DevPoint,初始的描述属性如下:

{author:{value:'DevPoint',writable:true,enumerable:true,configurable:true}}

然后用 Object.seal 密封了对象,再次查看哪些描述符发生了变化,哪些没有,从结果看只有可配置的更改为 false

{author:{value:'DevPoint',writable:true,enumerable:true,configurable:false}}

obj.author="天行无忌";

尽管 Object.seal 后的可配置现在为 false,但还是通过代码改变其属性值为 天行无忌 ,正如之前所解释的,将可配置设置为 false 会使属性不可写,但是如果 writable 明确为 true ,则它不起作用。当创建一个对象并设置一个新属性时,它默认为 writable:true

deleteobj.author;

Object.seal 会使每个属性都不可配置,从而防止被删除。从上面的代码看,对对象执行 Object.seal 后,delete obj.author; 将变得无效。

obj.city="Shenzhen";

Object.sealObject.freeze 被调用时,执行后的对象将变成不可扩展的对象,这意味着不能从中删除任何属性,也不能向其中添加任何属性。

Object.freeze

这比 Object.seal 限制了传递的对象,将上面的代码进行修改,如下:

constobj={author:"DevPoint"};console.log(Object.getOwnPropertyDescriptors(obj));/*{author:{value:'DevPoint',writable:true,enumerable:true,configurable:true}}*/Object.freeze(obj);console.log(Object.getOwnPropertyDescriptors(obj));/*{author:{value:'DevPoint',writable:false,enumerable:true,configurable:false}}*/obj.author="天行无忌";console.log(obj.author);//DevPointdeleteobj.author;console.log(obj.author);//DevPointobj.city="Shenzhen";console.log(obj.city);//undefined

从上面代码结果看,与 Object.seal 的区别在于 writable 在执行 Object.freeze 后属性值也变为 false 。因此后续代码对其属性进行更新都无效。同样与 Object.seal 一样,Object.freeze 也使对象不可配置,这使得对象的每个属性都不可删除。

共同点

执行后的对象变得不可扩展,这意味着对象将无法添加新属性。

执行后的对象中的每个元素都变得不可配置,这意味着无法删除属性。

如果在“使用严格”模式下调用操作,则两种方法都可能引发错误,例如在严格模式下执行 obj.author = "天行无忌" 会出现错误。

不同

对象执行 Object.seal 后允许修改属性,而执行 Object.freeze 则不允许。

不足

Object.freezeObject.seal 在“实用性”方面存在不足,它们都只是对对象的第一层有效。

constobj={};Object.defineProperty(obj,"a",{value:100,writable:false,});obj.a=200;obj.a===100;//真的(()=>{"usestrict";obj.a=100;//严格模式下的类型错误})();0

如果希望避免对更深层次的对象属性有效,需要像深拷贝一样,需要写一些代码来实现(deepFreeze):

constobj={};Object.defineProperty(obj,"a",{value:100,writable:false,});obj.a=200;obj.a===100;//真的(()=>{"usestrict";obj.a=100;//严格模式下的类型错误})();1

如果希望对嵌套对象实现 Object.seal 效果,同样需要编写代码来实现(deepSeal):

constobj={};Object.defineProperty(obj,"a",{value:100,writable:false,});obj.a=200;obj.a===100;//真的(()=>{"usestrict";obj.a=100;//严格模式下的类型错误})();2

总结

Object.freezeObject.seal 在现代前端开发中是非常有用的方法,如果希望对深层有效,可以使用上面的方法 deepFreezedeepSeal


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/JavaScript/3958.html