沉浸在immer.js源码的魅力：逐步构建immutable.js的初始版本

2023-07-03 15:38:08

使用 Proxy 构建一个类似于 Immer.js 的不可变性工具

引言

在当今的技术世界中，数据不可变性已成为一项至关重要的需求。它确保了数据的完整性，防止意外修改和数据损坏。Immer.js 作为一种广受欢迎的不可变性库，通过使用 Proxy 来拦截数据操作并创建副本，从而实现了这一特性。受此启发，本文将深入探讨如何利用 Proxy 构建一个类似于 Immer.js 的不可变性工具。

Immer.js 的工作原理

Immer.js 利用 Proxy 的拦截功能，当检测到对数据的修改时，它会创建一个新对象副本，并将修改应用于该副本。这样，原始对象保持不变，实现了数据的不可变性。这种机制可以防止意外修改，确保数据的一致性和可靠性。

使用 Proxy 构建不可变性工具

步骤 1：创建 createImmutable 函数

const createImmutable = (obj) => {
  return new Proxy(obj, {
    get: (target, property) => {
      if (typeof target[property] === "function" && /^get/.test(property)) {
        return target[property]();
      }
      return target[property];
    },
    set: (target, property, value) => {
      const newObj = {...target};
      newObj[property] = value;
      return newObj;
    },
  });
};

步骤 2：测试 createImmutable 函数

const obj = { name: "John", age: 30 };
const immutableObj = createImmutable(obj);
immutableObj.name = "Mary";
console.log(immutableObj.name); // 输出：Mary
console.log(obj.name); // 输出：John

如上所示，修改 immutableObj 的属性不会影响原始对象 obj，验证了我们构建的不可变性工具的有效性。

优化不可变性工具

为了增强我们构建的不可变性工具的功能，需要进一步优化，以支持更复杂的数据结构，例如嵌套对象和数组。

const createImmutable = (obj) => {
  return new Proxy(obj, {
    get: (target, property) => {
      if (typeof target[property] === "function" && /^get/.test(property)) {
        return target[property]();
      }
      if (Array.isArray(target[property])) {
        return createImmutable(target[property]);
      }
      if (typeof target[property] === "object" && target[property] !== null) {
        return createImmutable(target[property]);
      }
      return target[property];
    },
    set: (target, property, value) => {
      const newObj = {...target};
      if (Array.isArray(target[property])) {
        newObj[property] = createImmutable(value);
      } else if (typeof target[property] === "object" && target[property] !== null) {
        newObj[property] = createImmutable(value);
      } else {
        newObj[property] = value;
      }
      return newObj;
    },
  });
};