L'opérateur set

La syntaxe set permet de lier une propriété d'un objet à une fonction qui sera appelée à chaque tentative de modification de cette propriété.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Syntaxe

{set prop(val) { . . .}}
{set [expression](val) { . . .}}

Paramètres

prop

Le nom de la propriété à lier à la fonction.

val

Un alias pour la variable qui contient la valeur qu'on souhaiterait affecter à prop.

expression

Avec ECMAScript 2015, il est également possible d'utiliser des expressions pour utiliser un nom de propriété calculé à lier à la fonction.

Description

En JavaScript, un mutateur (ou setter en anglais) peut être utiisé afin d'exécuter une fonction à chaque fois qu'on souhaite modifier la valeur d'une propriété donnée. La plupart du temps, les mutateurs sont utilisés avec les accesseurs (getters) afin de créer une pseudo-propriété. Il n'est pas possible d'avoir à la fois un mutateur et une valeur donnée pour une même propriété.

On notera que set :

On peut retirer un mutateur d'un objet grâce à l'opérateur delete.

Exemples

Définir un mutateur sur de nouveaux objets avec un littéral objet

Dans l'exemple qui suit, on définit une pseudo-propriété courant pour un objet o qui, lorsqu'elle recevra une valeur, mettra à jour la propriété log avec la valeur reçue :

var o = {
  set courant (str) {
    this.log[this.log.length] = str;
  },
  log: []
}

On notera que courant n'est pas défini. Toute tentative pour y accéder renverra undefined.

Supprimer un mutateur grâce à l'opérateur delete

Si on souhaite retirer un mutateur, on peut simplement utiliser l'opérateur delete :

delete o.courant;

Définir un mutateur sur un objet existant avec defineProperty

On peut également ajouter un mutateur sur un objet d'ores et déjà créé. Pour cela, on utilisera la méthode Object.defineProperty().

var o = { a:0 };

Object.defineProperty(o, "b", { set: function (x) { this.a = x / 2; } });

o.b = 10; // On utilise le setter, qui affecte 10 / 2 (5) à 'a'
console.log(o.a) // 5

Utiliser un nom de propriété calculé

var expr = "toto";

var obj = {
  bidule: "truc",
  set [expr](v) { this.bidule = v; }
};

console.log(obj.bidule); // "truc"
obj.toto = "bidule";      // le mutateur est utilisé
console.log(obj.bidule); // "bidule"

Spécifications

Compatibilité des navigateurs

Voir aussi

• get
• delete
• Object.defineProperty()
• __defineGetter__
• __defineSetter__
• Définir des accesseurs et des mutateurs, dans le Guide JavaScript