Explorer le proxy en JavaScript : fonctionnalités avancées avec des exemples pratiques

JavaScript offre de nombreuses fonctionnalités intéressantes, et l'une des plus puissantes et des moins courantes est l'objet Proxy. Cet outil vous permet de créer un objet capable d'intercepter des opérations sur d'autres objets, telles que l'accès ou la modification de propriétés. Dans cet article, nous explorerons le fonctionnement du proxy, ses utilisations et en quoi il diffère d'autres fonctionnalités similaires telles que les getters et les setters.

---

Qu'est-ce qu'une procuration ?

Un Proxy fait office d'intermédiaire pour un autre objet (appelé la "cible"). Vous pouvez définir le comportement du proxy pour différentes opérations via un « gestionnaire ». Cela vous permet de personnaliser la façon dont vous interagissez avec l'objet sous-jacent.

---

Syntaxe de base

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

---

Utilisation 1 : intercepter l'accès à la propriété

Supposons que nous ayons un objet représentant un utilisateur et que nous souhaitions fournir un comportement personnalisé lors de l'accès à ses propriétés :

const user = {
    name: 'Gabriel',
    age: 30
};

const handler = {
    get: function(target, prop) {
        if (prop in target) {
            return target[prop];
        } else {
            return 'Property not found';
        }
    }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

Vous pourriez envisager d'utiliser un getter pour obtenir un comportement similaire :

const userWithGetters = {
    name: 'Gabriel',
    age: 30,
    getProperty(prop) {
        return this[prop] || 'Property not found';
    }
};

console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found

La différence est qu'avec Proxy, vous pouvez intercepter toute opération sur l'objet, pas seulement l'accès à la propriété, ce qui offre une plus grande flexibilité.

---

Utilisation 2 : validation de propriété

Imaginez que nous voulions nous assurer que lors de la définition de l'âge d'un utilisateur, seules les valeurs valides sont autorisées. C'est là que Proxy brille :

const person = {
    name: 'Ana'
};

const handler = {
    set: function(target, prop, value) {
        if (prop === 'age' && (value < 0 || value > 120)) {
            throw new Error('Age must be between 0 and 120');
        }
        target[prop] = value;
        return true;
    }
};

const personProxy = new Proxy(person, handler);

personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María

try {
    personProxy.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

Vous pouvez utiliser un setter pour valider la valeur :

const personWithSetters = {
    _age: 0,
    name: 'Ana',
    set age(value) {
        if (value < 0 || value > 120) {
            throw new Error('Age must be between 0 and 120');
        }
        this._age = value;
    },
    get age() {
        return this._age;
    }
};

try {
    personWithSetters.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

La différence avec Proxy est que vous pouvez appliquer la validation de manière plus générale à n'importe quelle propriété, sans avoir besoin de définir des getters et des setters pour chacune.

---

Utilisation 3 : surveillance des modifications

Imaginez que vous souhaitiez suivre les modifications apportées à un objet. Avec Proxy, cela se réalise facilement :

const data = {};

const handler = {
    set: function(target, prop, value) {
        console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
        target[prop] = value;
        return true;
    }
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

Dans un système observable, vous devrez définir un modèle spécifique pour notifier les changements. Avec Proxy, vous interceptez simplement l'opération :

// Simulating a basic observable
class Observable {
    constructor(data) {
        this.data = data;
        this.listeners = [];
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    notify() {
        this.listeners.forEach(listener => listener(this.data));
    }
}

La différence est que l'utilisation de Proxy permet une approche plus directe et moins verbeuse pour intercepter et répondre aux changements. Avec un observable, vous devrez gérer manuellement les notifications.

---

Conclusion

L'objet Proxy en JavaScript est un outil extrêmement puissant qui permet d'intercepter et de redéfinir des opérations sur des objets. Contrairement aux getters et setters, qui sont plus restrictifs et nécessitent plus de code, Proxy offre une flexibilité et une approche plus propre pour valider, surveiller et manipuler les objets.

Si vous souhaitez améliorer votre capacité à travailler avec des objets en JavaScript, explorer Proxy en vaut vraiment la peine !

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!