JavaScript: Proxies

Ein etwas unbekanntes, aber dennoch sehr mächtiges Konstrukt in JavaScript sind Proxies. Diese verhalten sich wie das ursprüngliche Objekt, können aber um weitere Funktionen wie z. B. spezifische Logik in get/set erweitert werden.

Beim Erzeugen eines Proxies wird das ursprüngliche Objekt sowie ein Handler übergeben.

//Hilfsmethode zur Erstellung eines divs
const append = (value) => {
  const el = document.createElement("div");
  el.innerText = value;
  document.body.appendChild(el);
};

//Ursprungsobjekt
const target = {
  first: "Stefan",
  address: {
    city: "Dornbirn"
  }
};

//Erstellen Proxy
const p = new Proxy(target, {
  get: (target, name) => {
    return Reflect.get(target, name);
  },
  set: (target, name, value) => {
    if (name == "address") {
      throw new Error("Address change not allowed");
    }
    
    Reflect.set(target, name, value);
  }
});

p.first = "XXX";
append(p.first); //XXX

target.address.city = "Lustenau";
append(p.address.city); //Lustenau

p.address.city = "Wien";
append(p.address.city); //Wien

append(JSON.stringify(p)); //{"first":"XXX","address":{"city":"Wien"}}

p.address = {}; //Error

Ein paar Anwendungsbeispiele für Proxies, die mir spontan einfallen:

• virtuelle Eigenschaften
• Validierung von Änderungen an Objekten
• Wertanpassung (z. B. Rundungen)