如何在 JavaScript 中使用 Object.freeze()

在 JavaScript 中，对象和数组是可变的，而原始值则不可变。这意味着我们可以随时更改对象（或数组）。但是，如果出于某种原因，我们想阻止这种情况发生，并使对象不可变，该怎么办？

实现这一目标的一种方法是使用该freeze()方法。

冻结的对象无法再被修改；冻结对象会阻止为其添加新属性、删除现有属性、更改现有属性的可枚举性、可配置性或可写性，以及阻止更改现有属性的值。此外，冻结对象还会阻止其原型被修改。freeze() 返回传入的对象。

一些说明此方法用法的代码如下所示：

const objectExample = {
  prop1: 42,
  prop2: "Jack"
};

// by default, we can modify the object's properties as we want
objectExample.prop1 = 100;
console.log(objectExample.prop1) // prints 100

// now let's freeze the object
Object.freeze(objectExample);

objectExample.prop2 = "Alice" // will throw an error in strict mode but fail silently in non-strict mode

console.log(objectExample.prop2); // prints "Jack", since we couldn't change the value of the prop

需要记住的是，如果frozen对象具有以对象为值的属性，则除非我们也冻结它们，否则这些对象是可以更改的。这意味着我们只实现了shallow freeze。要通过冻结对象的所有属性（包括将其他对象存储为值的属性）来使对象不可变，我们必须执行deep freeze—— 即在冻结父对象之前先冻结子对象，使用recursion。

以下函数仅供参考。您可以随意命名。将对象冻结为属性值时请务必小心，以免冻结不应变为不可变的内容。

const theObject = {
  x: 1,
  z: 2,
  y: {
    a: "Hello",
    b: "World"
  }
}

const deepFreeze = (obj) => {

  const propNames = Object.getOwnPropertyNames(obj)

  for (const name of propNames) {
    const value = obj[name];

    if (value && typeof value === "object") { 
      deepFreeze(value);
    }
  }

  return Object.freeze(obj);
}

deepFreeze(theObject);
theObject.y.a = 456; // the value can't be changed
console.log(theObject.y.a ); // Hello

图片来源：Caspar Camille Rubin/Unsplash 上的 @casparrubin

文章来源：https://dev.to/arikaturika/how-to-use-object-freeze-in-javascript-3e8l