Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour définir des méthodes au sein des littéraux objets. On peut ainsi définir plus rapidement une fonction qui sera utilisée comme méthode.
Syntaxe
var obj = { property( parameters… ) {}, *generator( parameters… ) {}, // avec les noms calculés : [property]( parameters… ) {}, *[generator]( parameters… ) {}, // avec la syntaxe ES5 pour les accesseurs // et mutateurs on a : get property() {}, set property(value) {} };
Description
La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les accesseurs et mutateurs.
Le code suivant :
var obj = { toto: function() {}, truc: function() {} };
Peut désormais être raccourci en :
var obj = { toto() {}, truc() {} };
Note : La syntaxe raccourcie utilise des fonctions nommées et non des fonctions anonymes (ce qu'on a avec toto: function() {}...
). Les fonctions nommées peuvent être appelées dans leur propre corps (ce qui n'est pas possible avec les fonctions anonymes). Pour plus de détails, voir function
.
Notation raccourcie pour les générateurs
Les générateurs sont des méthodes et peuvent donc être définis en utilisant la notation raccourci. Lorsqu'on les utilise :
- L'astérisque de la notation raccourcie doit être située avant le nom de la propriété pour le générateur. Autrement dit,
* g(){}
fonctionnera maisg*(){}
ne fonctionnera pas. - Les définitions des méthodes qui ne sont pas des générateurs ne peuvent pas contenir le mot-clé
yield
. Cela signifie que l'ancienne syntaxe pour les générateurs ne fonctionnera pas et déclenchera une exceptionSyntaxError
. Il faut toujours utiliseryield
avec l'astérisque (*
).
// Notation utilisant une propriété nommée (avant-ES6) var obj2 = { g: function*() { var index = 0; while(true) yield index++; } }; // La même définition, en utilisant la notation raccourcie var obj2 = { * g() { var index = 0; while(true) yield index++; } }; var it = obj2.g(); console.log(it.next().value); // 0 console.log(it.next().value); // 1
Les définitions de méthodes ne sont pas constructibles
Les définitions de méthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception TypeError
.
var obj = { méthode() {}, }; new obj.méthode; // TypeError: obj.méthode is not a constructor var obj = { * g() {} }; new obj.g; // TypeError: obj.g is not a constructuer (changé avec ES2016)
Exemples
Cas de test
var obj = { a : "toto", b(){ return this.a; } }; console.log(obj.b()); // "toto"
Noms de propriétés calculés
Cette notation raccourcie peut également être utilisée avec des noms de propriétés calculés.
var bar = { toto0 : function (){return 0;}, toto1(){return 1;}, ["toto" + 2](){return 2;}, }; console.log(bar.toto0()); // 0 console.log(bar.toto1()); // 1 console.log(bar.toto2()); // 2
Spécifications
Spécification | État | Commentaires |
---|---|---|
ECMAScript 2015 (6th Edition, ECMA-262) La définition de 'Method definitions' dans cette spécification. |
Standard | Définition initiale. |
ECMAScript 2016 (ECMA-262) La définition de 'Method definitions' dans cette spécification. |
Standard | Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec new . |
ECMAScript 2017 Draft (ECMA-262) La définition de 'Method definitions' dans cette spécification. |
Projet |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Raccourci pour la définition d'une méthode | 39 | 34 (34) | Pas de support | 26 | Pas de support |
Les méthodes génératrices ne sont pas constructibles (ES2016) | ? | 43 (43) | ? | ? | ? |
Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Raccourci pour la définition d'une méthode |
Pas de support | Pas de support | 34.0 (34) | Pas de support | Pas de support | Pas de support |
Les méthodes génératrices ne sont pas constructibles (ES2016) | ? | ? | 43.0 (43) | ? | ? | ? |
Notes spécifiques à SpiderMonkey
- Avant SpiderMonkey 38 (Firefox 38 / Thunderbird 38 / SeaMonkey 2.35), "
get
" et "set
" étaient des noms invalides pour les méthodes génératrices. Cela a été résolu avec bug 1073809. - Avant SpiderMonkey 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38), les accolades « { } » n'étaient pas nécessaires sur pour les définitions de méthodes. Pour être conforme à la spécification ES6, elles sont désormais nécessaires. Ne pas les utiliser causera une exception
SyntaxError
dans cette version et les versions ultérieures (bug 1150855).var o = {x() 12}; // SyntaxError
- La restriction qui implique que seuls les méthodes qui sont générateurs sont des constructeurs à été implémentée dans SpiderMonkey 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38). Voir aussi bug 1059908 et bug 1166950.