プロキシの構造化クローンを作成する

Question

コンストラクタからプロキシを返すクラスがあります。このクラスのインスタンスを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); 
 

 
}

誰もがこの問題の回避策を提案することはできますか？私は2つの潜在的な解決策を参照してくださいが、私はそれらを実装する方法を知りません：

1. は、コンストラクタからプロキシを返しますが、何らかの形でクラス宣言内のプロキシ機能を維持しないでください。

2. 構造化クローンアルゴリズムで動作するようにプロキシインスタンスを変更します。

EDIT：以下、シンプルなコードはまた、構造化されたクローンのエラーを示しています

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

Answer 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); 
 
}