In diesem Tutorial lernen Sie anhand von Beispielen JavaScript-Proxys kennen.
In JavaScript werden Proxys (Proxy-Objekt) verwendet, um ein Objekt zu verpacken und verschiedene Vorgänge wie Lesen, Einfügen, Validieren usw. neu in das Objekt zu definieren. Mit Proxy können Sie einem Objekt oder einer Funktion benutzerdefiniertes Verhalten hinzufügen.
Proxy-Objekt erstellen
Die Syntax des Proxys lautet:
new Proxy(target, handler);
Hier,
new Proxy()- der Konstruktor.target- das Objekt / die Funktion, die Sie vertreten möchtenhandler- kann das benutzerdefinierte Verhalten des Objekts neu definieren
Beispielsweise,
let student1 = ( age: 24, name: "Felix" ) const handler = ( get: function(obj, prop) ( return obj(prop) ? obj(prop) : 'property does not exist'; ) ) const proxy = new Proxy(student1, handler); console.log(proxy.name); // Felix console.log(proxy.age); // 24 console.log(proxy.class); // property does not exist
Hier wird die get()Methode verwendet, um auf den Eigenschaftswert des Objekts zuzugreifen. Und wenn die Eigenschaft im Objekt nicht verfügbar ist, gibt sie zurück, dass die Eigenschaft nicht vorhanden ist.
Wie Sie sehen, können Sie einen Proxy verwenden, um neue Operationen für das Objekt zu erstellen. Ein Fall kann auftreten, wenn Sie überprüfen möchten, ob ein Objekt einen bestimmten Schlüssel hat, und eine auf diesem Schlüssel basierende Aktion ausführen möchten. In solchen Fällen können Proxies verwendet werden.
Sie können auch einen leeren Handler übergeben. Wenn ein leerer Handler übergeben wird, verhält sich der Proxy wie ein Originalobjekt. Beispielsweise,
let student = ( name: 'Jack', age: 24 ) const handler = ( ); // passing empty handler const proxy1 = new Proxy(student, ()); console.log(proxy1); // Proxy (name: "Jack", age: 24) console.log(proxy1.name); // Jack
Proxy-Handler
Proxy bietet zwei Handler-Methoden get()und set().
get () Handler
Die get()Methode wird verwendet, um auf die Eigenschaften eines Zielobjekts zuzugreifen. Beispielsweise,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( return obj(prop); ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack
Hier nimmt die get()Methode das Objekt und die Eigenschaft als Parameter.
set () Handler
Mit dieser set()Methode wird der Wert eines Objekts festgelegt. Beispielsweise,
let student = ( name: 'John' ) let setNewValue = ( set: function(obj, prop, value) ( obj(prop) = value; return; ) ); // setting new proxy let person = new Proxy(student, setNewValue); // setting new key/value person.age = 25; console.log(person); // Proxy (name: "John", age: 25)
Hier agewird dem Schülerobjekt eine neue Eigenschaft hinzugefügt.
Verwendung von Proxy
1. Zur Validierung
Sie können einen Proxy zur Validierung verwenden. Sie können den Wert eines Schlüssels überprüfen und eine Aktion basierend auf diesem Wert ausführen.
Beispielsweise,
let student = ( name: 'Jack', age: 24 ) const handler = ( // get the object key and value get(obj, prop) ( // check condition if (prop == 'name') ( return obj(prop); ) else ( return 'Not allowed'; ) ) ) const proxy = new Proxy(student, handler); console.log(proxy.name); // Jack console.log(proxy.age); // Not allowed
Hier ist nur auf die Eigenschaft name des Schülerobjekts zugegriffen. Andernfalls wird zurückgegeben. Nicht zulässig.
2. Schreibgeschützte Ansicht eines Objekts
Es kann vorkommen, dass Sie nicht möchten, dass andere Personen Änderungen an einem Objekt vornehmen. In solchen Fällen können Sie einen Proxy verwenden, um ein Objekt nur lesbar zu machen. Beispielsweise,
let student = ( name: 'Jack', age: 23 ) const handler = ( set: function (obj, prop, value) ( if (obj(prop)) ( // cannot change the student value console.log('Read only') ) ) ); const proxy = new Proxy(student, handler); proxy.name = 'John'; // Read only proxy.age = 33; // Read only
Im obigen Programm kann man das Objekt in keiner Weise mutieren.
Wenn Sie versuchen, das Objekt auf irgendeine Weise zu mutieren, erhalten Sie nur eine Zeichenfolge mit der Aufschrift "Schreibgeschützt".
3. Nebenwirkungen
Sie können einen Proxy verwenden, um eine andere Funktion aufzurufen, wenn eine Bedingung erfüllt ist. Beispielsweise,
const myFunction = () => ( console.log("execute this function") ); const handler = ( set: function (target, prop, value) ( if (prop === 'name' && value === 'Jack') ( // calling another function myFunction(); ) else ( console.log('Can only access name property'); ) ) ); const proxy = new Proxy((), handler); proxy.name = 'Jack'; // execute this function proxy.age = 33; // Can only access name property
Der JavaScript-Proxy wurde ab der Version von JavaScript ES6 eingeführt . Einige Browser unterstützen die Verwendung möglicherweise nicht vollständig. Weitere Informationen finden Sie unter JavaScript-Proxy.
