通过Proxy拦截操作并返回新对象实现不可变性，结合Reflect确保行为一致，提供update方法安全更新状态，原始数据始终不被修改。
要构建一个不可变的数据存储库，可以利用 JavaScript 的 Proxy 拦截对象操作，结合 Reflect 确保默认行为的正确执行，同时在每次修改时返回新对象而不是改变原状态。这种方式能确保原始数据不被篡改，符合不可变性原则。
1. 不可变性的核心思路
每次对数据的操作（如赋值、删除）都不直接修改原对象，而是：
- 创建原对象的一个浅拷贝或深拷贝
- 在副本上执行变更
- 返回新对象作为新的“状态”
- 原始对象保持不变
通过 Proxy 拦截 set、deleteProperty 等操作，我们可以控制这些行为。
2. 使用 Proxy 拦截写操作
定义一个函数，接收初始状态，返回一个代理对象。该代理在尝试修改时生成新状态。
function createImmutableStore(initialState = {}) {let currentState = initialState;
return new Proxy({}, {
get(target, prop) {
if (prop === 'getState') {
return () => currentState;
}
return Reflect.get(currentState, prop);
},
set(target, prop, value) {
// 拒绝直接修改，抛出错误或返回 false
throw new Error('Cannot mutate state directly. Use update() instead.');
},
defineProperty(target, prop, descriptor) {
throw new Error('Cannot define property on immutable store.');
},
deleteProperty(target, prop) {
throw new Error('Cannot delete property from immutable store.');
}
});
}
3. 提供安全的更新方法实现不可变更新
添加一个 update 方法，在内部创建新状态，而不是允许直接修改。
function createImmutableStore(initialState = {}) {
let currentState = initialState;
const setState = (newState) => {
currentState = { ...newState };
};
return new Proxy({}, {
get(target, prop) {
if (prop === 'getState') {
return () => ({ ...currentState }); // 返回副本
}
if (prop === 'update') {
return (updater) => {
const nextState = updater({ ...currentState });
setState(nextState);
return nextState;
};
}
return Reflect.get(currentState, prop);
},
set() {
throw new Error('Mutation not allowed');
},
deleteProperty() {
throw new Error('Deletion not allowed');
}
});
}
4. 实际使用示例
创建并使用这个不可变存储库：
const store = createImmutableStore({ count: 0, name: 'Alice' });console.log(store.count); // 0
store.update(state => {
state.count += 1;
return state;
});
console.log(store.getState()); // { count: 1, name: 'Alice' }
console.log(store.count); // 仍为 1
// 下面这行会抛错：
// store.count = 5;
注意：updater 函数中我们仍然可以修改传入的副本，建议配合 Object.freeze 或使用 immer 等库进一步增强安全性。
基本上就这些。Proxy 控制访问和拦截非法操作，Reflect 保证读取行为一致，手动提供 update 方法实现安全的不可变更新。这种方式适合小型状态管理或学习不可变数据设计理念。
