JavaScript Academy · Leçon

Intercepteurs get et set

Personnalisez la lecture et l’écriture des propriétés.

Intercepteurs get et set est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Les pièges get et set

Les pièges get et set sont les points d'interception les plus utilisés des proxies. Ils interceptent la lecture et l'écriture des propriétés, ce qui vous permet de transformer les valeurs, de valider l'entrée ou d'enregistrer les accès.

Signature du piège get

get(target, property, receiver) s'exécute lors de chaque lecture de propriété. Renvoyez ce que vous voulez que l'appelant voie.

const proxy = new Proxy({ price: 10 }, {
  get(target, prop) {
    return target[prop];
  }
});

console.log(proxy.price);

Valeurs par défaut via get

Un piège get peut fournir une valeur de remplacement pour les propriétés manquantes au lieu de renvoyer undefined.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    return prop in target ? target[prop] : 0;
  }
});

console.log(proxy.a);
console.log(proxy.missing);

Transformer les valeurs lues

Le piège get peut modifier les valeurs lors de leur sortie, par exemple en convertissant les chaînes en majuscules.

const proxy = new Proxy({ name: 'ada' }, {
  get(target, prop) {
    const value = target[prop];
    return typeof value === 'string' ? value.toUpperCase() : value;
  }
});

console.log(proxy.name);

Signature du piège set

set(target, property, value, receiver) s'exécute lors de chaque écriture. Il doit renvoyer true en cas de réussite ; sinon, le mode strict lève une exception.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = value;
    return true;
  }
});

proxy.x = 5;
console.log(proxy.x);

Validation dans set

L'utilisation classique d'un piège set est la validation : il rejette les valeurs invalides avant qu'elles n'atteignent la cible.

const person = new Proxy({}, {
  set(target, prop, value) {
    if (prop === 'age' && (typeof value !== 'number' || value < 0)) {
      throw new TypeError('age must be a non-negative number');
    }
    target[prop] = value;
    return true;
  }
});

person.age = 30;
console.log(person.age);
try { person.age = -5; } catch (e) { console.log(e.message); }

Convertir les valeurs dans set

Au-delà du rejet, un piège set peut normaliser l'entrée, par exemple en supprimant les espaces superflus des chaînes avant leur stockage.

const proxy = new Proxy({}, {
  set(target, prop, value) {
    target[prop] = typeof value === 'string' ? value.trim() : value;
    return true;
  }
});

proxy.name = '   Ada   ';
console.log('[' + proxy.name + ']');

Enregistrer les deux opérations

Combinez get et set pour suivre chaque accès. C'est extrêmement utile pour déboguer la manière dont un objet est utilisé.

const proxy = new Proxy({ v: 1 }, {
  get(target, prop) {
    console.log('GET ' + prop);
    return target[prop];
  },
  set(target, prop, value) {
    console.log('SET ' + prop + ' = ' + value);
    target[prop] = value;
    return true;
  }
});

proxy.v = 42;
console.log(proxy.v);

Imposer la lecture seule

Un piège set qui rejette toujours les écritures transforme un proxy en vue en lecture seule de sa cible.

const readonly = new Proxy({ pi: 3.14 }, {
  set() {
    console.log('writes are blocked');
    return false;
  }
});

try {
  'use strict';
  readonly.pi = 0;
} catch (e) {
  console.log(e.name);
}
console.log(readonly.pi);

Clés symbole et éléments internes

Les pièges se déclenchent également pour les clés symbole. Soyez prudent : enregistrer chaque propriété, y compris les symboles internes, peut produire beaucoup de bruit ; filtrez-les si nécessaire.

const proxy = new Proxy({ a: 1 }, {
  get(target, prop) {
    if (typeof prop === 'string') console.log('reading ' + prop);
    return target[prop];
  }
});

console.log(proxy.a);

Pourquoi get et set sont importants

Ensemble, ces pièges permettent la validation, les propriétés calculées, les valeurs par défaut, l'enregistrement et la réactivité, le tout sans modifier la cible. Cependant, écrire manuellement target[prop] = value dans les pièges présente des cas particuliers. L'API Reflect, présentée ensuite, les gère correctement.

const tracked = new Proxy({ total: 0 }, {
  set(target, prop, value) {
    console.log(prop + ' changed to ' + value);
    target[prop] = value;
    return true;
  }
});
tracked.total = 100;
console.log(tracked.total);

Vérification rapide

Que doit renvoyer un piège set pour signaler la réussite d'une affectation ?

Récapitulatif : les pièges get et set

Vous avez découvert les pièges essentiels des proxies :

get(target, prop, receiver) intercepte les lectures ; renvoyez n'importe quelle valeur.
set(target, prop, value, receiver) intercepte les écritures ; renvoyez true en cas de réussite.
Utilisez-les pour les valeurs par défaut, les transformations, la validation et l'enregistrement.
Pour une gestion interne correcte dans les pièges, utilisez Reflect, présenté ensuite.

Questions Fréquemment Posées

La leçon « Intercepteurs get et set » est-elle gratuite ?

Oui — le texte complet de « Intercepteurs get et set » 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 « Intercepteurs get et set » ?

Personnalisez la lecture et l’écriture des propriétés. 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 2 sur 4.

Combien de temps prend la leçon « Intercepteurs get et set » ?

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.

Toutes les leçons de ce cours

← Retour à JavaScript Academy