值对象模式(Value Object)在不可变数据中的应用

值对象模式(Value Object)是一种设计模式，用于封装不可变数据。它通过将数据和行为绑定在一起，确保对象一旦创建就不能被修改，从而避免副作用和不可预测的行为。在JavaScript中，值对象模式常用于处理货币、日期、坐标等需要严格一致性的场景。

值对象模式的核心概念

值对象模式的核心在于不可变性(Immutability)。一个值对象一旦创建，其内部状态就不能被改变。任何修改操作都会返回一个新的实例，而不是修改原有对象。这种特性使得值对象在多线程或异步环境中特别安全。

值对象通常具有以下特征：

1. 不可变性：创建后状态不可更改
2. 基于值的相等性：通过属性值而非引用判断相等
3. 自包含：包含所有必要的行为
4. 无副作用：操作不会改变对象状态

JavaScript中的实现方式

在JavaScript中实现值对象有多种方式。ES6的class语法是最常见的选择：

class Money {
  constructor(amount, currency) {
    this._amount = amount;
    this._currency = currency;
    Object.freeze(this); // 确保不可变
  }

  get amount() { return this._amount; }
  get currency() { return this._currency; }

  add(other) {
    if (this.currency !== other.currency) {
      throw new Error('Currency mismatch');
    }
    return new Money(this.amount + other.amount, this.currency);
  }

  equals(other) {
    return this.amount === other.amount && this.currency === other.currency;
  }
}

const m1 = new Money(100, 'USD');
const m2 = new Money(200, 'USD');
const m3 = m1.add(m2); // 返回新实例
console.log(m3.amount); // 300

不可变数据的优势

使用值对象处理不可变数据带来诸多好处：

1. 线程安全：由于不可变，无需担心并发修改
2. 简化测试：状态固定，测试用例更简单
3. 可预测性：对象生命周期内行为一致
4. 易于缓存：相同值可以安全重用
5. 时间旅行：保留历史状态变得简单

实际应用案例

日期处理

日期是典型的值对象应用场景。JavaScript内置的Date对象是可变的，我们可以创建不可变的日期值对象：

class ImmutableDate {
  constructor(year, month, day) {
    this._date = new Date(year, month - 1, day);
    Object.freeze(this);
  }

  get year() { return this._date.getFullYear(); }
  get month() { return this._date.getMonth() + 1; }
  get day() { return this._date.getDate(); }

  addDays(days) {
    const newDate = new Date(this._date);
    newDate.setDate(newDate.getDate() + days);
    return new ImmutableDate(newDate.getFullYear(), newDate.getMonth() + 1, newDate.getDate());
  }

  equals(other) {
    return this._date.getTime() === other._date.getTime();
  }
}

颜色处理

颜色值也是常见的使用场景：

class Color {
  constructor(r, g, b) {
    this._r = this._validate(r);
    this._g = this._validate(g);
    this._b = this._validate(b);
    Object.freeze(this);
  }

  _validate(value) {
    if (value < 0 || value > 255) {
      throw new Error('Color value must be between 0 and 255');
    }
    return value;
  }

  get r() { return this._r; }
  get g() { return this._g; }
  get b() { return this._b; }

  lighten(percent) {
    const factor = 1 + percent / 100;
    return new Color(
      Math.min(255, Math.round(this._r * factor)),
      Math.min(255, Math.round(this._g * factor)),
      Math.min(255, Math.round(this._b * factor))
    );
  }

  toHex() {
    return `#${this._r.toString(16).padStart(2, '0')}${this._g.toString(16).padStart(2, '0')}${this._b.toString(16).padStart(2, '0')}`;
  }
}

性能考虑

虽然值对象有诸多优点，但在JavaScript中大量创建新实例可能带来性能问题。对于性能敏感的场景，可以考虑以下优化策略：

1. 对象池：缓存常用值对象实例
2. 结构共享：对于复杂对象，使用结构共享技术
3. 惰性计算：延迟计算派生属性
4. 原生扩展：对于高频操作，考虑使用原生类型

// 对象池示例
const moneyPool = new Map();

function createMoney(amount, currency) {
  const key = `${amount}_${currency}`;
  if (!moneyPool.has(key)) {
    moneyPool.set(key, new Money(amount, currency));
  }
  return moneyPool.get(key);
}

与React的结合

React推崇不可变数据，值对象模式与之天然契合。特别是在使用Redux或Context API时，值对象可以简化状态管理：

// React组件中使用值对象
function CartItem({ item }) {
  const [quantity, setQuantity] = useState(item.quantity);
  
  const increase = () => {
    setQuantity(quantity.add(new Quantity(1))); // 返回新实例
  };

  return (
    <div>
      <span>{item.name}</span>
      <span>{quantity.value}</span>
      <button onClick={increase}>+</button>
    </div>
  );
}

class Quantity {
  constructor(value) {
    this._value = Math.max(0, value);
    Object.freeze(this);
  }

  get value() { return this._value; }

  add(other) {
    return new Quantity(this._value + other.value);
  }
}

函数式编程中的角色

值对象是函数式编程的重要组成。纯函数与不可变值对象结合，可以构建高度可预测的系统：

// 函数式风格的值对象使用
const calculateTotal = (items) => 
  items.reduce(
    (total, item) => total.add(item.price.multiply(item.quantity)),
    new Money(0, 'USD')
  );

class ShoppingCart {
  constructor(items = []) {
    this._items = Object.freeze([...items]);
  }

  get items() { return this._items; }

  addItem(newItem) {
    return new ShoppingCart([...this.items, newItem]);
  }

  get total() {
    return calculateTotal(this.items);
  }
}

边界情况处理

实现值对象时需要特别注意边界情况：

1. 深度不可变：嵌套对象也需要不可变
2. 克隆问题：确保返回新实例时深度克隆
3. 相等性比较：复杂对象的深度比较
4. 序列化：转换为JSON等格式的处理

// 深度不可变示例
class ImmutablePerson {
  constructor(name, address) {
    this._name = Object.freeze(name);
    this._address = Object.freeze({ ...address });
    Object.freeze(this);
  }

  get name() { return this._name; }
  get address() { return { ...this._address }; } // 返回副本

  changeAddress(newAddress) {
    return new ImmutablePerson(this.name, newAddress);
  }
}

测试策略

值对象的不可变性使其测试相对简单，但仍需注意：

1. 不变性验证：确保所有操作都不改变原对象
2. 相等性测试：验证值相等而非引用相等
3. 边界值测试：测试极端输入情况
4. 行为验证：确保派生行为正确

// 测试示例
describe('Money', () => {
  test('should be immutable', () => {
    const money = new Money(100, 'USD');
    expect(() => { money.amount = 200 }).toThrow();
  });

  test('should add correctly', () => {
    const m1 = new Money(100, 'USD');
    const m2 = new Money(200, 'USD');
    const result = m1.add(m2);
    expect(result.amount).toBe(300);
    expect(result).not.toBe(m1); // 新实例
  });

  test('should throw on currency mismatch', () => {
    const m1 = new Money(100, 'USD');
    const m2 = new Money(200, 'EUR');
    expect(() => m1.add(m2)).toThrow('Currency mismatch');
  });
});

与其他模式的比较

值对象常与其他模式混淆或结合使用：

1. 与DTO区别：DTO用于数据传输，通常是可变的
2. 与实体区别：实体有身份标识，值对象只关心属性
3. 与工厂模式结合：通过工厂创建复杂值对象
4. 与策略模式结合：值对象包含不同计算策略

// 工厂模式创建复杂值对象
class ShapeFactory {
  static createCircle(radius) {
    return new Shape('circle', { radius });
  }

  static createRectangle(width, height) {
    return new Shape('rectangle', { width, height });
  }
}

class Shape {
  constructor(type, properties) {
    this._type = type;
    this._properties = Object.freeze({ ...properties });
    Object.freeze(this);
  }

  get area() {
    switch (this._type) {
      case 'circle':
        return Math.PI * this._properties.radius ** 2;
      case 'rectangle':
        return this._properties.width * this._properties.height;
      default:
        throw new Error('Unknown shape type');
    }
  }
}

现代JavaScript特性的应用

ES6+的新特性可以简化值对象实现：

1. Symbol特性：自定义相等性比较
2. Proxy对象：实现更灵活的不可变性
3. 装饰器：简化不可变标记
4. 私有字段：更好的封装性

// 使用私有字段和装饰器
function immutable(target) {
  Object.freeze(target.prototype);
}

@immutable
class Point {
  #x;
  #y;

  constructor(x, y) {
    this.#x = x;
    this.#y = y;
  }

  get x() { return this.#x; }
  get y() { return this.#y; }

  move(dx, dy) {
    return new Point(this.#x + dx, this.#y + dy);
  }

  [Symbol.equals](other) {
    return this.#x === other.x && this.#y === other.y;
  }
}

浏览器API的不可变封装

许多浏览器API返回可变对象，可以封装为值对象：

class ImmutableURL {
  constructor(urlString) {
    this._url = new URL(urlString);
    Object.freeze(this);
  }

  get protocol() { return this._url.protocol; }
  get hostname() { return this._url.hostname; }
  get path() { return this._url.pathname; }

  withQueryParam(key, value) {
    const newURL = new URL(this._url);
    newURL.searchParams.set(key, value);
    return new ImmutableURL(newURL.toString());
  }
}

不可变集合的实现

对于集合类型，实现不可变版本需要特殊处理：

class ImmutableList {
  constructor(items = []) {
    this._items = Object.freeze([...items]);
  }

  get items() { return [...this._items]; } // 返回副本

  get length() { return this._items.length; }

  push(item) {
    return new ImmutableList([...this._items, item]);
  }

  filter(predicate) {
    return new ImmutableList(this._items.filter(predicate));
  }

  map(mapper) {
    return new ImmutableList(this._items.map(mapper));
  }
}

类型系统的增强

TypeScript可以增强值对象类型安全：

interface Money {
  readonly amount: number;
  readonly currency: string;
}

function createMoney(amount: number, currency: string): Money {
  return Object.freeze({ amount, currency });
}

function addMoney(a: Money, b: Money): Money {
  if (a.currency !== b.currency) {
    throw new Error('Currency mismatch');
  }
  return createMoney(a.amount + b.amount, a.currency);
}

领域驱动设计中的角色

在DDD中，值对象是重要的建模工具：

1. 表示领域概念：如货币、地址等
2. 无生命周期：不关心创建和销毁
3. 组合使用：构建更复杂的领域模型
4. 验证逻辑：封装领域规则

// DDD风格的值对象
class Email {
  constructor(value) {
    if (!this._validate(value)) {
      throw new Error('Invalid email address');
    }
    this._value = value;
    Object.freeze(this);
  }

  _validate(email) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  }

  get value() { return this._value; }

  equals(other) {
    return this._value.toLowerCase() === other.value.toLowerCase();
  }
}

错误处理策略

值对象的错误处理需要特别注意：

1. 尽早失败：构造时验证并抛出错误
2. 防御性拷贝：避免外部修改传入对象
3. 不变性保证：即使在错误情况下也不破坏不变性
4. 错误恢复：提供安全创建方法

class Temperature {
  constructor(celsius) {
    if (typeof celsius !== 'number' || isNaN(celsius)) {
      throw new Error('Temperature must be a number');
    }
    this._celsius = celsius;
    Object.freeze(this);
  }

  static safeCreate(celsius) {
    try {
      return new Temperature(celsius);
    } catch {
      return new Temperature(0); // 默认值
    }
  }

  get celsius() { return this._celsius; }
  get fahrenheit() { return this._celsius * 9/5 + 32; }
}

不可变数据结构的扩展

对于复杂场景，可以考虑专业不可变库：

1. Immutable.js：提供丰富不可变集合
2. Immer：简化不可变更新逻辑
3. seamless-immutable：轻量级不可变转换

// 使用Immer简化不可变更新
import produce from 'immer';

class ShoppingCart {
  constructor(items = []) {
    this._items = Object.freeze([...items]);
  }

  addItem(newItem) {
    return produce(this, draft => {
      draft._items.push(newItem); // Immer处理不可变更新
    });
  }
}

浏览器存储中的使用

值对象适合作为浏览器存储的数据格式：

// 本地存储中的值对象序列化
class UserPreferences {
  constructor(theme, fontSize) {
    this._theme = theme;
    this._fontSize = fontSize;
    Object.freeze(this);
  }

  get theme() { return this._theme; }
  get fontSize() { return this._fontSize; }

  toJSON() {
    return { theme: this.theme, fontSize: this.fontSize };
  }

  static fromJSON(json) {
    return new UserPreferences(json.theme, json.fontSize);
  }
}

// 存储
const prefs = new UserPreferences('dark', 14);
localStorage.setItem('prefs', JSON.stringify(prefs));

// 读取
const saved = JSON.parse(localStorage.getItem('prefs'));
const loadedPrefs = UserPreferences.fromJSON(saved);