我有一个从构造函数返回代理的类。当我尝试在 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);
}
谁能提出解决此问题的方法?我看到了两个可能的解决方案,但我不知道如何实现它们:
不要从构造函数返回 Proxy,而是以某种方式在类声明中维护 Proxy 功能。
更改 Proxy 实例,使其适用于结构化克隆算法。
编辑:以下更简单的代码也演示了结构化克隆错误:
const p = new Proxy({}, {});
window.postMessage(p, '*');
最佳答案
您可以将原始的非代理对象保存在类属性中,并在您想要将其传递给 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);
}
关于javascript - 创建 Proxy 的结构化克隆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44118839/