关键词:Object.freeze、Object.freeze作用、深度冻结对象
冻结对象
要冻结一个 JavaScript 对象,以防止别人更改它,可以使用Object.freeze()
方法。Object.freeze()
方法会递归地冻结一个对象的所有属性,使其变为只读的,并防止更改、删除或添加新属性。以下是使用Object.freeze()
方法冻结对象的示例:
1const obj = {
2 prop1: 1,
3 prop2: 'Hello',
4};
5
6Object.freeze(obj);
7
8// 尝试更改属性的值
9obj.prop1 = 2; // 不会生效,obj.prop1仍然为1
10
11// 尝试删除属性
12delete obj.prop2; // 不会生效,obj仍然包含prop2属性
13
14// 尝试添加新属性
15obj.prop3 = true; // 不会生效,obj不会添加新属性
16
17console.log(obj);
在上述示例中,通过调用Object.freeze(obj)
方法,将obj
对象冻结,使其变为只读。此后,无论是更改、删除还是添加属性,都不会对对象产生任何影响。最后,通过console.log(obj)
输出对象,可以看到对象保持不变,即使尝试进行更改。
需要注意的是,Object.freeze()
方法只会冻结对象的直接属性,而不会冻结嵌套对象的属性。如果需要递归地冻结嵌套对象的属性,可以编写一个递归函数来处理。
深度冻结
要冻结嵌套属性,可以使用一个递归函数来处理。该函数会遍历对象的所有属性,并对每个属性进行冻结。以下是一个示例:
1function deepFreeze(obj) {
2 // 首先冻结当前对象
3 Object.freeze(obj);
4
5 // 遍历对象的所有属性
6 for (let key of Object.keys(obj)) {
7 let value = obj[key];
8
9 // 如果属性是对象类型,则递归调用deepFreeze函数
10 if (typeof value === 'object' && value !== null) {
11 deepFreeze(value);
12 }
13 }
14
15 return obj;
16}
17
18const obj = {
19 prop1: 1,
20 prop2: {
21 nestedProp1: 'Hello',
22 nestedProp2: [1, 2, 3],
23 },
24};
25
26const frozenObj = deepFreeze(obj);
27
28// 尝试更改嵌套属性的值
29frozenObj.prop2.nestedProp1 = 'World'; // 不会生效,嵌套属性仍然为'Hello'
30
31console.log(frozenObj);
在上述示例中,我们定义了一个名为deepFreeze
的递归函数。该函数首先会对当前对象进行冻结(调用Object.freeze(obj)
),然后遍历对象的所有属性。如果属性是对象类型,则递归调用deepFreeze
函数,对嵌套对象进行冻结。
通过调用deepFreeze(obj)
函数,我们将obj
对象及其嵌套属性都冻结,并将结果赋值给frozenObj
。尝试更改嵌套属性的值后,输出frozenObj
,可以看到对象保持不变,嵌套属性的值没有被更改。
需要注意的是,deepFreeze
函数并不会修改原始对象,而是返回一个新的冻结对象。如果需要修改原始对象,可以将冻结的属性逐个复制到一个新对象中。
个人笔记记录 2021 ~ 2025