Angular中如何让BehaviorSubject的值在订阅时保持深度不可变？

问题根源：BehaviorSubject默认存储、发射的都是同一个对象的引用，任意订阅者修改引用指向的内存值，都会同步影响所有其他订阅者和Subject自身的存储值，这就是跨订阅数据污染的核心原因。
下面是从编译时到运行时全链路的深度不可变解决方案：

方案1：原生API实现运行时深度不可变（无第三方依赖） #

第一步：实现通用深度冻结工具 #

/** 递归深度冻结对象，冻结后所有属性不可修改 */
function deepFreeze<T>(target: T): Readonly<T> {
  // 非对象/已冻结/原始类型直接返回
  if (typeof target !== 'object' || target === null || Object.isFrozen(target)) {
    return target;
  }
  // 处理数组类型
  if (Array.isArray(target)) {
    target.forEach(item => deepFreeze(item));
    return Object.freeze(target) as Readonly<T>;
  }
  // 处理普通对象
  Object.getOwnPropertyNames(target).forEach(prop => {
    deepFreeze((target as Record<string, any>)[prop]);
  });
  return Object.freeze(target) as Readonly<T>;
}

第二步：封装BehaviorSubject，从发射源头保证不可变 #

核心原则：永远不要对外暴露BehaviorSubject实例本身，只暴露只读的Observable，所有更新操作统一收口

interface User {
  firstName: string;
  lastName: string;
}

// 私有BehaviorSubject，仅内部可操作
private readonly userBs = new BehaviorSubject<User>({
  firstName: 'Cuong',
  lastName: 'Le',
});

// 对外暴露的只读数据流
public readonly user$ = this.userBs.asObservable().pipe(
  // 1. 先深拷贝原始值，保证发射的引用和Subject存储的引用完全独立
  // *注：如果需要兼容低版本运行环境，可以将structuredClone替换为第三方深拷贝实现（如lodash.cloneDeep）
  // 2. 再深度冻结拷贝后的值，禁止订阅者修改
  map(user => deepFreeze(structuredClone(user)))
);

// 统一收口的更新方法，避免外部直接next非法值
public updateUser(patch: Partial<User>): void {
  const newUser = { ...this.userBs.value, ...patch };
  this.userBs.next(newUser);
}

此时如果订阅者尝试修改拿到的值，严格模式下会直接抛出错误，马上就能定位到非法修改的代码位置：

bs.user$.subscribe(u => {
  u.firstName = 'An'; // 运行时直接报错：Cannot assign to read only property 'firstName'
});

方案2：配合TypeScript实现编译时校验 #

如果想在开发阶段更早发现非法修改，可以新增深度只读类型，编译阶段就拦截修改操作：

// 递归将对象所有属性设为只读
type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

// 修改数据流返回值类型
public readonly user$ = this.userBs.asObservable().pipe(
  map(user => deepFreeze(structuredClone(user)) as DeepReadonly<User>)
);

此时订阅者尝试修改值时，TS会直接编译报错，不用等到运行时就能发现问题。

方案3：复用状态管理库的不可变能力 #

如果是大型Angular应用，已经接入NgRx、Akita这类状态管理库，直接使用库内置的不可变更新能力即可，这类框架默认所有状态修改都是 immutable 模式，从框架层面避免了原始值被意外修改的问题。

内容的提问来源于stack exchange，提问作者cuongle