创建代理的结构化克隆答案

【问题标题】：create structured clone of Proxy创建代理的结构化克隆
【发布时间】：2017-05-22 17:30:31
【问题描述】：

我有一个从构造函数返回代理的类。当我尝试在 IndexedDB 中存储此类的实例或使用window.postMessage() 发送对象时，我收到一条错误消息，指出无法克隆该对象。 structured clone algorithm 似乎无法处理代理对象。

以下代码演示了错误：

class MyClass {
  constructor() {
    return new Proxy(this, {
      set(target, prop, val, receiver) {
        console.log(`"${prop}" was set to "${val}"`);
        return Reflect.set(target, prop, val, receiver);
      }
    });
  }
}

const obj = new MyClass;

try {
  window.postMessage(obj,'*');
} catch(err) {
  console.error(err);

}

任何人都可以建议解决此问题的方法吗？我看到了两种可能的解决方案，但我不知道如何实施它们：

不要从构造函数返回代理，而是以某种方式在类声明中维护代理功能。
更改代理实例，使其与结构化克隆算法一起使用。

编辑：以下更简单的代码也演示了结构化克隆错误：

const p = new Proxy({}, {});
window.postMessage(p, '*');

【问题讨论】：

标签： javascript es6-proxy

【解决方案1】：

您可以将原始的非代理对象保存在类属性中，并在您想将其传递给postMessage 时使用它。您可以将构造函数更改为具有将传递给代理而不是this 的可选参数。这样，您可以通过将对象传递给构造函数来重新创建对象。

class MyClass {
  constructor(original = this) {
    this.original = original;
    return new Proxy(original, {
      set(target, prop, val, receiver) {
        console.log(`"${prop}" was set to "${val}"`);
        return Reflect.set(target, prop, val, receiver);
      }
    });
  }
  export() {
    return this.original;
  }
  static import(original) {
    return new MyClass(original);
  }
}

const obj = new MyClass;

obj.test = 1;
console.log(MyClass.import(obj.export()).test);
MyClass.import(obj.export()).test = 2;

try {
  window.postMessage(obj.export(), '*');
} catch(err) {
  console.error(err);
}

【讨论】：