1. Acceuil
  2. Cours
  3. Cours JavaScript
  4. Les proxy (utilisation basique)

La délégation des variables JS (Proxy) - Utilisation Basique

où comment ne plus se préocuper des changements récurents

Problèmatique

En JavaScript, manipuler des objets implique souvent d'accéder ou de modifier leurs propriétés. Cependant, il peut être difficile de suivre les accès ou d'ajouter des contrôles sans modifier directement l'objet.

Définition

Un Proxy est un objet intermédiaire à qui l'on délègue les différents états des propriétés d'un autre objet. Il peut ainsi intercepter et contrôler l'accès aux propriétés de l'objet, sans modifier son implémentation.

Mise en contexte

Imaginons un cas concret : nous avons un objet représentant un utilisateur, et souhaitons savoir à quel moment certaines données sont consultées.

  • const user={
    • name:'Paul',
    • mail:'paul@mail.com',
    • role:'admin'
  • }

On veut pouvoir déterminer quand l'utilisateur 'Paul' accède à certaines données

Première approche

La solution la plus simple serait d'ajouter des getters directement à la const User

  • const user={
    • name:'Paul',
    • mail:'paul@mail.com',
    • role:'admin'
    • getName(){
      • //ici la fonction de controle
      • return this.name;
      }
    • [...]
  • }
  • console.log(user.getName()); // Accès à la propriété 'name'
  • console.log(user.name); // Aucun suivi de l'accès ici !
Quels problèmes liés à cette approche
  • On doit définir une méthode pour chaque propriété, ce qui peut devenir fastidieux.
  • Il n'y a aucun contrôle si on accède directement aux propriétés en elle mêmes.
  • On ne peut pas prévoir à l'avance toutes les propriétés existantes dans l'objet.

C'est là que les Proxy en JavaScript entre en jeux !

Implémentation

Le Handler

Première étape : Créer un handler dont le rôle sera d'intercepter l'accès aux propriétés de l'objet.

Ici on va se servir du get qui prend en paramètre l'objet de référence et la propriété observée.

  • const handler={
    • get(target, property) {
      • //ici les contrôles d'accès type Log ...
      • console.log(`Accès à la propriété "${property}" : ${target[property]}`);
      • return target[property]; // Retourne la valeur de la propriété demandée
    • }
  • }
A quoi sert cette fonction
  • Elle intercepte chaque lecture d'une propriété de user.
  • Elle affiche un message en console avec le nom de la propriété accédée.
  • Elle retourne la valeur correspondante.

Le Proxy

Maintenant que nous avons notre handler, nous allons pouvoir déléguer les données de user à un Proxy

  • const userProxy=new Proxy(user,handler);
Comment ça marche ?
  • new Proxy(user, handler) crée un nouvel objet userProxy.
  • userProxy est un clône de user et donc a les mêmes propriétés, mais tous les accès passent par le handler.

Utilisation

A présent, nous n'allons plus nous servir de User mais de userProxy pour accèder au données.

  • alert(userProxy.name);
    • //Affichera dans la console : 'Accès à la propriété "name" : Paul'

Pourquoi utiliser un Proxy ?

  1. Évite d'écrire des getters manuels pour chaque propriété.
  2. Permet d'enregistrer les accès ou de bloquer certaines actions.
  3. Ajoute une couche de sécurité sans modifier l'objet d'origine.
  4. Fonctionne avec toutes les propriétés sans devoir les connaître à l'avance.
Partager