Methodendefinitionen

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit September 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Methodendefinition ist eine krzere Syntax zur Definition einer Funktions-Eigenschaft in einem Objekt-Initialisierer. Sie kann auch in Klassen verwendet werden.

Probieren Sie es aus

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

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

Syntax

({
  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 Kurzsyntax ist hnlich der getter und setter Syntax.

Gegeben ist der folgende Code:

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

Sie knnen diesen nun verkrzen zu:

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

Eigenschaften, die mit dieser Syntax definiert werden, sind eigene Eigenschaften des erstellten Objekts, und sie sind konfigurierbar, aufzhlbar und beschreibbar, genau wie normale Eigenschaften.

function*, async function, und async function* Eigenschaften haben alle ihre jeweiligen Methodensyntaxen. Siehe Beispiele unten.

Beachten Sie jedoch, dass die Methodensyntax nicht gleichbedeutend mit einer normalen Eigenschaft mit einer Funktion als Wert ist es gibt semantische Unterschiede. Dies macht Methoden, die in Objektliteralen definiert sind, konsistenter mit Methoden in Klassen.

Methodendefinitionen sind nicht konstruierbar

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

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

Verwendung von super in Methodendefinitionen

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

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

Beispiele

Verwendung von Methodendefinitionen

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

Methodendefinitionen in Klassen

Sie knnen exakt dieselbe Syntax verwenden, um ffentliche Instanzmethoden zu definieren, die auf Klasseninstanzen verfgbar sind. In Klassen bentigen Sie das Komma als Trennzeichen zwischen Methoden nicht.

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 somit allen Instanzen der Klasse gemeinsam. Sie sind beschreibbar, nicht aufzhlbar und konfigurierbar.

Innerhalb von Instanzmethoden funktionieren this und super wie in normalen Methoden. Normalerweise bezieht sich this auf die Instanz selbst. In Unterklassen ermglicht super den Zugriff auf den Prototyp des Objekts, an das die Methode angehngt ist, was ermglicht, Methoden aus der Superklasse aufzurufen.

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 Elemente beschrieben werden.

Berechnete Eigenschaftsnamen

Die Methodensyntax untersttzt auch berechnete Eigenschaftsnamen.

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

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

Generator-Methoden

Beachten Sie, dass das Sternchen (*) in der Generator-Methodensyntax vor dem Namen der Generatoreigenschaft stehen muss. (Das heit, * g(){} funktioniert, aber g *(){} nicht.)

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

Asynchrone Methoden

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

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

Asynchrone Generator-Methoden

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

Spezifikation
ECMAScript 2027 LanguageSpecification # sec-method-definitions

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden