Aufruf, Anwendung und Bindung in JavaScript anhand einfacher Beispiele verstehen

Bei der Arbeit mit JavaScript stoßen Sie möglicherweise auf drei leistungsstarke Methoden: Aufrufen, Anwenden und Binden. Diese Methoden werden verwendet, um den Wert davon in Funktionen zu steuern und so die Arbeit mit Objekten zu erleichtern. Lassen Sie uns jede Methode anhand einfacher Beispiele aufschlüsseln, um zu verstehen, wie sie funktioniert.

1. Aufrufmethode

Mit der Aufrufmethode können Sie eine Funktion mit einem bestimmten Wert aufrufen und die Argumente einzeln übergeben.

const person = {
  name: 'Alice',
  greet: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Bob' };

person.greet.call(anotherPerson, 'Hello');
// Output: "Hello, my name is Bob"

In diesem Beispiel ändert der Aufruf diesen Wert von „Person“ in „AnotherPerson“, sodass die Begrüßungsfunktion „Hallo, mein Name ist Bob“ ausgibt.

2. Methode anwenden

Die Methode „apply“ ähnelt der Methode „call“, akzeptiert die Argumente jedoch als Array und nicht einzeln.

const person = {
  name: 'Alice',
  greet: function(greeting, punctuation) {
    console.log(`${greeting}, my name is ${this.name}${punctuation}`);
  }
};

const anotherPerson = { name: 'Charlie' };

person.greet.apply(anotherPerson, ['Hi', '!']);
// Output: "Hi, my name is Charlie!"

Anwenden ändert hier auch den Wert „this“ in „otherPerson“ und ermöglicht die Übergabe mehrerer Argumente als Array.

3. Bind-Methode

Die Bindemethode ruft die Funktion nicht sofort auf. Stattdessen wird eine neue Funktion mit einem gebundenen Wert zurückgegeben, den Sie später aufrufen können.

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hi, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Diana' };

const greetDiana = person.greet.bind(anotherPerson);

greetDiana();
// Output: "Hi, my name is Diana"

In diesem Beispiel erstellt bind eine neue FunktiongreetDiana, die an anotherPerson gebunden ist. Wenn Sie „greetDiana“ anrufen, wird „Hallo, mein Name ist Diana“ angezeigt.

Zusammenfassung

• call: Ruft die Funktion sofort mit einem bestimmten this-Wert und nacheinander übergebenen Argumenten auf.
• apply: Ruft die Funktion sofort mit einem bestimmten Wert und Argumenten auf, die als Array übergeben werden.
• bind: Gibt eine neue Funktion mit einem bestimmten this-Wert zurück, den Sie später aufrufen können.

Diese Methoden sind praktisch, wenn Sie Methoden von einem Objekt ausleihen müssen, um sie mit einem anderen zu verwenden, oder wenn Sie mehr Kontrolle über diesen Wert in Ihren Funktionen wünschen.