JavaScript は動的ゲッター/セッターを実装できますか?

動的ゲッターとセッターを使用すると、JavaScript オブジェクトが事前定義されたプロパティを超えたプロパティへのアクセスと変更を処理できるようになります。以前の JavaScript 手法では、既知のプロパティに対して特定のゲッターとセッターを使用していましたが、この記事では、未定義のプロパティに対して包括的なゲッターとセッターを実装する可能性を検討します。

ES2015 プロキシ: 動的ソリューション

ES2015 では、他のオブジェクトの仲介者として機能するオブジェクトの作成を可能にする JavaScript プロキシが導入されました。この機能により、動的なゲッターとセッターが開かれます:

const original = {
    example: "value",
};
const 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";
    },
});

console.log(`proxy.example = ${proxy.example}`); // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`); // "proxy.unknown = missing"

この例では、プロキシ オブジェクトが元のオブジェクトのプロパティ アクセスを横取りします。文字列プロパティにアクセスすると、プロキシはそれを大文字に変換して返します。不明なプロパティの場合、未定義ではなく「欠落」を返します。

ブラウザが ES2015 (ES6) をサポートしている場合、この実装はブラウザ間互換性があります。古いブラウザの場合は、ポリフィルまたは代替技術の使用を検討してください。プロキシは動的なゲッターとセッターに柔軟なソリューションを提供し、元のオブジェクトを変更せずに効率的なプロパティ処理とプロパティのイントロスペクションを可能にします。