JavaScript Proxies : intercepter les opérations sur les objets
Vous êtes-vous déjà demandé comment fonctionnent les librairies JavaScript qui mettent à jour la page quand vous modifiez une variable ? La magie opère souvent grâce aux Proxies. Chez Eve Media, nous comprenons ces mécanismes pour mieux utiliser les frameworks modernes.
Qu’est-ce qu’un Proxy
Un Proxy enveloppe un objet et intercepte les opérations fondamentales : lecture, écriture, suppression de propriétés, appels de fonction. Vous pouvez ainsi ajouter du comportement custom à ces opérations.
Création d’un Proxy
const proxy = new Proxy(target, handler). target est l’objet original. handler est un objet avec des « traps » : des fonctions qui interceptent les opérations. get, set, deleteProperty, has, etc.
Trap get
Le trap get intercepte la lecture : handler = { get(target, prop) { console.log(‘Lecture de’, prop); return target[prop]; } }. Chaque accès à une propriété passe par cette fonction.
Trap set
Le trap set intercepte l’écriture : handler = { set(target, prop, value) { console.log(‘Écriture de’, prop); target[prop] = value; return true; } }. C’est ici que la magie de la réactivité opère.
Réactivité avec les Proxies
Vue 3 utilise les Proxies pour sa réactivité. Quand vous modifiez une propriété réactive, le trap set détecte le changement et déclenche les mises à jour du DOM. C’est automatique et transparent.
Comparaison avec Object.defineProperty
Vue 2 utilisait Object.defineProperty, qui nécessite de définir les getters/setters propriété par propriété. Les Proxies sont plus puissants : ils interceptent toutes les propriétés, y compris les nouvelles.
Cas d’usage
Validation : rejeter les valeurs invalides dans le trap set. Logging : tracer tous les accès à un objet. Valeurs par défaut : retourner une valeur par défaut pour les propriétés inexistantes. Révocation : créer des références qui peuvent être invalidées.
Proxy réactif simple
Voici un exemple minimaliste de système réactif : interceptez les sets, stockez les « subscribers » (fonctions à appeler), et appelez-les quand la valeur change. C’est le cœur de la réactivité.
Reflect
L’objet Reflect fournit des méthodes pour les opérations par défaut. Dans les traps, utilisez Reflect.get/set au lieu de target[prop] pour un comportement correct avec les prototypes et les propriétés héritées.
Limitations
Les Proxies ont un léger overhead de performance. Certains objets natifs (Map, Set, Date) nécessitent un traitement spécial. Le debugging peut être plus complexe avec les objets proxifiés.
Conclusion
Les Proxies sont un outil puissant de métaprogrammation en JavaScript. Comprendre leur fonctionnement aide à mieux utiliser et débugger les frameworks réactifs modernes.
Chez Eve Media, nous maîtrisons les fondamentaux de JavaScript. Contactez-nous pour vos projets complexes.
