如何在JavaScript类中重写structuredClone的序列化逻辑？

我定义了如下类：

class Foo extends EventTarget {
  msg = 'hey';
}

当我尝试通过MessagePort将该类实例传输到新窗口或iframe时，调用structuredClone()会失败：

structuredClone(new Foo());

报错信息：

Uncaught DOMException: Failed to execute 'structuredClone' on 'Window': EventTarget object could not be cloned.

原因是结构化克隆规范的第20步规定：若待克隆值是平台对象，则抛出"DataCloneError"类型的DOMException。

我不需要序列化EventTarget的完整状态，只需要序列化它的可枚举属性——比如用对象展开的方式就能成功：

structuredClone({
   ...new Foo()
});

但这种方式在处理大型嵌套结构时非常繁琐，也不利于库的使用。我希望能像JSON序列化中重写toJSON()方法那样，通过重写类的方法来优化序列化逻辑，比如：

class Foo extends EventTarget {
  msg = 'hey';

  toJSON() {
    return {
      msg: this.msg
    };
  }
}

请问内置的结构化序列化机制有没有类似toJSON()的等效方法？

目前浏览器的内置结构化克隆机制没有提供类似toJSON()的自定义序列化钩子，无法通过重写类方法直接让structuredClone()自动转换你的实例。

不过可以通过以下两种方式实现类似的效果：

1. 自定义克隆包装函数 #

在类中添加一个返回可序列化对象的方法，比如toStructuredClone()，然后封装一个自定义的克隆函数来调用它，同时处理嵌套结构：

class Foo extends EventTarget {
  msg = 'hey';

  toStructuredClone() {
    // 返回需要序列化的属性集合
    return { ...this };
  }
}

function customStructuredClone(value) {
  // 优先调用实例的自定义序列化方法
  if (typeof value.toStructuredClone === 'function') {
    return structuredClone(value.toStructuredClone());
  }
  // 递归处理数组
  if (Array.isArray(value)) {
    return value.map(item => customStructuredClone(item));
  }
  // 递归处理普通对象（排除EventTarget类实例）
  if (typeof value === 'object' && value !== null && !(value instanceof EventTarget)) {
    const clonedObj = {};
    for (const key in value) {
      clonedObj[key] = customStructuredClone(value[key]);
    }
    return clonedObj;
  }
  // 其他类型直接调用原生结构化克隆
  return structuredClone(value);
}

// 使用示例
customStructuredClone(new Foo()); // 成功完成克隆

2. 传输场景下的手动转换方案 #

如果是通过MessagePort传输实例，可以在发送前手动转换实例为可序列化对象，接收端再按需重构实例：

// 发送端
const foo = new Foo();
port.postMessage({ ...foo });

// 接收端
port.onmessage = (e) => {
  const fooData = e.data;
  // 按需重构Foo实例
  const foo = new Foo();
  Object.assign(foo, fooData);
};

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