Implémentation des getters et setters dynamiques en JavaScript : un guide

En JavaScript traditionnel, les getters et setters sont définis pour des noms de propriétés spécifiques. Cependant, il est possible de créer des getters et setters dynamiques plus flexibles à l'aide de proxys introduits dans ES2015.

Gutters et setters dynamiques avec proxys

Les getters et setters dynamiques permettent l'accès et la modification des propriétés sans définitions explicites. Voici comment les implémenter à l'aide de proxys :

"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);
            // Modify the value here before returning
            return rv;
        }
        // Define default behavior for unknown properties
        return "missing";
      }
});

Exemple d'utilisation

Avec le proxy ci-dessus en place, l'accès et la modification des propriétés peuvent être effectués de manière dynamique :

console.log(`proxy.example = ${proxy.example}`); // "proxy.example = VALUE"
console.log(`proxy.unknown = ${proxy.unknown}`); // "proxy.unknown = missing"

Compatibilité entre navigateurs

Les proxys sont pris en charge dans les navigateurs modernes tels que Chrome, Firefox et Safari. Cependant, pour les navigateurs plus anciens qui ne prennent pas en charge les proxys, une solution de contournement peut être implémentée en utilisant la syntaxe dynamique getter/setter sans proxy.