如何在 JavaScript 中深度冻结对象？

在本文中，我们将了解 JavaScript 中的对象存在什么问题，以及为什么我们需要在 JavaScript 中“深度冻结”对象。我们还将学习如何在 JavaScript 中“深度冻结”对象。

JavaScript 中的对象问题：我们都知道 JavaScript 对象是可变的。我们怎样才能使它们不可变？将它们定义为const但如果我们将 JavaScript 对象声明为const，它只会阻止对象作为一个整体被重新分配。我们仍然可以重新分配属性并更改它们的值。

示例 1：

HTML

  const obj1 = { key1: "val1", key2: "val2", key3: "val3" };
  console.log("Before Change");
  console.log(obj1);
  obj1.key1 = "val";
  console.log("After Change");
  console.log(obj1);

输出：

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: "val3"
}
"After Change"
{
 key1: "val",
 key2: "val2",
 key3: "val3"
}

如何解决上述问题？

我们可以使用 JavaScript 提供的 Object.freeze() 方法来防止通过更新和删除现有属性来添加新属性。

示例 2：

Javascript

const obj1={key1:"val1", key2:"val2", key3:"val3"}
console.log("Before Change")
console.log(obj1);
Object.freeze(obj1);
obj1.key1="val";
console.log("After Change")
console.log(obj1);

输出：

"Before Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}
"After Change"
{
key1: "val1",
key2: "val2",
key3: "val3"
}

这不是最好的方法，因为它只会创建一个浅对象冻结，并且如果对象具有一些嵌套对象/数组作为属性，则仍然可以修改嵌套对象/数组。

示例 3：

HTML

  const obj1 = { key1: "val1", 
                 key2: "val2", 
                 key3: ["val3", "val4", "val5"] 
               };
    
  console.log("Before Change");
  console.log(obj1);
  Object.freeze(obj1);
  obj1.key3[0] = "val";
  obj1.key3[1] = "val";
  obj1.key3[2] = "val";
  console.log("After Change");
  console.log(obj1);

输出：这是我们需要为对象创建深度冻结的情况。

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val", "val", "val"]
}

如何实施？

我们将使用递归来实现对象的深度冻结。这个想法是检查每个属性是否是一个对象。如果属性是一个对象，我们将检查它是否被冻结。如果未冻结，则递归调用该属性的冻结函数。这样，我们将创建对象的深度冻结。

示例 4：

HTML

  const obj1 = { key1: "val1", 
                 key2: "val2", 
                 key3: ["val3", "val4", "val5"] 
               };
  
  const deepFreeze = (obj1) => {
    Object.keys(obj1).forEach((property) => {
      if (
        typeof obj1[property] === "object" &&
        !Object.isFrozen(obj1[property])
      )
        deepFreeze(obj1[property]);
    });
    return Object.freeze(obj1);
  };
  deepFreeze(obj1);
  
  console.log("Before Change");
  console.log(obj1);
  obj1.key3[0] = "val";
  obj1.key3[1] = "val";
  obj1.key3[2] = "val";
  console.log("After Change");
  console.log(obj1);

输出：

"Before Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}
"After Change"
{
 key1: "val1",
 key2: "val2",
 key3: ["val3", "val4", "val5"]
}