Methodendefinitionen — Keyword · JavaScript-Referenz

Signatur

{ name(params) { … }, *gen(params) { … }, async name(params) { … }, async *gen(params) { … }, get prop() { … }, set prop(value) { … }, [ausdruck](params) { … } }

Beschreibung

Eine Methodendefinition ist eine Kurzschreibweise, mit der man in Objekt-Initialisierern (Objekt-Literalen) und in Klassenkörpern Funktionen als Eigenschaften anlegt. Statt { gruss: function() { … } } schreibt man einfach { gruss() { … } }. Dieselbe Syntax gilt für Generatoren (*name()), asynchrone Funktionen (async name()), asynchrone Generatoren (async *name()) sowie für Getter und Setter (get/set).

Kurzschreibweise und klassischer Funktionsausdruck verhalten sich nicht ganz gleich. Methoden haben ein internes [[HomeObject]], deshalb funktioniert in ihnen super (z. B. super.methode()). Außerdem sind sie keine Konstruktoren: Ein Aufruf mit new wirft einen TypeError, und sie haben keine prototype-Eigenschaft. this wird wie bei normalen Funktionen dynamisch gebunden, anders als bei Pfeilfunktionen.

Als Methodenname sind Bezeichner, Zeichenketten, Zahlen und berechnete Namen ([ausdruck]()) erlaubt. Berechnete Namen braucht man vor allem für Symbole wie [Symbol.iterator] oder für dynamisch erzeugte Namen. Methodendefinitionen verwendet man immer dann, wenn ein Objekt Verhalten bekommen soll, also für API-Objekte, Mixins, Iteratoren oder Klassen.

Parameter

Name	Typ	Beschreibung
$name Pflicht	Bezeichner \| string \| number	Der Name der Methode. Er wird zum Eigenschaftsschlüssel des Objekts.
$[ausdruck]	any (wird zu string \| symbol)	Berechneter Methodenname. Der Ausdruck wird ausgewertet und in einen Eigenschaftsschlüssel umgewandelt, z. B. `[Symbol.iterator]`.
$params	Parameterliste	Die formalen Parameter der Funktion. Standardwerte, Rest-Parameter und Destrukturierung sind erlaubt. Ein Setter hat genau einen Parameter, ein Getter keinen.
$Präfix	async \| * \| async * \| get \| set	Optionales Präfix, das die Art der Methode festlegt: asynchrone Funktion, Generator, asynchroner Generator, Getter oder Setter.

Rückgabewert

Typ

Function

Beschreibung

Die Methodendefinition legt auf dem Objekt eine Eigenschaft an, deren Wert eine Funktion ist. Bei Objekt-Literalen ist sie aufzählbar, bei Klassen nicht. Was ein Aufruf zurückgibt, hängt von der Art ab: normaler Wert, Promise (bei async) oder Generator-Objekt (bei *).

Beispiele

Kurzschreibweise im Vergleich zur klassischen Syntax

// Klassisch (ES5)
const zaehlerAlt = {
  wert: 0,
  erhoehen: function () {
    this.wert++;
    return this;
  }
};

// Methodendefinition (ES2015)
const zaehler = {
  wert: 0,
  erhoehen() {
    this.wert++;
    return this;
  },
  zuruecksetzen() {
    this.wert = 0;
  }
};

zaehler.erhoehen().erhoehen();
console.log(zaehler.wert);

2

Async-Methode in einem API-Client

const apiClient = {
  basisUrl: 'https://jsonplaceholder.typicode.com',
  async holeBenutzer(id) {
    const antwort = await fetch(`${this.basisUrl}/users/${id}`);
    if (!antwort.ok) throw new Error(`HTTP ${antwort.status}`);
    return antwort.json();
  }
};

const benutzer = await apiClient.holeBenutzer(1);
console.log(benutzer.name);

Leanne Graham

Generator-Methode mit berechnetem Namen (Symbol.iterator)

const bereich = {
  von: 1,
  bis: 4,
  *[Symbol.iterator]() {
    for (let i = this.von; i <= this.bis; i++) {
      yield i;
    }
  }
};

console.log([...bereich]);

[1, 2, 3, 4]

super in Methoden sowie Getter und Setter

const basis = {
  beschreiben() {
    return 'Basisobjekt';
  }
};

const produkt = {
  _preis: 10,
  get preis() {
    return `${this._preis.toFixed(2)} €`;
  },
  set preis(wert) {
    if (wert < 0) throw new RangeError('Preis darf nicht negativ sein');
    this._preis = wert;
  },
  beschreiben() {
    // super funktioniert nur in Methodendefinitionen
    return `${super.beschreiben()} → Produkt für ${this.preis}`;
  }
};

Object.setPrototypeOf(produkt, basis);
produkt.preis = 19.9;
console.log(produkt.beschreiben());

Basisobjekt → Produkt für 19.90 €

// Wichtig · Fallstricke

Keine Konstruktoren: new obj.methode() wirft TypeError: obj.methode is not a constructor. Soll die Funktion als Konstruktor dienen, verwende function oder class.
Verlust von this: Übergibt man eine Methode als Callback (z. B. setTimeout(obj.methode, 100)), geht this verloren. Abhilfe schaffen obj.methode.bind(obj) oder eine Pfeilfunktion als Hülle.
Pfeilfunktionen als Eigenschaft (name: () => {}) sind keine Methodendefinitionen. Sie haben kein eigenes this und kein super.
super ist statisch gebunden: Er bezieht sich auf den Prototyp des Objekts, in dem die Methode definiert wurde. Kopiert man die Methode auf ein anderes Objekt, bleibt diese Bindung bestehen.
Methoden in Objekt-Literalen sind aufzählbar (sie erscheinen in for…in und Object.keys). Klassenmethoden sind nicht aufzählbar.
Kompatibilität: Alle modernen Browser und Node.js 4+ unterstützen die Syntax. async-Methoden gibt es ab ES2017, asynchrone Generatoren ab ES2018. Der Internet Explorer unterstützt sie nicht.

Siehe auch

get set super class async function