微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

如何使用 Proxy 和 Reflect 构建一个不可变的数据存储库？

夜晨
发布： 2025-09-29 19:45:02
原创
670人浏览过
通过Proxy拦截操作并返回新对象实现不可变性，结合Reflect确保行为一致，提供update方法安全更新状态，原始数据始终不被修改。

如何使用 proxy 和 reflect 构建一个不可变的数据存储库？

要构建一个不可变的数据存储库，可以利用 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 方法，在内部创建新状态，而不是允许直接修改。

Android创建和使用数据库详细指南 中文WORD版
Android创建和使用数据库详细指南 中文WORD版

每个应用程序都要使用数据，Android应用程序也不例外，Android使用开源的、与操作系统无关的SQL数据库--SQLite，本文介绍的就是如何为你的Android应用程序创建和操作SQLite数据库。 数据库支持每个应用程序无论大小的生命线，除非你的应用程序只处理简单的数据，那么就需要一个数据库系统存储你的结构化数据，Android使用SQLite数据库，它是一个开源的、支持多操作系统的SQL数据库，在许多领域广泛使用，如Mozilla FireFox就是使用SQLite来存储配置数据的，iPhon

Android创建和使用数据库详细指南 中文WORD版 0
查看详情 Android创建和使用数据库详细指南 中文WORD版
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 构建一个不可变的数据存储库？的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript java proxy JavaScript Object define if count throw Error const Property delete console function 对象

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：如何利用 Resize Observer 监听元素尺寸变化并实现响应式组件？ 下一篇：为什么说 Async/Await 彻底改变了 JavaScript 的错误处理机制？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
JavaScript类型检查_TypeScript接口设计 TypeScript的接口用于定义对象结构，支持属性、方法、函数类型约束、类实现及接口继承。通过静态类型检查提升代码质量与开发效率。
2025-11-19 08:58:31
767
JavaScript游戏开发_物理引擎集成与优化 选择适合的物理引擎并正确集成可显著提升JavaScript游戏的真实感与交互性。Matter.js轻量易用，适合2D益智或平台类游戏；Box2D通过WebAssembly提供高精度物理模拟，适用于对真实性要求高的项目；p2.js支持复杂多边形碰撞与约束系统，适合机械或车辆模拟。以Matter.js为例，首先引入库文件，创建引擎和渲染器，添加刚体对象到世界中，再启动引擎与渲染即可实现基本物理效果。为保证性能，应控制活动物体数量、简化碰撞形状、使用固定时间步长、合理设置求解器迭代次数，并及时清理废弃
2025-11-19 08:24:50
488
JavaScript事件系统_自定义事件分发 通过CustomEvent和dispatchEvent可实现JavaScript自定义事件，用于组件间解耦通信。首先创建携带数据的事件对象，再分发到指定元素，其他模块通过addEventListener监听该事件并获取数据，适用于表单与图表等跨模块交互场景。
2025-11-19 08:09:02
845
代码拆分：React.lazy与Suspense实现 React.lazy与Suspense可实现组件动态加载，减少初始包体积，提升首屏性能；通过import()动态引入组件，Suspense包裹并设置fallback加载提示，结合ReactRouter实现路由级代码拆分，配合ErrorBoundary处理加载失败，保障用户体验完整。
2025-11-19 07:23:34
790
JavaScript_消息队列与事件驱动架构 JavaScript通过消息队列和事件循环实现异步编程，消息队列暂存异步回调，事件循环在调用栈为空时将任务依次推入执行，微任务优先于宏任务，事件驱动架构则通过监听用户或系统事件触发回调，两者协同确保异步任务有序执行且不阻塞主线程。
2025-11-19 04:21:35
377
JavaScript错误处理_Try_Catch最佳实践 答案：合理使用try-catch需精准捕获可预期错误，如JSON解析或外部数据处理，避免包裹大段代码；在catch中通过error.name区分SyntaxError、TypeError等并分类处理，保留堆栈信息且不暴露敏感细节；异步操作中结合async/await与try-catch或Promise的.catch()确保异常被捕获，同时记录上下文日志并上报监控系统。
2025-11-19 02:37:21
392
ApexCharts在React Flexbox布局中的响应式调整与多图表集成 本文深入探讨了在React应用中将ApexCharts集成到Flexbox布局时常见的尺寸调整问题，特别是图表高度在窗口缩放时显示异常。核心解决方案在于确保图表容器拥有适当的弹性高度，并正确配置ApexCharts组件的尺寸属性。此外，文章还提供了在React中有效渲染多个ApexCharts实例的正确方法，避免了常见的组件结构错误，旨在帮助开发者构建响应式且功能丰富的仪表盘。
2025-11-18 23:28:00
684
JavaScript Canvas游戏开发：修复不显示的常见问题与调试指南 本文旨在解决JavaScript游戏在HTMLCanvas中无法正常显示的问题。核心原因通常包括Canvas元素未正确获取、关键变量（如帧计数器）未声明以及随机数生成等辅助函数实现不当。教程将详细介绍如何初始化Canvas上下文、定义必要变量和函数，并强调利用浏览器控制台进行调试的重要性，帮助开发者构建流畅的Canvas游戏体验。
2025-11-18 23:06:01
594
Phaser教程：向游戏对象组添加新子元素 Phaser中的游戏对象组（Group）是管理和操作多个游戏对象集合的关键工具。本文将详细介绍如何使用Group对象的create()方法，在运行时高效地创建并向组中添加新的子元素，涵盖其基本用法、参数配置以及在不同类型组（如普通游戏对象组和物理组）中的应用，以优化游戏场景管理。
2025-11-18 22:47:25
472
JavaScript数组浅比较优化实践 本文探讨了在JavaScript中高效进行数组浅比较的方法。从传统的基于循环的比较方式入手，逐步过渡到利用Array.prototype.every()方法实现更简洁、函数式风格的解决方案。文章详细阐述了两种方法的实现逻辑、代码示例及其在实际应用中的考量，并强调了浅比较与深比较的区别与适用场景。
2025-11-18 22:18:18
534
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部