ES6 en action: comment utiliser les procurations

proxies ES6: Métaprogrammation Powerhouse en JavaScript

Concepts clés:

Les proxies

ES6 permettent la métaprogrammation en interceptant l'accès à la propriété des objets. Un proxy agit comme un intermédiaire entre votre code et l'objet cible. Cela implique trois éléments clés:

• Target: L'objet d'origine que le proxy gère. Il peut s'agir de n'importe quel objet JavaScript, y compris des tableaux ou même d'autres proxys.
• Handler: Un objet définissant le comportement du proxy à l'aide de Traps .
• Traps: Fonctionne dans le gestionnaire qui contrôle comment le proxy réagit à des opérations spécifiques (par exemple, l'obtention, la définition, la suppression des propriétés).

Exemple illustratif:

Créons un proxy qui intercepte l'accès à la propriété:

<code class="language-javascript">const target = { a: 1, b: 2, c: 3 };

const handler = {
  get: (target, prop) => (prop in target ? target[prop] : 42), // Default to 42 if property doesn't exist
};

const proxy = new Proxy(target, handler);

console.log(proxy.a); // 1
console.log(proxy.b); // 2
console.log(proxy.d); // 42</code>

Ce proxy renvoie la valeur d'origine si la propriété existe; Sinon, il renvoie 42.

Exemple avancé: Paramètre de propriété contrôlée

Nous pouvons améliorer le proxy pour restreindre les affectations de propriétés:

<code class="language-javascript">const handler = {
  get: (target, prop) => (prop in target ? target[prop] : 42),
  set: (target, prop, value) => {
    if (prop.length === 1 && prop >= 'a' && prop <= 'z') {
      target[prop] = value;
      return true;
    } else {
      throw new Error(`Invalid property: ${prop}`);
    }
  },
};

const proxy = new Proxy({}, handler); // Start with an empty object

proxy.a = 10; // Allowed
proxy.b = 20; // Allowed
try {
  proxy.AB = 30; // Throws an error
} catch (e) {
  console.error(e);
}</code>

Cet exemple permet uniquement de définir les propriétés à personnage monopressé (A-Z).

Pièges proxy disponibles:

Au-delà de get et set, de nombreux pièges offrent un contrôle à grain fin:

• construct: Interceptions new appels d'opérateur.
• apply: intercepte les appels de fonction.
• deleteProperty: intercepte la suppression des propriétés.
• has: Interceptions in Contrôles de l'opérateur.
• ownKeys: intercepte l'énumération des propriétés.
• et plus ... (voir la documentation MDN pour une liste complète)

Applications pratiques:

• Profilage: Suivre la fréquence d'accès aux propriétés.
• liaison des données: synchroniser les modifications d'objet avec les mises à jour de l'interface utilisateur.
• Validation: appliquer les types de données ou les contraintes.
• Index de tableau négatifs: Éléments de tableau d'accès à partir de la fin.

Compatibilité et limitations du navigateur:

Bien que largement pris en charge dans les navigateurs modernes et Node.js, les proxys ES6 manquent de compatibilité complète des navigateurs (en particulier les navigateurs plus anciens). Surtout, ils ne peuvent pas polyvalents en raison de leur nature fondamentale.

Questions fréquemment posées (FAQ):

Les FAQ fournies sont déjà complètes et bien structurées. Aucun autre ajout n'est nécessaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!