JavaScript - Proxies : Guide pour débutants

Salut à toi, futur(e) programmeur(se) ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des Proxies JavaScript. Ne t'inquiète pas si tu n'en as jamais entendu parler auparavant - nous allons commencer par les bases et progresser pas à pas. À la fin de ce tutoriel, tu seras bien rodé dans l'art d'utiliser les Proxies comme un pro !

Qu'est-ce qu'un Proxy en JavaScript ?

Commençons par une simple analogie. Imagine que tu es une célébrité (parce que pourquoi pas rêver grand, non ?). Tu es tellement connu(e) que tu as besoin de quelqu'un pour gérer tes rendez-vous, tes fan mails et autres activités quotidiennes. Cette personne qui agit en ton nom est appelée un proxy dans le monde réel.

En JavaScript, un Proxy fonctionne de manière similaire. C'est un objet qui enveloppe un autre objet (que nous appellerons l'objet cible) et peut intercepter et redéfinir les opérations fondamentales pour cet objet. Génial, non ?

Voici un exemple de base pour nous lancer :

let target = {
name: "John Doe",
age: 30
};

let handler = {
get: function(target, property) {
console.log(`Accès à la propriété ${property}`);
return target[property];
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);

Si tu exécutes ce code, tu verras :

Accès à la propriété name
John Doe

Décomposons cela :

1. Nous avons un objet target avec les propriétés name et age.
2. Nous créons un objet handler avec un piège get (nous en reparlerons plus en détail bientôt).
3. Nous créons un proxy en utilisant le constructeur Proxy, en passant notre target et notre handler.
4. Lorsque nous tentons d'accéder à proxy.name, notre piège get est déclenché, enregistrant un message avant de retourner la valeur réelle.

Handlers JavaScript Proxy

Maintenant que nous avons mis les pieds dans l'eau, plongons un peu plus profondément dans les handlers de Proxy. Un handler est un objet qui définit des pièges pour notre Proxy. Les pièges sont des méthodes qui fournissent la recherche de propriétés, l'affectation, l'enumération, l'appel de fonctions, etc.

Voici un tableau de certains pièges handler courants :

Piege	Description
get	Interrompt l'accès aux propriétés
set	Interrompt l'affectation des propriétés
has	Interrompt l'opérateur in
deleteProperty	Interrompt l'opérateur delete
apply	Interrompt les appels de fonctions
construct	Interrompt l'opérateur new

Voyons un exemple plus complet utilisant plusieurs pièges :

let target = {
name: "Alice",
age: 25
};

let handler = {
get: function(target, property) {
console.log(`Accès à la propriété ${property}`);
return target[property];
},
set: function(target, property, value) {
console.log(`Définition de la propriété ${property} à ${value}`);
target[property] = value;
return true;
},
has: function(target, property) {
console.log(`Vérification si ${property} existe`);
return property in target;
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);  // Déclenche le piège get
proxy.job = "Developer";  // Déclenche le piège set
console.log("age" in proxy);  // Déclenche le piège has

Exécuter ce code affichera :

Accès à la propriété name
Alice
Définition de la propriété job à Developer
Vérification si age existe
true

C'est génial ! Notre Proxy intercepte maintenant l'accès aux propriétés, l'affectation et l'opérateur in !

Utilisations de l'Objet Proxy en JavaScript

Tu te demandes peut-être : "C'est bien sympa tout ça, mais où utiliserais-je ça dans la vie réelle ?" Excellent pregunta ! Les Proxies ont plusieurs applications pratiques :

1. Validation : Tu peux utiliser les Proxies pour valider les données avant qu'elles ne soient définies sur un objet.

let user = {
name: "Bob",
age: 30
};

let validator = {
set: function(obj, prop, value) {
if (prop === "age") {
if (typeof value !== "number") {
throw new TypeError("L'âge doit être un nombre");
}
if (value < 0 || value > 120) {
throw new RangeError("L'âge doit être entre 0 et 120");
}
}
obj[prop] = value;
return true;
}
};

let proxiedUser = new Proxy(user, validator);

proxiedUser.age = 25;  // Ça fonctionne
try {
proxiedUser.age = "vingt-cinq";  // Cela lance un TypeError
} catch (e) {
console.log(e.message);
}
try {
proxiedUser.age = 150;  // Cela lance un RangeError
} catch (e) {
console.log(e.message);
}

2. Logging : Tu peux utiliser les Proxies pour enregistrer l'accès aux propriétés des objets.

let target = {
name: "Charlie",
age: 35
};

let logger = {
get: function(target, property) {
console.log(`Propriété ${property} accédée à ${new Date()}`);
return target[property];
}
};

let proxiedTarget = new Proxy(target, logger);

console.log(proxiedTarget.name);
console.log(proxiedTarget.age);

3. Valeurs par défaut : Tu peux utiliser les Proxies pour fournir des valeurs par défaut pour les propriétés inexistantes.

let handler = {
get: function(target, property) {
return property in target ? target[property] : "Propriété non trouvée";
}
};

let proxy = new Proxy({}, handler);

proxy.name = "David";
console.log(proxy.name);  // Affiche : David
console.log(proxy.age);   // Affiche : Propriété non trouvée

Liste des Handlers Proxy JavaScript

Pour conclure notre voyage à travers le monde des Proxies JavaScript, voyons une liste complète de tous les pièges handler disponibles :

Handler Trap	Description
get	Interrompt la récupération des valeurs des propriétés
set	Interrompt la définition des valeurs des propriétés
has	Interrompt l'opérateur in
deleteProperty	Interrompt l'opérateur delete
apply	Interrompt les appels de fonctions
construct	Interrompt l'opérateur new
getPrototypeOf	Interrompt Object.getPrototypeOf
setPrototypeOf	Interrompt Object.setPrototypeOf
isExtensible	Interrompt Object.isExtensible
preventExtensions	Interrompt Object.preventExtensions
getOwnPropertyDescriptor	Interrompt Object.getOwnPropertyDescriptor
defineProperty	Interrompt Object.defineProperty
ownKeys	Interrompt Object.getOwnPropertyNames et Object.getOwnPropertySymbols

Et voilà ! Nous avons couvert les bases des Proxies JavaScript, exploré quelques utilisations pratiques et même regardé tous les pièges handler disponibles. Souviens-toi, comme avec tout outil puissant, les Proxies devraient être utilisés avec parcimonie. Ils sont géniaux pour certains cas d'utilisation, mais ils apportent également une surcharge en performance.

J'espère que ce tutoriel t'a été utile pour démystifier les Proxies JavaScript. Continue de pratiquer, continue de coder, et avant de savoir, tu seras un pro du proxying ! Bon codage !

Credits: Image by storyset