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
Freigeben: 2024-09-01 21:11:37
Original
607 Leute haben es durchsucht

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"
Nach dem Login kopieren

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!"
Nach dem Login kopieren

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"
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage