Kann JavaScript dynamische Getter/Setter implementieren?

Dynamische Getter und Setter ermöglichen JavaScript-Objekten den Zugriff auf und die Änderung von Eigenschaften, die über vordefinierte Eigenschaften hinausgehen. Während frühere JavaScript-Techniken spezifische Getter und Setter für bekannte Eigenschaften verwendeten, untersucht dieser Artikel die Möglichkeit, Catch-All-Getter und Setter für alle undefinierten Eigenschaften zu implementieren.

ES2015-Proxy: Eine dynamische Lösung

ES2015 führte JavaScript-Proxys ein, die die Erstellung von Objekten ermöglichen, die als Vermittler für andere Objekte dienen. Diese Funktion eröffnet dynamische Getter und Setter:

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"

In diesem Beispiel fängt das Proxy-Objekt den Eigenschaftszugriff für das Originalobjekt ab. Beim Zugriff auf eine String-Eigenschaft wandelt der Proxy diese in Großbuchstaben um und gibt sie zurück; Für unbekannte Eigenschaften wird „fehlend“ statt „undefiniert“ zurückgegeben.

Diese Implementierung ist browserübergreifend kompatibel, wenn der Browser ES2015 (ES6) unterstützt. Erwägen Sie bei älteren Browsern die Verwendung von Polyfills oder alternativen Techniken. Proxys bieten eine flexible Lösung für dynamische Getter und Setter und ermöglichen eine effiziente Eigenschaftenverwaltung und Eigenschaftsintrospektion, ohne das ursprüngliche Objekt zu ändern.