JavaScript 如何对对象进行深度冻结

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

JavaScript中的对象问题：

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

示例1：

JavaScript代码：

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"  
}

有几种方法可以用来对对象进行深度冷冻。

使用Object.freeze()方法
使用JSON.parse()和JSON.stringify()方法
使用Object.freeze()和Object.isFrozen()方法

我们将通过示例来探讨以上所有方法及其基本实现。

方法1：使用Object.freeze()

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

示例： 示例演示了如何使用Object.freeze()使对象不可变，防止对其属性进行更改。

Javascript

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

输出

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

方法2：使用JSON.parse()和JSON.stringify()

该方法涉及将对象转换为JSON字符串，然后使用JSON.parse()将其解析回一个新对象。这样创建了一个深度冻结的对象，使其不可变。

示例： 示例演示了使用JSON.parse()和JSON.stringify()进行深度冻结对象。要深度冻结对象，我们首先使用JSON.stringify()将其转换为JSON字符串，然后使用JSON.parse()将其解析回一个新对象。这样就创建了一个与原始对象具有相同结构的新对象，但它是完全独立的副本，并且现在是深度冻结的。在深度冻结之后，对deepFrozenObj的任何属性修改尝试都不会产生任何效果，因为它现在是不可变的。

Javascript

const obj1 = { key1: "val1", key2: "val2", key3: "val3" };
 
console.log("Before Change");
console.log(obj1);
 
const deepFrozenObj = JSON.parse(JSON.stringify(obj1));
 
deepFrozenObj.key1 = "val";
// This won't modify the deepFrozenObj
deepFrozenObj.key2 = "newVal";
// This won't modify the deepFrozenObj
 
console.log("After Change");
console.log(deepFrozenObj);

输出

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

方法3：使用Object.freeze()和Object.isFrozen()

该方法使用Object.freeze()和Object.isFrozen()递归地深度冻结一个对象及其嵌套属性。这使得对象及其属性成为不可变的，防止修改。

示例： 该示例演示了使用Object.freeze()和Object.isFrozen()的递归深度冻结函数，使得对象及其嵌套属性成为不可变的，防止修改。

Javascript

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' ] }