Définir une méthode

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… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // avec les noms calculés :
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},

  // avec la syntaxe pour les accesseurs
  // mutateurs :
  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() {
    /* du code */
  },
  truc: function() {
    /* du code */
  }
};

Peut désormais être raccourci en :

var obj = {
  toto() {
    /* du code */
  },
  truc() {
    /* du code */
  }
};

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 mais g*(){} 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 exception SyntaxError. Il faut toujours utiliser yield avec l'astérisque (*).
// Notation utilisant une propriété nommée (avant-ES2015)
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

Méthodes asynchrones avec notation raccourcie

Les méthodes asynchrones peuvent également être définies grâce à une syntaxe raccourcie.

// On utilise une propriété nommée
var obj3 = {
  f: async function () {
    await une_promesse;
  }
};

// Ici, on obtient le même résultat
// avec la notation raccourcie
var obj3 = {
  async f() {
    await une_promesse;
  }
};

Méthodes génératrices asynchrones

Les méthodes génératrices peuvent également être asynchrones (cf. async) :

var obj4 = {
  f: async function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

// Le code équivalent avec la 
// notation raccourcie
var obj4 = {
  async* f() {
    yield 1;
    yield 2;
    yield 3;
  }
};

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 (ECMA-262)
La définition de 'Method definitions' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung InternetNode.js
Method definitionsChrome Support complet 39Edge Support complet 12Firefox Support complet 34IE Aucun support NonOpera Support complet 26Safari Support complet 9WebView Android Support complet 39Chrome Android Support complet 39Firefox Android Support complet 34Opera Android Support complet 26Safari iOS Support complet 9Samsung Internet Android Support complet 4.0nodejs Support complet Oui
Async generator methodsChrome Support complet 63Edge Support complet 79Firefox Support complet 55IE Aucun support NonOpera Support complet 50Safari Support complet 12WebView Android Support complet 63Chrome Android Support complet 63Firefox Android Support complet 55Opera Android Support complet 46Safari iOS Support complet 12Samsung Internet Android Support complet 8.0nodejs Support complet 10.0.0
Support complet 10.0.0
Support complet 8.10.0
Désactivée
Désactivée From version 8.10.0: this feature is behind the --harmony runtime flag.
Async methodsChrome Support complet 55Edge Support complet 15Firefox Support complet 52IE Aucun support NonOpera Support complet 42Safari Support complet 10.1WebView Android Support complet 55Chrome Android Support complet 55Firefox Android Support complet 52Opera Android Support complet 42Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0nodejs Support complet 7.6.0
Support complet 7.6.0
Support complet 7.0.0
Désactivée
Désactivée From version 7.0.0: this feature is behind the --harmony runtime flag.
Generator methods are not constructable (ES2016)Chrome Support complet 42Edge Support complet 13Firefox Support complet 43IE Aucun support NonOpera Support complet 29Safari Support complet 9.1WebView Android Support complet 42Chrome Android Support complet 42Firefox Android Support complet 43Opera Android Support complet 29Safari iOS Support complet 9.3Samsung Internet Android Support complet 4.0nodejs Support complet 6.0.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi