Mit einem JavaScript-Proxy-Objekt können Sie das Verhalten eines anderen Objekts abfangen und anpassen, ohne das Original zu ändern.
Mithilfe von Proxy-Objekten können Sie Daten validieren, zusätzliche Funktionen bereitstellen und den Zugriff auf Eigenschaften und Funktionen steuern.
Erfahren Sie alles über die Verwendung von Proxy-Objekten und wie Sie sie in JavaScript erstellen können.
Erstellen eines Proxy-Objekts
In JavaScript können Sie Proxy-Objekte mithilfe von erstellen ProxyKonstrukteur. Dieser Konstruktor akzeptiert zwei Argumente: a Ziel Objekt, um den Proxy herumzuwickeln und a Handler Objekt, dessen Eigenschaften das Verhalten des Proxys bei der Ausführung von Operationen definieren.
Es verwendet diese Argumente und erstellt ein Objekt, das Sie anstelle des Zielobjekts verwenden können. Dieses erstellte Objekt kann Kernoperationen wie das Abrufen, Festlegen und Definieren von Eigenschaften neu definieren. Sie können diese Proxy-Objekte auch verwenden, um Eigenschaftszugriffe zu protokollieren und Eingaben zu validieren, zu formatieren oder zu bereinigen.
Zum Beispiel:
konst ursprünglichesObjekt = {
foo: "Bar"
}konst Handler = {
erhalten: Funktion(Ziel, Eigentum){
zurückkehren Ziel[Eigenschaft];
},
Satz: Funktion(Ziel, Eigenschaft, Wert){
Ziel[Eigenschaft] = Wert;
}
};
konst Proxy = neuProxy(ursprüngliches Objekt, Handler)
Dieser Code erstellt ein Zielobjekt, Originalobjekt, mit einer einzigen Eigenschaft, foo, und ein Handler-Objekt, Handler. Das Handler-Objekt enthält zwei Eigenschaften, erhalten Und Satz. Diese Eigenschaften werden als Fallen bezeichnet.
Ein Proxy-Objekt-Trap ist eine Funktion, die immer dann aufgerufen wird, wenn Sie eine bestimmte Aktion an einem Proxy-Objekt ausführen. Mit Traps können Sie das Verhalten des Proxy-Objekts abfangen und anpassen. Der Zugriff auf eine Eigenschaft aus dem Proxy-Objekt ruft die auf erhalten trap, und das Ändern oder Manipulieren einer Eigenschaft aus dem Proxy-Objekt ruft die auf Satz fangen.
Schließlich erstellt der Code ein Proxy-Objekt mit der Proxy Konstrukteur. Es geht vorbei Originalobjekt Und Handler als Zielobjekt bzw. Handler.
Verwendung von Proxy-Objekten
Proxy-Objekte haben mehrere Verwendungen in JavaScript, von denen einige wie folgt sind.
Hinzufügen von Funktionalität zu einem Objekt
Sie können ein Proxy-Objekt verwenden, um ein vorhandenes Objekt zu umschließen und neue Funktionen hinzuzufügen, z. B. Protokollierung oder Fehlerbehandlung, ohne das ursprüngliche Objekt zu ändern.
Um neue Funktionen hinzuzufügen, müssen Sie die verwenden Proxy -Konstruktor und definieren Sie eine oder mehrere Traps für die Aktionen, die Sie abfangen möchten.
Zum Beispiel:
konst Benutzerobjekt = {
Vorname: "Kennedy",
Familienname, Nachname: "Martins",
Alter: 20,
};konst Handler = {
erhalten: Funktion(Ziel, Eigentum){
Konsole.Protokoll(„Eigentum erwerben“${Eigenschaft}"`);
zurückkehren Ziel[Eigenschaft];
},
Satz: Funktion(Ziel, Eigenschaft, Wert){
Konsole.Protokoll(`Eigenschaft setzen"${Eigenschaft}" schätzen "${Wert}"`);
Ziel[Eigenschaft] = Wert;
},
};konst Proxy = neuProxy(Benutzerobjekt, Handler);
Konsole.log (proxy.vorname); // Abrufen der Eigenschaft "firstName" Kennedy
Konsole.log (proxy.nachname); // Eigenschaft "lastName" abrufen Martins
Proxy.Alter = 23; // Eigenschaft festlegen "Alter" schätzen "23"
Dieser Codeblock fügt Funktionalität über die Proxy-Traps hinzu, erhalten Und Satz. Wenn Sie jetzt versuchen, auf eine Eigenschaft der Benutzerobjekt, protokolliert das Proxy-Objekt zuerst Ihren Vorgang in der Konsole, bevor es auf die Eigenschaft zugreift oder diese ändert.
Validieren von Daten, bevor sie für ein Objekt festgelegt werden
Sie können Proxy-Objekte verwenden, um Daten zu validieren und sicherzustellen, dass sie bestimmte Kriterien erfüllen, bevor Sie sie für ein Objekt festlegen. Sie können dies tun, indem Sie die Validierungslogik in a definieren Satz Falle in der Handler Objekt.
Zum Beispiel:
konst Benutzerobjekt = {
Vorname: "Kennedy",
Familienname, Nachname: "Martins",
Alter: 20,
};konst Handler = {
erhalten: Funktion(Ziel, Eigentum){
Konsole.Protokoll(„Eigentum erwerben“${Eigenschaft}"`);
zurückkehren Ziel[Eigenschaft];
},
Satz: Funktion(Ziel, Eigenschaft, Wert){
Wenn (
Eigentum "Alter" &&
Art der Wert == "Nummer" &&
Wert > 0 &&
Wert < 120
) {
Konsole.Protokoll(`Eigenschaft setzen"${Eigenschaft}" schätzen "${Wert}"`);
Ziel[Eigenschaft] = Wert;
} anders {
WurfneuFehler("Ungültiger Parameter. Bitte prüfen und korrigieren.");
}
},
};
konst Proxy = neuProxy(Benutzerobjekt, Handler);
Proxy-Alter = 21;
Dieser Codeblock fügt Validierungsregeln zu der hinzu Satz fangen. Sie können dem einen beliebigen Wert zuweisen Alter Grundstück auf a Benutzerobjekt Beispiel. Aber mit den hinzugefügten Validierungsregeln können Sie der Alterseigenschaft nur dann einen neuen Wert zuweisen, wenn es sich um eine Zahl handelt, die größer als 0 und kleiner als 120 ist. Jeder Wert, den Sie für die festzulegen versuchen Alter Eigenschaft, die die erforderlichen Kriterien nicht erfüllt, löst einen Fehler aus und gibt eine Fehlermeldung aus.
Steuern des Zugriffs auf Objekteigenschaften
Sie können Proxy-Objekte verwenden, um bestimmte Eigenschaften eines Objekts auszublenden. Definieren Sie dazu die Einschränkungslogik in erhalten Traps für die Eigenschaften, auf die Sie den Zugriff kontrollieren möchten.
Zum Beispiel:
konst Benutzerobjekt = {
Vorname: "Kennedy",
Familienname, Nachname: "Martins",
Alter: 20,
Telefon: 1234567890,
Email: "[email protected]",
};konst Handler = {
erhalten: Funktion(Ziel, Eigentum){
Wenn (Eigentum "Telefon" || Eigentum "Email") {
WurfneuFehler("Zugriff auf Informationen verweigert");
} anders {
Konsole.Protokoll(„Eigentum erwerben“${Eigenschaft}"`);
zurückkehren Ziel[Eigenschaft];
}
},
Satz: Funktion(Ziel, Eigenschaft, Wert){
Konsole.Protokoll(`Eigenschaft setzen"${Eigenschaft}" schätzen "${Wert}"`);
Ziel[Eigenschaft] = Wert;
},
};konst Proxy = neuProxy(Benutzerobjekt, Handler);
Konsole.log (proxy.vorname); // Abrufen der Eigenschaft "firstName" Kennedy
Konsole.log (proxy.email); // Löst einen Fehler aus
Der obige Codeblock fügt bestimmte Einschränkungen hinzu erhalten fangen. Zunächst können Sie auf alle verfügbaren Eigenschaften zugreifen Benutzerobjekt. Die hinzugefügten Regeln verhindern den Zugriff auf vertrauliche Informationen wie die E-Mail oder das Telefon des Benutzers. Der Versuch, auf eine dieser Eigenschaften zuzugreifen, löst einen Fehler aus.
Andere Proxy-Traps
Der erhalten Und Satz Traps sind die gebräuchlichsten und nützlichsten, aber es gibt noch 11 weitere JavaScript-Proxy-Traps. Sie sind:
- anwenden: Der anwenden trap wird ausgeführt, wenn Sie eine Funktion für das Proxy-Objekt aufrufen.
- bauen: Der bauen trap wird ausgeführt, wenn Sie den new-Operator verwenden, um ein Objekt aus dem Proxy-Objekt zu erstellen.
- Eigenschaft löschen: Der Eigenschaft löschen trap läuft, wenn Sie die verwenden löschen -Operator zum Entfernen einer Eigenschaft aus dem Proxy-Objekt.
- hat - Der hat trap läuft, wenn Sie die verwenden In -Operator, um zu prüfen, ob eine Eigenschaft für das Proxy-Objekt vorhanden ist.
- eigeneSchlüssel - Der eigeneSchlüssel Trap läuft, wenn Sie entweder die aufrufen Object.getOwnPropertyNames oder Object.getOwnPropertySymbols Funktion auf dem Proxy-Objekt.
- getOwnPropertyDescriptor - Der getOwnPropertyDescriptor Trap läuft, wenn Sie die anrufen Object.getOwnPropertyDescriptor Funktion auf dem Proxy-Objekt.
- Eigenschaft definieren - Der Eigenschaft definieren Trap läuft, wenn Sie die anrufen Object.defineProperty Funktion auf dem Proxy-Objekt.
- verhindernErweiterungen - Der verhindernErweiterungen Trap läuft, wenn Sie die anrufen Object.preventExtensions Funktion auf dem Proxy-Objekt.
- istErweiterbar - Der istErweiterbar Trap läuft, wenn Sie die anrufen Objekt.isExtensible Funktion auf dem Proxy-Objekt.
- getPrototypeOf - Der getPrototypeOf Trap läuft, wenn Sie die anrufen Object.getPrototypeOf Funktion auf dem Proxy-Objekt.
- setPrototypeOf - Der setPrototypeOf Trap läuft, wenn Sie die anrufen Object.setPrototypeOf Funktion auf dem Proxy-Objekt.
Wie Satz Und erhalten Traps können Sie diese Traps verwenden, um Ihrem Objekt neue Funktionalitäts-, Validierungs- und Steuerungsebenen hinzuzufügen, ohne das Original zu ändern.
Die Nachteile von Proxy-Objekten
Proxy-Objekte können ein leistungsstarkes Werkzeug sein, um einem Objekt benutzerdefinierte Funktionen oder Validierungen hinzuzufügen. Aber sie haben auch einige potenzielle Nachteile. Ein solcher Nachteil ist die Schwierigkeit beim Debuggen, da es schwierig sein kann zu sehen, was hinter den Kulissen passiert.
Proxy-Objekte können auch schwierig zu verwenden sein, insbesondere wenn Sie mit ihnen nicht vertraut sind. Sie sollten diese Nachteile sorgfältig berücksichtigen, bevor Sie Proxy-Objekte in Ihrem Code verwenden.
