Dynamische Getter und Setter in JavaScript implementieren: Eine Anleitung

In herkömmlichem JavaScript werden Getter und Setter für bestimmte Eigenschaftsnamen definiert. Es ist jedoch möglich, mithilfe der in ES2015 eingeführten Proxys flexiblere dynamische Getter und Setter zu erstellen.

Dynamische Getter und Setter mit Proxys

Dynamische Getter und Setter ermöglichen den Zugriff auf und die Änderung von Eigenschaften ohne explizite Definitionen. So implementieren Sie sie mithilfe von Proxys:

"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);
            // Modify the value here before returning
            return rv;
        }
        // Define default behavior for unknown properties
        return "missing";
      }
});

Beispielverwendung

Mit dem oben genannten Proxy können Eigenschaftszugriff und -änderung dynamisch durchgeführt werden:

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

Browserübergreifende Kompatibilität

Proxys werden in modernen Browsern wie Chrome, Firefox und Safari unterstützt. Für ältere Browser, die keine Proxys unterstützen, kann jedoch eine Problemumgehung mithilfe der dynamischen Getter/Setter-Syntax ohne Proxys implementiert werden.