Dans ce didacticiel, vous découvrirez les proxys JavaScript à l'aide d'exemples.
En JavaScript, les proxies (objet proxy) sont utilisés pour envelopper un objet et redéfinir diverses opérations dans l'objet telles que la lecture, l'insertion, la validation, etc. Le proxy vous permet d'ajouter un comportement personnalisé à un objet ou à une fonction.
Création d'un objet proxy
La syntaxe du proxy est:
new Proxy(target, handler);
Ici,
new Proxy()- le constructeur.target- l'objet / la fonction que vous souhaitez proxyhandler- peut redéfinir le comportement personnalisé de l'objet
Par exemple,
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
Ici, la get()méthode est utilisée pour accéder à la valeur de propriété de l'objet. Et si la propriété n'est pas disponible dans l'objet, elle renvoie la propriété n'existe pas.
Comme vous pouvez le voir, vous pouvez utiliser un proxy pour créer de nouvelles opérations pour l'objet. Un cas peut survenir lorsque vous souhaitez vérifier si un objet possède une clé particulière et effectuer une action basée sur cette clé. Dans de tels cas, des proxys peuvent être utilisés.
Vous pouvez également passer un gestionnaire vide. Lorsqu'un gestionnaire vide est passé, le proxy se comporte comme un objet d'origine. Par exemple,
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
Gestionnaires de proxy
Proxy fournit deux méthodes de gestionnaire get()et set().
get () gestionnaire
La get()méthode est utilisée pour accéder aux propriétés d'un objet cible. Par exemple,
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
Ici, la get()méthode prend l'objet et la propriété comme paramètres.
gestionnaire set ()
La set()méthode est utilisée pour définir la valeur d'un objet. Par exemple,
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)
Ici, une nouvelle propriété ageest ajoutée à l'objet étudiant.
Utilisations du proxy
1. Pour validation
Vous pouvez utiliser un proxy pour la validation. Vous pouvez vérifier la valeur d'une clé et effectuer une action en fonction de cette valeur.
Par exemple,
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
Ici, seule la propriété name de l'objet étudiant est accessible. Sinon, il renvoie Non autorisé.
2. Vue en lecture seule d'un objet
Il peut arriver que vous ne souhaitiez pas laisser les autres apporter des modifications à un objet. Dans de tels cas, vous pouvez utiliser un proxy pour rendre un objet lisible uniquement. Par exemple,
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
Dans le programme ci-dessus, on ne peut en aucun cas muter l'objet.
Si l'on essaie de faire muter l'objet de quelque manière que ce soit, vous ne recevrez qu'une chaîne disant Lecture seule.
3. Effets secondaires
Vous pouvez utiliser un proxy pour appeler une autre fonction lorsqu'une condition est remplie. Par exemple,
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
Le proxy JavaScript a été introduit à partir de la version de JavaScript ES6 . Certains navigateurs peuvent ne pas prendre entièrement en charge son utilisation. Pour en savoir plus, visitez le proxy JavaScript.
