Die Proxy-API ist ein Interface mit dem man JavaScript-Variablen "beobachten" kann.
+Wir können eine Proxy als Man-In-The-Middle Wrapper um eine Variable ansehen. Die Proxy kann auf Lese-Zugriffe als auch auf Schreib-Zugriffe reagieren und das normale Verhalten beeinflußen.
+Die Proxy-API ist eine sehr mächtige API und wird von vielen großen Frameworks (unter anderem VueJS) verwendet um z.B. Reactivität zu erreichen.
+Grundlegendes Beispiel
+
+ const myObject = {
+ value: "Hallo",
+ };
+
+ // Mittels dem handler können wir Operationen beeinflußen
+ const handler = {};
+
+ // Wir erstellen ein neues Objekt mithilfe der Proxy-Klasse
+ // und dessen Handler
+ const proxied = new Proxy(myObject, handler);
+ Erweitern wir nun das handler Objekt
+ const handler = {
+ get(target, prop, receiver) {
+ if (prop === 'value') {
+ return `${target[prop]} Welt!`;
+ }
+ }
+ };
+ // ...
+
+ console.log(proxied.value);
+ Wir können nun also beim Abfragen von Werten in den Zugriff auf die Variable zugreifen und den return-Wert modifizieren.
+Dass, was wir gerade eben Entwickelt haben, nennt sich eine Trap. Wir haben verschiedene Traps für die verschiedensten Arten von Variablen.
+.apply() für Funktionen (Funktionsaufrufe).construct() für Konstruktoren-Aufrufe (mittels new).get() für Zugriffs-Operationen von Objekten.has() wenn die Existenz von properties in Objekten geprüft wird.set() für Änderungs-Operationen auf ObjektenBetrachten wir nochmals das Beispiel mit der get() trap.
Wenn wir versuchen einen anderen Wert also value abzufragen, erhalten wir ein undefined, auch wenn der Wert im Objekt gesetzt ist.
Wir müssen also noch eine Art Fallback implementieren, falls es zu einem "Case" kommt, in dem der default ausgeführt werden soll (in unserem Falle, den gespeicherten Wert zurück geben)
+Machen wir das nun mal. Hierfür verwenden wir eine spezialisierte konstante Reflect
+ const handler = {
+ get(target, prop, receiver) {
+ if (prop === 'value') {
+ return `${target[prop]} Welt!`;
+ }
+ return Reflect.get(...arguments);
+ }
+ };
+ Das Reflect Objekt enthält Funktionen die den gleichen Namen besitzen wie die, die man in den Traps definieren kann.
+Wenn diese Aufgerufen und zurück gegeben werden, so wird die originale Aktion am Objekt ausgeführt. Wir können dies also als "Default" Aktion definieren wenn nur auf bestimmte Werte innerhalb einer Trap reagieren wollen.
+