Heim >Web-Frontend >js-Tutorial >Aufruf, Anwendung und Bindung in JavaScript anhand einfacher Beispiele verstehen

Aufruf, Anwendung und Bindung in JavaScript anhand einfacher Beispiele verstehen

WBOY
WBOYOriginal
2024-09-01 21:11:37614Durchsuche

Understanding call, apply, and bind in JavaScript with Simple Examples

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. Methode aufrufen

Mit der Aufrufmethode können Sie eine Funktion mit einem bestimmten Wert aufrufen und 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 call den Wert this 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 anotherPerson und ermöglicht die Übergabe mehrerer Argumente als Array.

3. Bind-Methode

Die Bindungsmethode 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 Funktion „greetDiana“, die an anotherPerson gebunden ist. Wenn Sie „greetDiana“ anrufen, wird „Hallo, mein Name ist Diana“ angezeigt.

Zusammenfassung

  • Aufruf: Ruft die Funktion sofort mit einem bestimmten Wert und nacheinander übergebenen Argumenten auf.
  • Anwenden: 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.


Das obige ist der detaillierte Inhalt vonAufruf, Anwendung und Bindung in JavaScript anhand einfacher Beispiele verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn