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
:
- peut avoir un identifiant qui est soit un nombre soit une chaîne de caractères
- doit avoir exactement un paramètre (voir l'article « Incompatible ES5 change: literal getter and setter functions must now have exactly zero or one arguments » (en anglais) pour plus d'informations)
- ne doit pas apparaître dans un littéral objet qui possède un autre
set
ou une autre propriété avec la même clé :
({ set x(v) { }, set x(v) { } }
et{ x: ..., set x(v) { } }
seront interdits)
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
Spécification | État | Commentaires |
---|---|---|
ECMAScript 5.1 (ECMA-262) La définition de 'Object Initializer' dans cette spécification. |
Standard | Définition initiale |
ECMAScript 2015 (6th Edition, ECMA-262) La définition de 'Method definitions' dans cette spécification. |
Standard | Ajout des noms de propriétés calculés |
ECMAScript Latest Draft (ECMA-262) La définition de 'Method definitions' dans cette spécification. |
Projet |
Compatibilité des navigateurs
Ordinateur | Mobile | Serveur | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
set | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 2 | IE Support complet 9 | Opera Support complet 9.5 | Safari Support complet 3 | WebView Android Support complet 1 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android Support complet 1.0 | nodejs Support complet Oui |
Computed property names | Chrome Support complet 46 | Edge Support complet 12 | Firefox Support complet 34 | IE Aucun support Non | Opera Support complet 47 | Safari Aucun support Non | WebView Android Support complet 46 | Chrome Android Support complet 46 | Firefox Android Support complet 34 | Opera Android Support complet Oui | Safari iOS Aucun support Non | Samsung Internet Android Support complet 5.0 | nodejs Support complet Oui |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
Voir aussi
get
delete
Object.defineProperty()
__defineGetter__
__defineSetter__
- Définir des accesseurs et des mutateurs, dans le Guide JavaScript