登录
首页 >  文章 >  前端

Proxy实现不可变数据存储方法

时间：2025-10-10 11:50:30 498浏览 收藏

从现在开始，我们要努力学习啦！今天我给大家带来《使用 Proxy 和 Reflect 实现不可变数据存储》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

通过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 方法，在内部创建新状态，而不是允许直接修改。

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实现不可变数据存储方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>