Maison  >  Article  >  interface Web  >  Les proxys JavaScript peuvent-ils créer des getters et setters dynamiques pour des propriétés non définies ?

Les proxys JavaScript peuvent-ils créer des getters et setters dynamiques pour des propriétés non définies ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-29 04:49:02988parcourir

 Can JavaScript Proxies Create Dynamic Getters and Setters for Undefined Properties?

Gitters et setters dynamiques en JavaScript

Introduction :

JavaScript offre des mécanismes flexibles pour l'accès et la modification des propriétés via des getters et passeurs. S'il est bien connu de définir des getters et des setters pour des noms de propriétés prédéterminés, une question se pose : est-il possible d'implémenter des getters et des setters dynamiques qui s'appliquent à des noms de propriétés non définis ?

Gutters dynamiques et Setters utilisant des proxys (ES6) :

Depuis ES2015, JavaScript a introduit des proxys, qui permettent la création d'objets agissant comme des « façades » pour d'autres objets. Cela permet l'interception et la modification des opérations de propriété, y compris les getters et setters.

Exemple :

L'extrait de code suivant illustre des getters et setters dynamiques utilisant des proxys :

<code class="javascript">"use strict";
if (typeof Proxy == "undefined") {
    throw new Error("This browser doesn't support Proxy");
}
let original = {
    example: "value",
};
let proxy = new Proxy(original, {
    get(target, name, receiver) {
        if (Reflect.has(target, name)) {
            let rv = Reflect.get(target, name, receiver);
            if (typeof rv === "string") {
                rv = rv.toUpperCase();
            }
            return rv;
        }
        return "missing";
    }
});

console.log(`original.example = ${original.example}`); // "original.example = value"
console.log(`proxy.example = ${proxy.example}`);       // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`);       // "proxy.unknown = missing"
original.example = "updated";
console.log(`original.example = ${original.example}`); // "original.example = updated"
console.log(`proxy.example = ${proxy.example}`);       // "proxy.example = UPDATED"</code>

Dans cet exemple :

  • L'objet original contient un exemple de propriété avec la valeur "value".
  • Le proxy est créé comme une façade pour l'original, avec le gestionnaire get().
  • Le gestionnaire get() intercepte l'accès aux propriétés. Si la propriété existe dans l'original, sa valeur est renvoyée. Si la propriété n'est pas trouvée, elle renvoie "manquant".
  • Si la valeur de la propriété consultée est une chaîne, elle est convertie en majuscule.
  • La modification de la propriété via proxy est reflétée dans l'original.
  • La modification de la propriété via proxy est reflétée dans l'original.
Les propriétés définies sur l'original après la création du proxy sont également accessibles via le proxy.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn