JavaScript：从StorageArea加载继承对象后多态方法调用失效问题

这个问题我太熟了——JSON序列化/反序列化（包括浏览器Storage API的存储逻辑）只会保留对象的可枚举属性，原型链、类方法这些都会被丢弃，所以加载出来的只是一堆“数据快照”，根本不是原来的A/B/C实例，自然调用不了m()，用A.prototype.m.call()也只能强制用父类方法，完全体现不了多态。

下面给你几个靠谱的解决方案：

1. 给类添加序列化/反序列化方法（最推荐） #

给每个类定义toJSON方法（序列化时自动调用），输出包含类型标识和属性的对象；再定义静态的fromJSON方法，把数据快照恢复成对应类的实例。

// 父类A
class A {
  constructor(prop) {
    this.prop = prop;
  }

  m() {
    console.log(`A's m(), prop: ${this.prop}`);
  }

  // 自定义序列化逻辑，添加类型标识
  toJSON() {
    return {
      __type__: 'A',
      ...this // 展开当前实例的所有属性
    };
  }

  // 静态方法：从JSON数据恢复A实例
  static fromJSON(data) {
    const instance = new A();
    Object.assign(instance, data);
    return instance;
  }
}

// 子类B
class B extends A {
  constructor(prop, bProp) {
    super(prop);
    this.bProp = bProp;
  }

  m() {
    console.log(`B's m(), prop: ${this.prop}, bProp: ${this.bProp}`);
  }

  toJSON() {
    return {
      __type__: 'B',
      ...this
    };
  }

  static fromJSON(data) {
    const instance = new B();
    Object.assign(instance, data);
    return instance;
  }
}

// 子类C同理...

使用方式： #

// 存储数组
const arr = [new A('a1'), new B('b1', 'bVal1')];
chrome.storage.local.set({ arr }, () => {
  console.log('存储完成');
});

// 加载并恢复实例
chrome.storage.local.get('arr', (result) => {
  const classMap = {
    A: A,
    B: B,
    C: C
  };
  // 遍历数组，根据类型标识恢复实例
  const restoredArr = result.arr.map(item => {
    const Cls = classMap[item.__type__];
    return Cls.fromJSON(item);
  });

  // 现在可以正常调用多态方法了！
  restoredArr.forEach(item => item.m());
});

2. 通用恢复函数（无需修改原有类） #

如果不想改动现有类的代码，可以写一个通用函数，通过对象的特征（比如独有属性）判断它原本属于哪个类，再创建对应实例并赋值属性：

function restoreInstance(obj) {
  let instance;
  // 根据对象的独有属性判断类型
  if ('bProp' in obj) { // B类独有bProp
    instance = new B();
  } else if ('cProp' in obj) { // C类独有cProp
    instance = new C();
  } else {
    instance = new A();
  }
  // 把数据快照的属性赋值给新实例
  Object.assign(instance, obj);
  return instance;
}

// 加载时使用
chrome.storage.local.get('arr', (result) => {
  const restoredArr = result.arr.map(restoreInstance);
  restoredArr.forEach(item => item.m()); // 多态正常生效
});

⚠️ 注意：这种方法依赖对象的独有属性，如果类之间属性重叠，可能判断错误，适合类特征明显的场景。

3. 直接修改原型链（不推荐，性能较差） #

可以用Object.setPrototypeOf直接把加载后的对象原型改成对应类的原型，但这种方法性能开销较大，且可能引发一些意料之外的问题，仅作为备选：

const restoredArr = result.arr.map(obj => {
  if ('bProp' in obj) {
    Object.setPrototypeOf(obj, B.prototype);
  } else if ('cProp' in obj) {
    Object.setPrototypeOf(obj, C.prototype);
  } else {
    Object.setPrototypeOf(obj, A.prototype);
  }
  return obj;
});

核心思路总结 #

不管哪种方法，本质都是给序列化后的对象加上“类型标识”，反序列化时根据标识把纯数据对象重新关联到对应的类原型上，这样才能恢复类的方法和多态特性。

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