Au fil des ans, JavaScript est devenu un langage de programmation puissant et adaptable, évoluant constamment pour répondre aux besoins changeants des développeurs. L'une de ses avancées relativement récentes est l'objet Proxy, qui permet aux programmeurs de créer des objets puissants et flexibles capables d'intercepter et de modifier les opérations clés sur d'autres objets. Cet article se penche sur les capacités de Proxy en , couvrant sa syntaxe, ses attributs, ses applications typiques, ses points forts, ses limites, ses instances illustratives et ses approches recommandées. JavaScript Qu'est-ce qu'un proxy ? Un proxy est un objet qui enveloppe un autre objet et intercepte les opérations de base sur celui-ci, telles que l'accès, l'attribution et la suppression de propriétés. Le proxy est un aspect crucial de JavaScript qui permet aux développeurs d'écrire du code plus polyvalent et plus robuste. Le but de cet article est de fournir une compréhension complète de Proxy en JavaScript, englobant sa syntaxe, ses caractéristiques, ses avantages, ses inconvénients, ses illustrations et les techniques recommandées. Syntaxe et propriétés du proxy JavaScript's Proxy est une capacité qui permet la création d'objets capables de modifier et de personnaliser les opérations de base effectuées sur d'autres objets. Création d'un objet proxy Pour établir un objet Proxy, deux composants sont nécessaires : un objet cible et un objet gestionnaire. L'objet cible est celui sur lequel les opérations doivent être interceptées, tandis que l'objet gestionnaire est chargé de contenir les pièges, ou méthodes, utilisés pour intercepter ces opérations. Voici un exemple montrant comment créer un objet Proxy de base : const target = { name: 'John', age: 25, }; const handler = { get: function(target, prop) { console.log(`Getting property ${prop}`); return target[prop]; }, }; const proxy = new Proxy(target, handler); console.log(proxy.name); // Getting property name // John Dans cet exemple, nous générons un objet cible qui a deux caractéristiques : nom et âge. Nous générons également un objet gestionnaire doté d'un piège get pour capturer tous les efforts de lecture d'une propriété sur l'objet cible. Après cela, nous produisons un objet Proxy en fournissant les objets cible et gestionnaire au constructeur Proxy. Enfin, nous récupérons la propriété name de l'objet Proxy, qui appelle le piège get et envoie un message à la console. Les pièges et leur comportement Les pièges sont des méthodes qui interceptent les opérations sur l'objet cible. Il existe plusieurs pièges que vous pouvez utiliser avec un objet Proxy, notamment get, set, has, deleteProperty, etc. Voici un bref aperçu de certains des pièges les plus couramment utilisés : : Ce trap intercepte les tentatives de lecture d'une propriété sur l'objet cible. Il prend deux arguments : l'objet cible et la propriété en cours d'accès. L'interruption renvoie la valeur de la propriété. get : ce déroutement capture tout effort pour établir une propriété sur l'objet cible. Il nécessite trois paramètres : l'objet cible lui-même, la propriété en cours d'établissement et la valeur mise à jour de cette propriété. Le mécanisme a la capacité de modifier la valeur en cours d'établissement, ou il peut générer une erreur pour interdire l'établissement de la valeur. set : ce trap intercepte les tentatives de vérification de l'existence d'une propriété sur l'objet cible. Il prend deux arguments : l'objet cible et la propriété vérifiée. L'interruption renvoie une valeur booléenne indiquant si la propriété existe ou non. has : ce piège intercepte les tentatives de suppression d'une propriété de l'objet cible. Il prend deux arguments : l'objet cible et la propriété en cours de suppression. L'interruption peut supprimer la propriété ou générer une erreur pour empêcher la suppression de la propriété. deleteProperty Procurations révocables Les objets proxy possèdent une caractéristique fascinante qui permet de les invalider, ce qui fait que leurs pièges n'interceptent plus les opérations sur l'objet cible. Pour construire un objet Proxy qui peut être invalidé, utilisez la fonction . Proxy.revocable() Voici un exemple: const target = { name: 'John', age: 25, }; const handler = { get: function(target, prop) { console.log(`Getting property ${prop}`); return target[prop]; }, }; const {proxy, revoke} = Proxy.revocable(target, handler); console.log(proxy.name); // Getting property name // John revoke(); console.log(proxy.name); // Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked Dans cet exemple, nous créons un objet Proxy révocable à l'aide de la méthode . Nous accédons ensuite à la propriété name de l'objet Proxy, qui déclenche le piège get et enregistre un message dans la console. Nous révoquons ensuite l'objet Proxy à l'aide de la méthode , ce qui signifie que toute autre tentative d'accès aux propriétés de l'objet Proxy échouera. Proxy.revocable() revoke() Héritage avec Proxy Une autre caractéristique intéressante des objets Proxy est qu'ils peuvent être utilisés pour implémenter des modèles d'héritage en JavaScript. En utilisant un objet Proxy comme prototype d'un autre objet, vous pouvez intercepter les recherches de propriétés et personnaliser le comportement de la chaîne de prototypes. Voici un exemple : const parent = { name: 'John', }; const handler = { get: function(target, prop) { console.log(`Getting property ${prop}`); if (!(prop in target)) { return Reflect.get(parent, prop); } return target[prop]; }, }; const child = new Proxy({}, handler); console.log(child.name); // Getting property name // John child.name = 'Bob'; console.log(child.name); // Getting property name // Bob console.log(parent.name); // John Dans cet exemple, un objet parent est défini et possède un attribut de nom. Ensuite, nous créons un objet gestionnaire avec un piège get qui empêche toute demande de lecture pour les propriétés de l'objet enfant. L'interruption utilise la méthode Reflect.get() pour revenir à l'objet parent si la propriété est absente de l'objet enfant. Ensuite, en utilisant un objet Proxy comme prototype et l'objet gestionnaire comme gestionnaire, nous construisons un objet enfant. Enfin, nous accédons à la propriété name de l'objet enfant et la modifions, ce qui déclenche les interruptions get et set et enregistre les messages dans la console. Exemples concrets utilisant Proxy Mise en cache Un cas d'utilisation de Proxy consiste à mettre en cache des appels de fonction coûteux. Dans cet exemple, nous créons un objet Proxy qui met en cache le résultat d'un appel de fonction en fonction de ses arguments. function calculateCost(price, taxRate) { console.log('Calculating cost...'); return price * (1 + taxRate); } const cache = new Map(); const proxy = new Proxy(calculateCost, { apply(target, thisArg, args) { const key = args.join('-'); if (cache.has(key)) { console.log('Returning cached result...'); return cache.get(key); } else { const result = Reflect.apply(target, thisArg, args); cache.set(key, result); return result; } }, }); console.log(proxy(10, 0.2)); // Calculating cost... 12 console.log(proxy(10, 0.2)); // Returning cached result... 12 console.log(proxy(20, 0.2)); // Calculating cost... 24 console.log(proxy(20, 0.3)); // Calculating cost... 26 console.log(proxy(20, 0.3)); // Returning cached result... 26 Dans cet exemple, nous définissons une fonction appelée qui prend un prix et un taux de taxe et renvoie le coût avec la taxe. Nous créons ensuite un objet cache en utilisant la classe . calculateCost Map Ensuite, nous créons un objet Proxy appelé qui intercepte les appels de fonction à l'aide de l'interruption . L'interruption est appelée chaque fois que la fonction est appelée et elle reçoit les arguments de la fonction sous forme de tableau. Nous utilisons les arguments pour générer une clé de cache et vérifier si le résultat est déjà dans le cache. Si c'est le cas, nous renvoyons le résultat mis en cache. Sinon, nous calculons le résultat et le stockons dans le cache. proxy apply apply Enfin, nous invoquons la fonction en utilisant différents arguments et observons que le résultat est stocké dans le cache pour les appels ultérieurs avec des arguments identiques. proxy Validation Un autre cas d'utilisation de Proxy consiste à valider les propriétés d'un objet. Dans cet exemple, nous créons un objet Proxy qui valide la longueur d'une propriété de chaîne. const user = { name: 'John', password: 'secret', }; const proxy = new Proxy(user, { set(target, prop, value) { if (prop === 'password' && value.length < 8) { throw new Error('Password must be at least 8 characters long'); } target[prop] = value; return true; }, }); console.log(proxy.name); // John console.log(proxy.password); // secret proxy.password = '12345678'; console.log(proxy.password); // 12345678 proxy.password = '123'; // Error Dans cet exemple, nous définissons un objet appelé avec un et une propriété . Nous créons ensuite un objet Proxy appelé qui intercepte les affectations de propriété à l'aide de l'interruption . L'interruption est appelée chaque fois qu'une propriété est affectée, et elle reçoit le nom de la propriété, la nouvelle valeur et l'objet cible. user name password proxy set set Nous utilisons le piège pour vérifier si la propriété assignée est la propriété et si la valeur contient moins de 8 caractères. Si c'est le cas, nous lançons une erreur. Sinon, nous définissons la valeur de la propriété sur l'objet cible. set password Nous utilisons l'objet pour attribuer diverses valeurs à la propriété et notons que toute valeur de moins de 8 caractères déclenche une erreur. proxy password Enregistrement Un autre cas d'utilisation courant de Proxy consiste à consigner les accès et les affectations de propriété d'objet. Dans cet exemple, nous créons un objet Proxy qui enregistre les accès aux propriétés et les affectations. const user = { name: 'John', email: 'john@example.com', }; const proxy = new Proxy(user, { get(target, prop) { console.log(`Getting ${prop} property`); return target[prop]; }, set(target, prop, value) { console.log(`Setting ${prop} property to ${value}`); target[prop] = value; return true; }, }); console.log(proxy.name); // Getting name property -> John proxy.email = 'bob@example.com'; // Setting email property to bob@example.com console.log(proxy.email); // Getting email property -> bob@example.com Dans cet exemple, nous définissons un objet appelé avec un et une propriété . Nous créons ensuite un objet proxy appelé qui intercepte les accès aux propriétés et les affectations à l'aide des pièges et . user name email proxy get set L'interruption est appelée à chaque accès à une propriété et reçoit le nom de la propriété et l'objet cible. Dans cet exemple, nous enregistrons un message dans la console indiquant que la propriété est en cours d'accès, puis nous renvoyons la valeur de la propriété à partir de l'objet cible. get L'interruption est appelée chaque fois qu'une propriété est affectée, et elle reçoit le nom de la propriété, la nouvelle valeur et l'objet cible. Dans cet exemple, nous enregistrons un message dans la console indiquant que la propriété est affectée, puis nous définissons la valeur de la propriété sur l'objet cible. set Enfin, nous accédons et attribuons diverses propriétés à l'aide de l'objet et observons que les messages sont enregistrés dans la console. proxy Avantages et limites du proxy Avantages du proxy : avec les objets proxy, vous pouvez intercepter et personnaliser les opérations de base sur d'autres objets, ce qui vous permet de créer des fonctionnalités avancées telles que le contrôle d'accès, la mise en cache et la journalisation. Comportement personnalisable : les objets proxy offrent la possibilité d'implémenter des modèles d'héritage en JavaScript, ce qui peut conduire à un code plus polyvalent et évolutif. Héritage : les objets proxy peuvent être désactivés ou révoqués après leur création, ce qui les rend utiles pour limiter la portée de l'objet proxy ou pour des raisons de sécurité. Révocable Limites du proxy Malgré le fait que le proxy est avec nous depuis longtemps, toutes les versions de navigateurs ne peuvent pas prendre en charge cette fonctionnalité. De plus, l'utilisation de proxys peut affecter négativement les performances de votre application, surtout si vous les utilisez trop souvent. Il est important de comprendre la signification de l'utilisation d'un proxy. Il ne faut pas lui faire confiance pour les moments critiques pour l'application, tels que la validation importante de l'entrée de l'utilisateur. Meilleures pratiques d'utilisation du proxy : Avant d'implémenter un proxy dans votre code, soyez conscient des restrictions qu'il impose et comment elles peuvent affecter la vitesse et la sécurité de votre application. Soyez conscient des restrictions Les objets proxy ne doivent être utilisés qu'en cas d'absolue nécessité, car ils peuvent affecter les performances de votre code. : lorsque vous utilisez des objets Proxy, assurez-vous de tester soigneusement et soyez attentif à tout comportement potentiellement inattendu. Testez soigneusement : pour rendre votre code simple à lire et à maintenir, respectez les conventions acceptées et les meilleures pratiques lors de la mise en œuvre des objets Proxy. Respectez les normes Conclusion L'article se penche sur les fonctionnalités avancées de Proxy, telles que les modèles d'héritage et la possibilité de créer des objets Proxy révocables. Quel que soit votre niveau d'expérience en tant que développeur, comprendre Proxy en JavaScript est fondamental pour élever votre code à un niveau supérieur. En raison de son adaptabilité et de sa puissance, Proxy constitue un instrument essentiel pour tout développeur JavaScript aspirant à construire facilement des applications complexes.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

In your car, at home, or at work — Bosch technology shapes many areas of life.

Comprendre la puissance du proxy en JavaScript

Trop long; Pour lire

Aleksandr Guzenko

STORY’S CREDIBILITY

Code License

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Comprendre la puissance du proxy en JavaScript

Trop long; Pour lire

Aleksandr Guzenko

STORY’S CREDIBILITY

Code License

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES