Maison > interface Web > js tutoriel > le corps du texte

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

Linda Hamilton
Libérer: 2024-11-02 02:58:30
original
478 Les gens l'ont consulté

Can JavaScript Proxies Enable Dynamic Getters & Setters for Any Property?

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>
Copier après la connexion

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>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal