Methoden-Definitionen

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Methoden-Definition ist eine kürzere Syntax zum Definieren einer Funktions-Eigenschaft in einem Objektinitialisierer. Sie kann auch in Klassen verwendet werden.

Probieren Sie es aus

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

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

Syntax

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

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

Beschreibung

Die verkürzte Syntax ist ähnlich der getter- und setter-Syntax.

Angenommen, der folgende Code ist gegeben:

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

Sie können dies nun wie folgt verkürzen:

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

Eigenschaften, die mit dieser Syntax definiert wurden, sind eigene Eigenschaften des erstellten Objekts und sind konfigurierbar, aufzählbar und beschreibbar, genau wie normale Eigenschaften.

function*, async function und async function* Eigenschaften haben alle ihre jeweiligen Methodensyntaxen; siehe die unten stehenden Beispiele.

Beachten Sie jedoch, dass die Methodensyntax nicht einer normalen Eigenschaft mit einer Funktion als Wert entspricht – es gibt semantische Unterschiede. Dadurch werden Methoden, die in Objektliteralen definiert sind, konsistenter mit Methoden in Klassen.

Methoden-Definitionen sind nicht instanziierbar

Methoden können keine Konstruktoren sein! Sie werfen eine TypeError, wenn Sie versuchen, sie zu instanziieren. Andererseits kann eine als Funktion erstellte Eigenschaft als Konstruktor verwendet werden.

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

Verwendung von super in Methoden-Definitionen

Nur Funktionen, die als Methoden definiert sind, haben Zugriff auf das super-Schlüsselwort. super.prop sucht die Eigenschaft im Prototyp des Objekts, auf dem die Methode initialisiert wurde.

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

Beispiele

Verwendung von Methoden-Definitionen

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

Methoden-Definitionen in Klassen

Sie können genau dieselbe Syntax verwenden, um öffentliche Instanzmethoden zu definieren, die auf Klasseninstanzen verfügbar sind. In Klassen ist das Kommatrennzeichen zwischen Methoden nicht erforderlich.

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

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

Öffentliche Instanzmethoden werden auf der prototype-Eigenschaft der Klasse definiert und sind daher für alle Instanzen der Klasse gemeinsam. Sie sind beschreibbar, nicht aufzählbar und konfigurierbar.

Innerhalb von Instanzmethoden funktionieren this und super wie in normalen Methoden. this bezieht sich in der Regel auf die Instanz selbst. In Unterklassen ermöglicht super Zugriff auf den Prototyp des Objekts, an welches die Methode angehängt ist, sodass Sie Methoden der Oberklasse aufrufen können.

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

class SubClass extends BaseClass {
  subPublicMethod() {
    return super.basePublicMethod();
  }
}

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

Statische Methoden und private Methoden verwenden ähnliche Syntaxen, die auf den Seiten static und private properties beschrieben werden.

Berechnete Eigenschaftsnamen

Die Methodensyntax unterstützt auch berechnete Eigenschaftsnamen.

js
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

Generator-Methoden

Beachten Sie, dass das Sternchen (*) in der Syntax für Generator-Methoden vor dem Namen der Generator-Eigenschaft stehen muss. (Das heißt, * g(){} funktioniert, aber g *(){} funktioniert nicht.)

js
// 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

Async-Methoden

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

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

Async-Generator-Methoden

js
// Using a named property
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;
  },
};

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-method-definitions

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Method definitions
Async generator methods
Async methods
Generator methods are not constructable (ES2016)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch