JavaScript - Methode call()

Hallo da, zukünftiger Codingsuperstar! Heute tauchen wir in eines der kleinen nützlichen Tricks von JavaScript ein: die call() Methode. Keine Sorge, wenn du neu im Programmieren bist; ich werde dich auf dieser Reise Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Also hole dir ein Getränk deiner Wahl und lassen uns dieses aufregende Abenteuer beginnen!

Was ist die Function call() Methode?

Bevor wir uns der call() Methode zuwenden, lassen Sie uns schnell unser Gedächtnis über Funktionen auffrischen. Funktionen in JavaScript sind wie kleine Maschinen, die spezifische Aufgaben erledigen. Sie sind unglaublich nützlich und wenn du den Dreh raushast, wirst du sie ständig verwenden!

Jetzt ist die call() Methode eine besondere Superkraft, die Funktionen haben. Sie ermöglicht es uns, eine Funktion aufzurufen (oder zu invoke) und anzugeben, worauf das this Schlüsselwort innerhalb dieser Funktion verweisen soll. Wenn das ein bisschen verwirrend klingt, keine Sorge! Wir werden das mit einigen Beispielen durchgehen.

Die Syntax

So sieht die call() Methode aus:

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

• functionName ist die Funktion, die wir aufrufen möchten.
• thisArg ist, auf was this innerhalb der Funktion verweisen soll.
• arg1, arg2, ... sind die Argumente, die wir an die Funktion übergeben möchten.

Beispiele der Function call() Methode

Lassen Sie uns in einige Beispiele eintauchen, um zu sehen, wie call() in der Praxis funktioniert!

Beispiel 1: Grundlegende Verwendung

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

const person = { name: 'Alice' };

greet.call(person);

Wenn du diesen Code ausführst, wirst du sehen:

Hallo, mein Name ist Alice!

Was passiert hier? Wir verwenden call(), um die greet Funktion aufzurufen, aber wir sagen ihr, dass sie person als this verwenden soll. Also wenn die Funktion versucht, auf this.name zuzugreifen, tut sie das tatsächlich auf person.name.

Beispiel 2: Übergeben von Argumenten

function introduce(hobby, food) {
console.log(`Hallo, ich bin ${this.name}. Ich liebe ${hobby} und mein Lieblingsessen ist ${food}.`);
}

const person1 = { name: 'Bob' };
const person2 = { name: 'Carol' };

introduce.call(person1, 'coden', 'Pizza');
introduce.call(person2, 'malen', 'Sushi');

Dies wird ausgeben:

Hallo, ich bin Bob. Ich liebe coden und mein Lieblingsessen ist Pizza.
Hallo, ich bin Carol. Ich liebe malen und mein Lieblingsessen ist Sushi.

In diesem Beispiel geben wir nicht nur an, was this sein soll, sondern übergeben auch Argumente an die Funktion. Die call() Methode ermöglicht es uns, beides zu tun!

Beispiel 3: Methoden ausleihen

Eine der coolsten Sachen an call() ist, dass es uns ermöglicht, Methoden von anderen Objekten zu "ausleihen". Lass mich dir zeigen, was ich meine:

const calculator = {
multiply: function(a, b) {
return a * b;
}
};

const scientific = {
square: function() {
return this.multiply(this.number, this.number);
},
number: 5
};

console.log(scientific.square.call(scientific));  // Das funktioniert wie erwartet
console.log(calculator.multiply.call(scientific, scientific.number, scientific.number));  // Das leiht die multiply Methode aus

Ausgabe:

25
25

In diesem Beispiel leihen wir die multiply Methode vom calculator Objekt und verwenden sie im Kontext des scientific Objekts. quite cool, oder?

Beispiel 4: call() mit eingebauten Methoden verwenden

Wusstest du, dass wir call() sogar mit JavaScripts eingebauten Methoden verwenden können? Schau dir das an:

const numbers = [1, 2, 3, 4, 5];
const max = Math.max.call(null, ...numbers);
console.log(max);  // Ausgabe: 5

Hier verwenden wir call() mit Math.max(). Das null Argument ist weil Math.max() this nicht verwendet, und wir verteilen das numbers Array als einzelne Argumente.

Methoden, die mit call() in Verbindung stehen

Um dir ein vollständigeres Bild zu geben, schauen wir uns einige Methoden an, die mit call() in Verbindung stehen:

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

Jede dieser Methoden hat ihre Anwendungsfälle, aber call() ist oft am direktesten, wenn du genau weißt, welche Argumente du übergeben möchtest.

Schlussfolgerung

Und da hast du es, meine lieben Schüler! Wir haben die call() Methode von oben bis unten erforscht. Denke daran, call() ist wie eine magischestab, der es dir ermöglicht, zu kontrollieren, was this innerhalb einer Funktion bedeutet und ermöglicht es dir, Methoden von anderen Objekten zu leihen.

Wie bei allem im Programmieren macht Übung den Meister. Also habe keine Angst, call() in deinem eigenen Code auszuprobieren. Wer weiß? Vielleicht wirst du call() öfter verwenden, als du dachtest!

Weiter coden, weiter lernen und denken daran: in der Welt von JavaScript bist du immer nur einen call() von neuen Möglichkeiten entfernt!

Credits: Image by storyset