Call(), apply() und bind() in JavaScript beherrschen: Dies steuern

Grundlegendes zu den Methoden call(), apply() und bind() in JavaScript

In JavaScript werden die Methoden call(), apply() und bind() verwendet, um den Kontext (dies) einer Funktion zu steuern, der das Objekt bestimmt, mit dem die Funktion arbeitet. Mit diesen Methoden können Sie eine Funktion mit einem bestimmten this-Wert aufrufen und sind für die Verwaltung der Interaktion von Funktionen mit Objekten unerlässlich.

1. call()-Methode

Mit der Methode call() können Sie eine Funktion mit einem bestimmten Wert und einzelnen Argumenten aufrufen. Dies ist eine der Möglichkeiten, den Kontext (dies) explizit festzulegen, wenn eine Funktion aufgerufen wird.

Syntax:

functionName.call(thisArg, arg1, arg2, ...);

• thisArg: Der Wert, der als this innerhalb der Funktion verwendet werden soll.
• arg1, arg2, ...: Die Argumente, die an die Funktion übergeben werden.

Beispiel für call():

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

In diesem Beispiel verwenden wir call(), um die Begrüßungsfunktion aufzurufen, wobei sich dies auf das Personenobjekt bezieht, sodass die Ausgabe „Hallo, Alice!“ lautet.

Anwendungsfall von call():

• Eine Methode mit einem anderen Kontext aufrufen: Sie können call() verwenden, um Methoden von einem Objekt auszuleihen und auf ein anderes anzuwenden.

2. apply()-Methode

Die Methode apply() ist call() sehr ähnlich, aber anstatt Argumente einzeln zu übergeben, übergeben Sie sie als Array oder arrayähnliches Objekt. Dieser Wert ist weiterhin auf das angegebene Objekt festgelegt.

Syntax:

functionName.apply(thisArg, [arg1, arg2, ...]);

• thisArg: Der Wert, der als this innerhalb der Funktion verwendet werden soll.
• [arg1, arg2, ...]: Ein Array oder arrayähnliches Objekt, das die an die Funktion zu übergebenden Argumente enthält.

Beispiel für apply():

function sum(a, b) {
  console.log(this.name, a + b);
}

const person = { name: 'Bob' };

sum.apply(person, [5, 10]);  // Output: Bob 15

In diesem Beispiel wird apply() verwendet, um ein Array von Argumenten [5, 10] an die Summenfunktion zu übergeben, und dieser Wert wird auf das Personenobjekt gesetzt, sodass die Ausgabe „Bob 15“ ist.

Anwendungsfall von apply():

• Übergabe eines Arrays von Argumenten: Wenn Sie Argumente in Form eines Arrays haben und diese an eine Funktion übergeben möchten, verwenden Sie apply().

3. bind()-Methode

Die bind()-Methode erstellt eine neue Funktion, deren Wert beim Aufruf auf den angegebenen Wert gesetzt wird und die es Ihnen ermöglicht, Argumente für zukünftige Aufrufe voreinzustellen. Im Gegensatz zu call() und apply() ruft bind() die Funktion nicht sofort auf. Stattdessen wird eine neue Funktion zurückgegeben, die Sie später aufrufen können.

Syntax:

functionName.call(thisArg, arg1, arg2, ...);

• thisArg: Der Wert, an den dies gebunden werden soll.
• arg1, arg2, ...: Die voreinzustellenden Argumente.

Beispiel für bind():

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

Hier erstellt bind() eine neue Funktion „greetCharlie“, wobei diese dauerhaft auf das Personenobjekt festgelegt ist. Wenn GreetCharlie() aufgerufen wird, wird „Hallo, Charlie!“ ausgegeben.

Anwendungsfall von bind():

• Erstellen einer neuen Funktion mit einem festen this-Wert: bind() ist nützlich, wenn Sie eine neue Funktion erstellen müssen, die einen bestimmten this-Wert beibehält.

Unterschiede zwischen call(), apply() und bind()

Funktion

Feature	call()	apply()	bind()
Execution	Immediately invokes the function	Immediately invokes the function	Returns a new function (does not execute immediately)
Arguments	Pass arguments individually	Pass arguments as an array or array-like object	Pass arguments individually or preset them
Return Value	Returns the result of the function call	Returns the result of the function call	Returns a new function
Use Case	Call a function with a specified this value and arguments	Call a function with a specified this value and an array of arguments	Create a new function with a preset this value and arguments

call() apply() bind() Ausführung Ruft die Funktion sofort auf Ruft die Funktion sofort auf Gibt eine neue Funktion zurück (wird nicht sofort ausgeführt) Argumente Argumente einzeln übergeben Argumente als Array oder arrayähnliches Objekt übergeben Argumente einzeln übergeben oder voreinstellen Rückgabewert Gibt das Ergebnis des Funktionsaufrufs zurück Gibt das Ergebnis des Funktionsaufrufs zurück Gibt eine neue Funktion zurück Anwendungsfall Rufen Sie eine Funktion mit einem angegebenen Wert und Argumenten auf Rufen Sie eine Funktion mit einem angegebenen Wert und einem Array von Argumenten auf Erstellen Sie eine neue Funktion mit einem voreingestellten Wert und diesen Argumenten

Beispiel: Call(), apply() und bind() kombinieren

functionName.call(thisArg, arg1, arg2, ...);

Abschluss

• call() und apply() werden verwendet, um Funktionen sofort mit einem angegebenen Wert und diesen Argumenten aufzurufen.
• bind() wird verwendet, um eine neue Funktion mit einem angegebenen Wert und optional voreingestellten Argumenten zu erstellen, ohne sie sofort aufzurufen.
• call() ist für einzelne Argumente nützlich, während apply() ideal für die Übergabe einer Reihe von Argumenten ist.
• bind() ist nützlich zum Erstellen einer Funktion, die später mit einem festen Kontext (this) aufgerufen werden kann.

Diese Methoden sind für die Steuerung dieses Kontexts und die Verarbeitung von Funktionen in JavaScript unerlässlich, insbesondere beim Ausleihen von Methoden oder beim Einrichten von Ereignishandlern.

---

Hallo, ich bin Abhay Singh Kathayat!
Ich bin ein Full-Stack-Entwickler mit Fachwissen sowohl in Front-End- als auch in Back-End-Technologien. Ich arbeite mit einer Vielzahl von Programmiersprachen und Frameworks, um effiziente, skalierbare und benutzerfreundliche Anwendungen zu erstellen.
Sie können mich gerne unter meiner geschäftlichen E-Mail-Adresse erreichen: kaashshorts28@gmail.com.

Das obige ist der detaillierte Inhalt vonCall(), apply() und bind() in JavaScript beherrschen: Dies steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!