JavaScript - Methode apply()

Hallo那里，未来的JavaScript巫师们！今天，我们将深入探讨JavaScript中最强大和最灵活的方法之一：apply() Methode。在本教程结束时，您将像专业人士一样使用apply()！让我们一起开始这段激动人心的旅程。

Was ist die Function apply() Methode?

Die apply() Methode ist eine integrierte JavaScript-Funktion, die es uns ermöglicht, eine Funktion mit einem gegebenen this Wert und Argumenten, die als Array (oder ein array-ähnliches Objekt) übergeben werden, aufzurufen. Es ist wie eine magische Zauberstab, der Ihnen ermöglicht zu steuern, wie eine Funktion ausgeführt wird!

Warum ist apply() wichtig?

1. Es gibt uns Flexibilität bei der Aufruf von Funktionen.
2. Es ermöglicht uns, Methoden von anderen Objekten zu leihen.
3. Es ist super nützlich, wenn man mit einer variablen Anzahl von Argumenten arbeitet.

Nun, schauen wir uns die Syntax an und tauchen dann in einige Beispiele ein!

Syntax der apply() Methode

Hier ist die grundlegende Syntax der apply() Methode:

functionName.apply(thisArg, [argsArray])

Lassen Sie uns das einmal durchgehen:

• functionName: Die Funktion, die Sie aufrufen möchten.
• thisArg: Der Wert von this, der für den Funktionsaufruf verwendet wird.
• argsArray: Ein Array oder ein array-ähnliches Objekt, das die Argumente angibt, mit denen functionName aufgerufen werden soll.

Es sieht jetzt vielleicht etwas verwirrend aus, aber keine Sorge! Wir werden durch zahlreiche Beispiele hindurchgehen, um es kristallklar zu machen.

Beispiele der apply() in Aktion

Beispiel 1: Grundlegende Verwendung

Lassen Sie uns mit einem einfachen Beispiel beginnen:

function greet(name) {
console.log(`Hallo, ${name}! Mein Name ist ${this.name}.`);
}

const person = { name: 'Alice' };

greet.apply(person, ['Bob']);

Ausgabe:

Hallo, Bob! Mein Name ist Alice.

In diesem Beispiel:

1. Wir definieren eine greet Funktion, die this.name verwendet.
2. Wir erstellen ein person Objekt mit einer name Eigenschaft.
3. Wir verwenden apply() um greet aufzurufen, indem wir this auf person setzen und 'Bob' als Argument übergeben.

Das Magische hier ist, dass apply() ermöglicht, auf was this inside der Funktion refers. Cool, oder?

Beispiel 2: Verwendung von apply() mit Math.max()

Hier ist ein praktisches Beispiel mit Math.max():

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);

Ausgabe:

7

In diesem Fall:

1. Wir haben ein Array von Zahlen.
2. Wir verwenden apply() um dieses Array direkt an Math.max() zu übergeben.
3. null wird als erstes Argument verwendet, da Math.max() this nicht verwendet.

Dies ist super praktisch, wenn man ein Array von Zahlen hat und den Maximumwert finden möchte!

Beispiel 3: Methoden ausleihen

Nun schauen wir, wie wir apply() verwenden können, um Methoden auszuleihen:

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };

const actualArray = Array.prototype.slice.apply(arrayLike);

console.log(actualArray);

Ausgabe:

['a', 'b', 'c']

Was passiert hier?

1. Wir haben ein Objekt, das wie ein Array aussieht, aber keines ist.
2. Wir leihen uns die slice() Methode von Array.prototype.
3. apply() ermöglicht es uns, slice() auf unserem array-ähnlichen Objekt zu verwenden, um es in ein echtes Array zu konvertieren.

Dies ist unglaublich nützlich, wenn man mit DOM-Elementen oder anderen array-ähnlichen Objekten arbeitet!

Beispiel 4: Funktionen mit mehreren Argumenten anwenden

Lassen Sie uns etwas Komplexeres ausprobieren:

function introduce(greeting, hobby) {
console.log(`${greeting}, ich bin ${this.name}. Ich liebe ${hobby}!`);
}

const person1 = { name: 'Charlie' };
const person2 = { name: 'Diana' };

introduce.apply(person1, ['Hallo da', 'coden']);
introduce.apply(person2, ['Hallo', 'malen']);

Ausgabe:

Hallo da, ich bin Charlie. Ich liebe coden!
Hallo, ich bin Diana. Ich liebe malen!

In diesem Beispiel:

1. Wir definieren eine introduce Funktion, die zwei Argumente nimmt.
2. Wir erstellen zwei Person-Objekte.
3. Wir verwenden apply() um introduce für jede Person aufzurufen, indem wir unterschiedliche Argumente übergeben.

Dies zeigt, wie apply() mit mehreren Argumenten und verschiedenen this Werten verwendet werden kann.

Vergleich der Funktion Methoden

Lassen Sie uns apply() mit seinen Geschwistern call() und bind() vergleichen:

Methode	Syntax	Beschreibung
apply()	func.apply(thisArg, [argsArray])	Ruft eine Funktion mit einem gegebenen this Wert und Argumenten als Array auf
call()	func.call(thisArg, arg1, arg2, ...)	Ähnlich wie apply(), aber Argumente werden einzeln übergeben
bind()	func.bind(thisArg, arg1, arg2, ...)	Erstellt eine neue Funktion mit einem festen this Wert und initialen Argumenten

Jede hat ihre Anwendungsfälle, aber apply() ist besonders nützlich, wenn man Argumente in einem Array hat oder mit array-ähnlichen Objekten arbeiten muss.

Schlussfolgerung

Glückwunsch! Sie haben gerade eine intensive Reise in die Welt der apply() angetreten. Von der grundlegenden Verwendung bis hin zum Ausleihen von Methoden und der Arbeit mit mehreren Argumenten, Sie haben gesehen, wie vielseitig und mächtig diese Methode sein kann.

Erinnern Sie sich daran, apply() ist wie ein Schweizer Army Knife in Ihrem JavaScript-Werkzeugkasten. Es mag etwas Übung erfordern, um es zu meistern, aber wenn Sie es einmal können, werden Sie es in vielen verschiedenen Situationen einsetzen können.

Weiterspielen mit apply(), und fürchten Sie sich nicht, kreativ zu sein. Wer weiß? Vielleicht apply() Sie sich selbst bald in einen JavaScript-Meister! Viel Spaß beim Programmieren, zukünftige Entwickler!

Credits: Image by storyset