JavaScript のプロキシ オブジェクトを使用して動的なゲッターとセッターを実装するにはどうすればよいですか?

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

JavaScript で事前定義されたプロパティのゲッターとセッターを作成する方法を理解することは一般的な概念です。ただし、この機能を拡張して明示的に定義されていないプロパティ名の動的な処理を含めることには、特有の課題が生じます。

PHP の動的 Getter および Setter 機能

PHP は__get() および __set() マジック メソッドを使用して、任意のプロパティのゲッターおよびセッターの動作を動的に定義します。これにより、プロパティをその場で操作するための便利で柔軟なアプローチが提供されます。

JavaScript のプロキシによるレスキュー

ES2015 の時点で、JavaScript はプロキシを導入しました。動的なゲッターとセッターの実装。プロキシを使用すると、他のオブジェクトのファサードとして機能するオブジェクトを作成でき、プロパティ アクセスの傍受と変更が可能になります。

動的 Getters/Setters にプロキシを使用する例

次の例を考えてみましょう。存在しないプロパティ値はすべて「欠落」を返し、文字列プロパティ値は取得時に大文字に変換されます:

<code class="javascript">"use strict";
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>

動的動作のテスト

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"

示されているように、プロキシはプロパティへのアクセスをインターセプトし、存在しないプロパティ (「欠落」) および文字列プロパティ (大文字変換) に対して定義された動作を適用します。また、加えられた変更をプロキシに反映させて、元のオブジェクトを変更することもできます。

ブラウザの互換性

プロキシは、Chrome、Firefox を含むすべての主要な最新ブラウザでサポートされています。 、Edge、Safari、Internet Explorer 11 。

以上がJavaScript のプロキシ オブジェクトを使用して動的なゲッターとセッターを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。