Définir une méthode

La définition de méthode est une syntaxe plus courte permettant de définir une propriété de fonction dans un initialiseur d'objet. Il peut également être utilisé en classe.

Exemple interactif

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

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

Syntaxe

({
  property(parameters) {},
  *generator(parameters) {},
  async property(parameters) {},
  async *generator(parameters) {},

  // with computed keys
  [expression](parameters) {},
  *[expression](parameters) {},
  async [expression](parameters) {},
  async *[expression](parameters) {},
})

Description

La notation raccourcie est semblable à la syntaxe introduite par ECMAScript 5 pour les getter et setter.

Le code suivant :

const obj = {
  foo: function () {
    // …
  },
  bar: function () {
    // …
  },
};

Peut désormais être raccourci en :

const obj = {
  foo() {
    // …
  },
  bar() {
    // …
  },
};

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 (*).

const obj = {
  method() {},
};
new obj.method(); // TypeError: obj.method is not a constructor

Utiliser super dans les définitions de méthodes

Seules les fonctions définies comme méthodes ont accès au super mot-clé. super.prop recherche la propriété sur le prototype de l'objet sur lequel la méthode a été initialisée.

const obj = {
  __proto__: {
    prop: "foo",
  },
  method: function () {
    console.log(super.prop); // SyntaxError: 'super' keyword unexpected here
  },
};

Exemples

Utilisation des définitions de méthodes

const obj = {
  a: "foo",
  b() {
    return this.a;
  },
};
console.log(obj.b()); // "foo"

Définitions de méthodes dans les classes

Vous pouvez utiliser exactement la même syntaxe pour définir les méthodes d'instance publique disponibles sur les instances de classe. Dans les classes, vous n'avez pas besoin du séparateur virgule entre les méthodes.

class ClassWithPublicInstanceMethod {
  publicMethod() {
    return "hello world";
  }
}

const instance = new ClassWithPublicInstanceMethod();
console.log(instance.publicMethod()); // "hello world"

Les méthodes d'instance publique sont définies sur la propriété prototype de la classe et sont donc partagées par toutes les instances de la classe. Ils sont accessibles en écriture, non dénombrables et configurables.

ans les méthodes d'instance, this et super fonctionnent comme dans les méthodes normales. Habituellement, cela fait référence à l'instance elle-même. Dans les sous-classes, super vous permet d'accéder au prototype de l'objet auquel la méthode est attachée, vous permettant ainsi d'appeler des méthodes depuis la superclasse.

class BaseClass {
  msg = "hello world";
  basePublicMethod() {
    return this.msg;
  }
}

class SubClass extends BaseClass {
  subPublicMethod() {
    return superbasePublicMethod();
  }
}

const instance = new SubClass();
console.log(instance.subPublicMethod()); // "hello world"

Les méthodes statiques et les méthodes privées utilisent des syntaxes similaires, décrites dans les pages de fonctionnalités des classes statiques et privées.

Compatibilité des navigateurs

La syntaxe de la méthode prend également en charge les noms de propriétés calculés.

const bar = {
  foo0: function () {
    return 0;
  },
  foo1() {
    return 1;
  },
  ["foo" + 2]() {
    return 2;
  },
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

Méthodes de génération

Notez que l'astérisque (*) dans la syntaxe de la méthode du générateur doit être placé avant le nom de la propriété du générateur. (Autrement dit, * g(){} fonctionnera, mais g *(){} ne fonctionnera pas.)

// Using a named property
const obj = {
  g: function* () {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

// The same object using shorthand syntax
const obj2 = {
  *g() {
    let index = 0;
    while (true) {
      yield index++;
    }
  },
};

const it = obj2.g);
console.log(it.next().value); // 0
console.log(it.next().value); // 1

Méthodes asynchrones

// Using a named property
const obj = {
  f async function () {
    await somePromise;
  },
};

// The same object using shorthand syntax
const obj2 = {
  async f() {
    await somePromise;
  },
};

Méthodes de générateur asynchrone

const obj = {
  f: async function* () {
    yield 1;
    yield 2;
    yield 3;
  },
};

// The same object using shorthand syntax
const obj2 = {
  async *f() {
    yield 1;
    yield 2;
    yield 3;
  },
};

Spécifications

ECMAScript Language Specification
# sec-method-definitions

Compatibilité des navigateurs

Signaler des problèmes avec ces données de compatibilité sur GitHub

Voir aussi

• get
• set
• Grammaire lexicale de JavaScript