通过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 方法实现安全的不可变更新。这种方式适合小型状态管理或学习不可变数据设计理念。
以上就是如何使用 Proxy 和 Reflect 构建一个不可变的数据存储库？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1524636.html
微信扫一扫 
支付宝扫一扫 
