[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/Method_definitions [Back]  [Original]

Dfinir une mthode - JavaScript | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Dfinir une mthode

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2015.

Avec ECMAScript 2015 (ES6), il est possible d'utiliser une notation plus courte pour dfinir des mthodes au sein des littraux objets. On peut ainsi dfinir plus rapidement une fonction qui sera utilise comme mthode.

Dans cet article

Exemple interactif

const obj = {
  foo() {
    return "bar";
  },
};

console.log(obj.foo());
// Expected output: "bar"

Syntaxe

js
var obj = {
  property( parameters ) {},
  *generator( parameters ) {},
  async property( parameters ) {},
  async* generator( parameters ) {},

  // avec les noms calculs :
  [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 :

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

Peut dsormais tre raccourci en :

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

Notation raccourcie pour les gnrateurs

Les gnrateurs sont des mthodes et peuvent donc tre dfinis en utilisant la notation raccourci. Lorsqu'on les utilise :

  • L'astrisque de la notation raccourcie doit tre situe avant le nom de la proprit pour le gnrateur. Autrement dit, * g(){} fonctionnera mais g*(){} ne fonctionnera pas.
  • Les dfinitions des mthodes qui ne sont pas des gnrateurs ne peuvent pas contenir le mot-cl yield. Cela signifie que l'ancienne syntaxe pour les gnrateurs ne fonctionnera pas et dclenchera une exception SyntaxError. Il faut toujours utiliser yield avec l'astrisque (*).
js
// Notation utilisant une proprit nomme (avant-ES2015)
var obj2 = {
  g: function* () {
    var index = 0;
    while (true) yield index++;
  },
};

// La mme dfinition, 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

Mthodes asynchrones avec notation raccourcie

Les mthodes asynchrones peuvent galement tre dfinies grce une syntaxe raccourcie.

js
// On utilise une proprit nomme
var obj3 = {
  f: async function () {
    await une_promesse;
  },
};

// Ici, on obtient le mme rsultat
// avec la notation raccourcie
var obj3 = {
  async f() {
    await une_promesse;
  },
};

Mthodes gnratrices asynchrones

Les mthodes gnratrices peuvent galement tre asynchrones (cf. async) :

js
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 dfinitions de mthodes ne sont pas constructibles

Les dfinitions de mthodes ne sont pas des constructeurs et si on tente de les instancier, cela provoquera une exception TypeError.

js
var obj = {
  mthode() {},
};
new obj.mthode(); // TypeError: obj.mthode is not a constructor

var obj = {
  *g() {},
};
new obj.g(); // TypeError: obj.g is not a constructuer (chang avec ES2016)

Exemples

Cas de test

js
var obj = {
  a: "toto",
  b() {
    return this.a;
  },
};
console.log(obj.b()); // "toto"

Noms de proprits calculs

Cette notation raccourcie peut galement tre utilise avec des noms de proprits calculs.

js
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

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification
# sec-method-definitions

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page