Ein Artikel zum Verständnis der Verwendung von Proxys in JavaScript

Was ist ein Agent

Definition auf MDN: Proxy-Objekte werden verwendet, um benutzerdefinierte Verhaltensweisen für grundlegende Vorgänge (wie Eigenschaftssuche, Zuweisung, Aufzählung, Funktionsaufrufe usw.) zu definieren.

Die offizielle Definition ist immer so obskur und langweilig, was also genau kann Proxy?

1. Das Konzept des Agenten stammt aus der Metaprogrammierung. Dabei handelt es sich um eine Art Programm, das Programme lesen, ändern, analysieren und sogar neue Programme generieren kann. JS kann JS-Metaprogrammierung über die beiden Objekte Proxy und Reflect durchführen! !

2.Proxy ist ein Proxy. Wenn der Zugriff auf ein Objekt für uns unbequem ist oder wir mit dem einfachen Zugriff nicht zufrieden sind, kann der Proxy als „Vermittler“ fungieren, um uns zu helfen, den Betrieb des Objekts besser zu kontrollieren! !

Grundkenntnisse zum Thema Proxy

Grammatik:

const handler = {};
let target = {}; //Zielobjekt let userProxy = new Proxy(target,handler); //Proxy wurde erfolgreich implementiert! !
BenutzerProxy.a = 1;
konsole.log(ziel.a);//1
console.log(Ziel == Benutzerproxy); //falsch

target : das Zielobjekt, das mit Proxy umschlossen werden soll

Handle r: Ein Objekt, das normalerweise Funktionen als Attribute hat, wobei die Funktionen in jedem Attribut das Verhalten des Agenten beim Ausführen verschiedener Operationen definieren.

OK! Dann herzlichen Glückwunsch, Sie beherrschen die Definition von Proxy.

Bei der Verwendung müssen wir dem Code des Proxy-Verhaltens im Handler mehr Aufmerksamkeit schenken, was uns helfen kann, Proxy besser zu nutzen

Methoden des Handler-Objekts

const handler = {
	get(Ziel,Eigentum,Empfänger){
		console.log('erhalten!');
		gib 'a' zurück;
	}
}
sei Ziel = {name:'tar'};
let userProxy = neuer Proxy(Ziel,Handler);
Benutzerproxy.name

Natürlich gibt es noch viele weitere Methoden, siehe MDN: Methoden von Handlerobjekten

Was Proxy leisten kann

Verfolgung des Immobilienzugriffs

Wenn wir wissen müssen, wann auf ein Objekt zugegriffen oder es geändert wird.

 lass Ziel = {
	Name: "ww"
	}
 const-Handler = {
    bekomme(tar, prop){
     	Konsole.log('get');
     	gibt Reflect.get(...Argumente) zurück; 
     },
     setze(tar,eigent){
		Konsole.log('festlegen');
		gibt Reflect.set(...Argumente) zurück;
	 }
  }
  let userProxy = neuer Proxy(Ziel, Handler);
  BenutzerProxy.name;
  BenutzerProxy.name = "wqw";

Lösen Sie das Problem undefinierter Objekteigenschaften

lass Ziel = {}
  let-Handler = {
    get: (Ziel, Eigenschaft) => {
      Ziel[Eigenschaft] = (Eigenschaft im Ziel) ? Ziel[Eigenschaft] : {}
      if (Typ von Ziel[Eigenschaft] === 'Objekt') {
        gib einen neuen Proxy zurück (Ziel[Eigenschaft], Handler)
      }
      returniere Ziel [Eigenschaft]
    }
  }
  let proxy = neuer Proxy(Ziel, Handler)
  console.log('z' in proxy.xy) // false (Tatsächlich hat dieser Schritt ein xy-Attribut für „target“ erstellt)
  proxy.xyz = "hallo"
  console.log('z' in proxy.xy) // wahr
  console.log(target.xyz) // hallo

Wir verwenden einen Proxy, um den Wert abzurufen und darin eine logische Verarbeitung durchzuführen. Wenn der Wert, den wir abrufen möchten, von einem nicht vorhandenen Schlüssel stammt, erstellen wir den entsprechenden Schlüssel im Ziel und geben dann ein Proxy-Objekt für diesen Schlüssel zurück.

Dies stellt sicher, dass unsere Wertübernahmeoperation keine Fehler auslöst. xxx kann nicht von undefined abgerufen werden.

Dies hat jedoch einen kleinen Nachteil: Wenn Sie wirklich feststellen möchten, ob der Schlüssel vorhanden ist, können Sie dies nur mit dem Operator „in“ feststellen und nicht direkt über „get“.

Quellen:

MDN-Proxy

JS-Entwurfsmuster

Welche interessanten Dinge kann Proxy tun?

Metaprogrammierung

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!