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

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

PHP の動的 Getter および Setter 機(jī)能

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

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

ES2015 の時(shí)點(diǎn)で、JavaScript はプロキシを?qū)毪筏蓼筏?。動的なゲッターとセッターの実裝。プロキシを使用すると、他のオブジェクトのファサードとして機(jī)能するオブジェクトを作成でき、プロパティ アクセスの傍受と変更が可能になります。

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

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

<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 のプロキシ オブジェクトを使用して動的なゲッターとセッターを?qū)g裝するにはどうすればよいですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。