JavaScript プロキシは任意のプロパティに対して動的ゲッターとセッターを有効にできますか?

JavaScript での動的なゲッターとセッターの実装

質問:

標準の JavaScript ではゲッターとセッターの作成が可能ですが、特定のプロパティについて、明示的に定義されていないプロパティ名を処理するキャッチオールのゲッターとセッターを作成することは可能ですか?

答え:

はい、JavaScript による動的サポートゲッターとセッターは、プロキシの使用を通じて ES2015 仕様に導入されました。プロキシは、プロパティのアクセスと変更をインターセプトするラッパー オブジェクトを作成し、カスタム動作を可能にします。

実装:

これは、文字列プロパティ値を大文字に変換して " を返すプロキシの例です。未定義のプロパティの場合は「欠落しています」:

<code class="js">if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            if (typeof rv === "string") {
                rv = rv.toUpperCase();
            }
            return rv;
        }
        return "missing";
    }
});</code>

使用法:

<code class="js">console.log(`original.example = ${original.example}`);  // "original.example = value"
console.log(`proxy.example = ${proxy.example}`);        // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`);        // "proxy.unknown = missing"
original.example = "updated";
console.log(`original.example = ${original.example}`);  // "original.example = updated"
console.log(`proxy.example = ${proxy.example}`);        // "proxy.example = UPDATED"</code>

注:

プロキシ サポートが考慮されていますクロスブラウザー互換性があり、すべての主要な最新ブラウザーでサポートされています。

以上がJavaScript プロキシは任意のプロパティに対して動的ゲッターとセッターを有効にできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。