数据不变性在编程语言中一直非常重要，在 JavaScript 中也是如此。在这里，有两种 JavaScript 方法可以部分保证不变性：Object.freeze 和 Object.seal。本文来总结一下这两个方法都可以用来做什么？都有什么区别？存在什么不足之处？
Object defineProperty
在了解 freeze 和 seal 之前，先来了解一下 Object 中的 defineProperty 方法是什么。当一个对象在初始处理过程中由引擎创建时，JavaScript 将基本属性赋予新创建的对象，以处理来自外部的请求，例如访问或删除属性。
可以修改或设置的属性如下：
value ： 属性的值
enumerable ：如果为 true，则该属性可通过 for-in 循环或 Object.keys() 进行搜索，默认为 false 。
writable ：如果为 false，则无法修改该属性，它在严格模式下引发错误，默认为 false 。
可配置 ： 如果为 false，则这会使对象的属性不可枚举、不可写、不可删除和不可配置，默认为false 。
get ： 当尝试访问该属性时提前调用的函数，默认为 undefined。
set ： 当尝试为属性设置某个值时提前调用的函数，默认为 undefined。
下面来看一些简单的代码：
可枚举
const obj = {};Object.defineProperty(obj, "a", { value: 100, enumerable: false,});for (const key in obj) { console.log(key);}// 未定义Object.keys(obj);// []
复制代码
可写
const obj = {};Object.defineProperty(obj, "a", { value: 100, writable: false,});obj.a = 200;obj.a === 100; // 真的(() => { "use strict"; obj.a = 100; // 严格模式下的类型错误})();
复制代码
可配置
const obj = {};Object.defineProperty(obj, "a", { value: 100, configurable: false,});// 1. non-enumerablefor (const key in obj) { console.dir(key);}// undefinedObject.keys(obj);// [// 2. non-writable(() => { "use strict"; obj.a = 200; // TypeError in the strict mode})();// 3. non-deletabledelete obj.a;obj.a === 100; // true
复制代码
但是，当 writable 或 enumerable 为 true 时，将忽略 configure:false 。
Object.Seal
在 JavaScript 中，Object.seal 也和 密封 做同样的事情。Object.seal 使传递给它的对象的所有属性都不可配置，可用于阻止向对象添加新的属性和删除属性，但允许更改和更新现有属性。，来看下面的例子：
const obj = { 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); // 天行无忌delete obj.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 }}
复制代码
尽管 Object.seal 后的可配置现在为 false，但还是通过代码改变其属性值为 天行无忌 ，正如之前所解释的，将可配置设置为 false 会使属性不可写，但是如果 writable 明确为 true ，则它不起作用。当创建一个对象并设置一个新属性时，它默认为 writable:true 。
Object.seal 会使每个属性都不可配置，从而防止被删除。从上面的代码看，对对象执行 Object.seal 后，delete obj.author; 将变得无效。
当 Object.seal 或 Object.freeze 被调用时，执行后的对象将变成不可扩展的对象，这意味着不能从中删除任何属性，也不能向其中添加任何属性。
Object.freeze
这比 Object.seal 限制了传递的对象，将上面的代码进行修改，如下：
const obj = { 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); // DevPointdelete obj.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.freeze 和 Object.seal 在“实用性”方面存在不足，它们都只是对对象的第一层有效。
const obj = { author: "DevPoint", detail: { view: 100 } };console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/Object.seal(obj);console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/
obj.detail.view = 500;console.log(obj.detail.view); // 500delete obj.detail.view;console.log(obj.detail); // {}obj.detail.hits = 666;console.log(obj.detail.hits); // 666
Object.freeze(obj);console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/
复制代码
如果希望避免对更深层次的对象属性有效，需要像深拷贝一样，需要写一些代码来实现（deepFreeze）：
const obj = { author: "DevPoint", detail: { view: 100 } };console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/const deepFreeze = (object) => { const propNames = Object.getOwnPropertyNames(object);
for (const name of propNames) { const value = object[name]; if (value && typeof value === "object") { deepFreeze(value); } } return Object.freeze(object);};const freezeObj = deepFreeze(obj);console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));/*{ view: { value: 100, writable: false, enumerable: true, configurable: false }}*/
obj.detail.view = 500;console.log(obj.detail.view); // 100delete obj.detail.view;console.log(obj.detail); // {view:100}obj.detail.hits = 666;console.log(obj.detail.hits); // undefined
复制代码
如果希望对嵌套对象实现 Object.seal 效果，同样需要编写代码来实现（deepSeal）：
const obj = { author: "DevPoint", detail: { view: 100 } };console.log(Object.getOwnPropertyDescriptors(obj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: true }}*/const deepSeal = (object) => { const propNames = Object.getOwnPropertyNames(object);
for (const name of propNames) { const value = object[name]; if (value && typeof value === "object") { deepSeal(value); } } return Object.seal(object);};const freezeObj = deepSeal(obj);console.log(Object.getOwnPropertyDescriptors(freezeObj.detail));/*{ view: { value: 100, writable: true, enumerable: true, configurable: false }}*/
obj.detail.view = 500;console.log(obj.detail.view); // 500delete obj.detail.view;console.log(obj.detail); // {view:500}obj.detail.hits = 666;console.log(obj.detail.hits); // undefined
复制代码
总结
Object.freeze 和 Object.seal 在现代前端开发中是非常有用的方法，如果希望对深层有效，可以使用上面的方法 deepFreeze 和 deepSeal。
评论