Créer un Proxy
Enveloppez des objets pour intercepter les opérations.
Créer un Proxy est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce qu'un proxy ?
Un proxy enveloppe un objet et vous permet d'intercepter des opérations fondamentales comme la lecture, l'écriture et la suppression de propriétés.
Vous en créez un avec new Proxy(target, handler), où le gestionnaire définit des pièges qui personnalisent le comportement.
Un gestionnaire vide
Avec un gestionnaire vide, le proxy se comporte exactement comme la cible. Chaque opération est directement transmise.
const target = { greeting: 'hello' };
const proxy = new Proxy(target, {});
console.log(proxy.greeting);
proxy.greeting = 'hi';
console.log(target.greeting);La cible et le proxy partagent l'état
Le proxy ne copie pas la cible. Ils font référence au même objet sous-jacent : une modification effectuée par l'un est donc visible dans les deux.
const target = { count: 0 };
const proxy = new Proxy(target, {});
proxy.count = 5;
console.log(target.count);
target.count = 10;
console.log(proxy.count);Ajouter un piège get
Le piège get intercepte les lectures de propriétés. Ici, chaque lecture est enregistrée avant que la valeur soit renvoyée.
const proxy = new Proxy({ name: 'Ada' }, {
get(target, prop) {
console.log('reading ' + prop);
return target[prop];
}
});
console.log(proxy.name);Paramètres des pièges
Le piège get reçoit la target, le nom de la property et le receiver (le proxy). C'est vous qui décidez de la valeur à renvoyer.
const proxy = new Proxy({ a: 1 }, {
get(target, prop) {
return prop in target ? target[prop] : 'missing';
}
});
console.log(proxy.a);
console.log(proxy.b);Propriétés calculées lors de la lecture
Un piège get peut renvoyer des valeurs que la cible ne stocke pas réellement, en les calculant à la volée.
const proxy = new Proxy({ first: 'Ada', last: 'Lovelace' }, {
get(target, prop) {
if (prop === 'full') return target.first + ' ' + target.last;
return target[prop];
}
});
console.log(proxy.full);Ajouter un piège set
Le piège set intercepte les écritures. Vous devez renvoyer true pour signaler la réussite, sinon l'affectation est considérée comme un échec.
const proxy = new Proxy({}, {
set(target, prop, value) {
console.log('setting ' + prop + ' = ' + value);
target[prop] = value;
return true;
}
});
proxy.score = 42;
console.log(proxy.score);Le piège has
Le piège has intercepte l'opérateur in, ce qui vous permet de personnaliser les vérifications d'appartenance.
const proxy = new Proxy({ a: 1 }, {
has(target, prop) {
console.log('checking ' + prop);
return prop in target;
}
});
console.log('a' in proxy);
console.log('b' in proxy);Le piège deleteProperty
Le piège deleteProperty intercepte delete. Renvoyez true en cas de réussite.
const proxy = new Proxy({ secret: 'x', ok: 'y' }, {
deleteProperty(target, prop) {
console.log('deleting ' + prop);
delete target[prop];
return true;
}
});
delete proxy.secret;
console.log(Object.keys(proxy));De nombreux pièges disponibles
En plus de get et set, les proxies prennent en charge des pièges pour has, deleteProperty, ownKeys, apply (pour les fonctions), construct et bien d'autres. Vous n'implémentez que ceux dont vous avez besoin.
const proxy = new Proxy({ x: 1, y: 2 }, {
ownKeys(target) {
console.log('listing keys');
return Object.keys(target);
}
});
console.log(Object.keys(proxy));Pourquoi les proxies sont importants
Les proxies vous permettent d'ajouter de la validation, de l'enregistrement, des valeurs par défaut et de la réactivité sans modifier l'objet cible. Ils sont au cœur de systèmes de réactivité comme celui de Vue. Vous allez maintenant approfondir les pièges get et set.
const logged = new Proxy({ v: 0 }, {
get: (t, p) => { console.log('get ' + p); return t[p]; },
set: (t, p, val) => { console.log('set ' + p); t[p] = val; return true; }
});
logged.v = 9;
console.log(logged.v);Vérification rapide
Que crée new Proxy(target, handler) ?
Récapitulatif : création d'un proxy
Vous avez appris à intercepter les opérations sur les objets :
new Proxy(target, handler)enveloppe un objet avec des pièges.- Un gestionnaire vide transmet toutes les opérations ; le proxy et la cible partagent l'état.
- Pièges courants :
get,set,has,deleteProperty,ownKeys. - Les pièges set et delete doivent renvoyer
trueen cas de réussite.
Questions Fréquemment Posées
La leçon « Créer un Proxy » est-elle gratuite ?
Oui — le texte complet de « Créer un Proxy » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Créer un Proxy » ?
Enveloppez des objets pour intercepter les opérations. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Créer un Proxy » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.