Les proxys JavaScript peuvent-ils activer des getters et setters dynamiques pour n'importe quelle propriété ?

Implémentation de getters et setters dynamiques en JavaScript

Question :

Alors que JavaScript standard permet la création de getters et de setters pour des propriétés spécifiques, est-il possible de créer des getters et des setters fourre-tout qui gèrent tout nom de propriété non explicitement défini ?

Réponse :

Oui, prise en charge JavaScript pour les propriétés dynamiques Les getters et setters ont été introduits dans la spécification ES2015 grâce à l'utilisation de proxys. Les proxys créent des objets wrapper qui interceptent l'accès et les modifications aux propriétés, permettant un comportement personnalisé.

Implémentation :

Voici un exemple de proxy qui convertit les valeurs de propriété de chaîne en majuscules et renvoie " manquant" pour les propriétés non définies :

<code class="js">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";
    }
});</code>

Utilisation :

<code class="js">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>

Remarque :

La prise en charge du proxy est prise en compte compatible avec tous les navigateurs et est pris en charge par tous les principaux navigateurs modernes.

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!