JS如何真正冻结对象

488 字

2 分钟

JS如何真正冻结对象

2025-03-15

前端

JS

const 的局限性#

对于复杂类型，const只是冻结了变量引用(内存地址)，对象本身内部属性仍可修改

1
const author = { name: 'ocean', gender: 'male'};
2
author.age = 18;  // 可以新增
3
author.name = 'xxx';  // 可以修改
4
delete author.gender; // 可以删除

不同场景的一些冻结方案#

WARNING
冻结后的对象性能略低于普通对象（需访问控制），权衡使用

1. Object.freeze() 或 Object.seal() —— 浅冻结#

限制
对于嵌套对象只能冻结第一层属性

1
// 嵌套对象：
2
const objNested = {
3
  name: '张三',
4
  detail: { age: 25, city: '北京' }
5
};
6
Object.freeze(objNested);
7
objNested.detail.age = 26;  // ✓ 嵌套对象可修改！
8
Object.seal(objNested)
9
objNested.detail.name = 'xxx'; // ✓ 嵌套对象可修改！

2.实现一个深冻结(Deep Freeze) 方法#

1
function DeepFreeze(obj) {
2
  const propNames = Reflect.ownKeys(obj);
3

4
  Object.freeze(obj);
5

6
  // 递归冻结所有嵌套对象
7
  propNames.forEach(name => {
8
    const value = obj[name];
9

10
    if (value && typeof value === 'object') {
11
      DeepFreeze(value);
12
    }
13
  });
14
  return obj;
15
}
16

17
// test:
18
const obj = {
19
  name: '张三',
20
  detail: { age: 25, city: '北京' },
21
  hobbies: ['篮球', '游泳']
22
};
23
deepFreeze(obj);
24
obj.name = '李四';           // ✗ 失败
25
obj.detail.age = 26;         // ✗ 失败
26
obj.hobbies.push('跑步');     // ✗ 失败
27
obj.newProp = '新属性';       // ✗ 失败

3.使用 Proxy 实现严格冻结#

1
function strictFreeze(obj) {
2
  const handler = {
3
    set(target, prop, value) {
4
      throw new Error(`Cannot modify property "${prop}"`);
5
    },
6
    deleteProperty(target, prop) {
7
      throw new Error(`Cannot delete property "${prop}"`);
8
    },
9
    defineProperty(target, prop, descriptor) {
10
      throw new Error(`Cannot define property "${prop}"`);
11
    }
12
  };
13

14
  return new Proxy(obj, handler);
15
}
16
const obj = { name: '张三', age: 25 };
17
const frozen = strictFreeze(obj);
18
frozen.age = 26;  // Error: Cannot modify property "age"
19
delete frozen.name;  // Error: Cannot delete property "name"

4. 利用第三方库(例如Immutable.js)#

1
import { Map, List } from 'immutable';
2
const data = Map({
3
  name: '张三',
4
  age: 25,
5
  hobbies: List(['篮球', '游泳'])
6
});
7
// 所有修改操作都返回新对象
8
const newData = data.set('age', 26);
9
console.log(data.get('age'));       // 25（原对象不变）
10
console.log(newData.get('age'));    // 26（新对象）
11
const newHobbies = data.update('hobbies', list => list.push('跑步'));
12
console.log(data.get('hobbies'));        // 原列表
13
console.log(newHobbies.get('hobbies'));  // 新列表