8.1 Methode call
Die Methoden call, bind und apply in JavaScript spielen eine entscheidende Rolle bei der Verwaltung des Ausführungskontexts von Funktionen, indem sie erlauben, den Wert von this beim Aufrufen von Funktionen festzulegen. Diese Methoden sind besonders nützlich, wenn man mit Objekten und funktionaler Programmierung arbeitet, und bieten mächtige Werkzeuge für die flexible Verwaltung von Code. Lassen Sie uns jede der Methoden im Detail betrachten und verschiedene Beispiele ihrer Verwendung durchgehen.
Die Methode call ruft eine Funktion mit einem bestimmten Wert von this und Argumenten auf, die durch Kommas getrennt sind. Dies ermöglicht uns, explizit den Kontext zu bestimmen, in dem eine Funktion ausgeführt werden soll.
Syntax:
func.call(thisArg, arg1, arg2 ...);
Beispiel:
In diesem Beispiel wird die Funktion greet mit dem Kontext person aufgerufen, was es ihr ermöglicht, die Eigenschaft name des Objekts person zu verwenden.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hallo', '!'); // Ausgabe: Hallo, John!
8.2 Methode apply
Die Methode apply ist ähnlich wie call, übergibt jedoch die Argumente in Form eines Arrays. Dies ist praktisch, wenn wir ein Array von Argumenten haben, das wir an eine Funktion übergeben möchten.
Syntax:
func.apply(thisArg, [argsArray]);
Beispiel:
Dieses Beispiel ist ähnlich dem vorherigen, jedoch werden die Argumente als Array übergeben.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hallo', '!']); // Ausgabe: Hallo, John!
8.3 Methode bind
Die Methode bind erstellt eine neue Funktion, die bei Aufruf einen bestimmten Wert von this setzt. Argumente, die an bind übergeben werden, sind in der neuen Funktion festgelegt. Dies ermöglicht es, Funktionen mit einem konstanten Kontext zu erstellen.
Syntax:
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
Beispiel:
In diesem Beispiel wird eine neue Funktion boundGreet erstellt, die immer im Kontext des Objekts person ausgeführt wird.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hallo');
boundGreet('!'); // Ausgabe: Hallo, John!
8.4 Detaillierte Analyse der Verwendung von Methoden
1. Verwendung von call zur Vererbung von Methoden:
Die Methode call wird oft verwendet, um Methoden eines Objekts von einem anderen zu erben. Dies ermöglicht es, Methoden und Eigenschaften zu übernehmen, ohne eine explizite Vererbung einzuführen.
In diesem Beispiel wird der Konstruktor Product im Kontext des Objekts Food aufgerufen, was es erlaubt, die Eigenschaften name und price zu erben.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Käse', 5, 'Milchprodukte');
console.log(cheese); // Ausgabe: Food { name: 'Käse', price: 5, category: 'Milchprodukte' }
2. Verwendung von apply zur Übergabe eines Arrays von Argumenten:
Die Methode apply ist nützlich, wenn wir ein Array von Argumenten an eine Funktion übergeben möchten, die einzelne Parameter erwartet.
In diesem Fall wird das Array numbers an die Funktion sum als einzelne Argumente übergeben.
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Ausgabe: 6
3. Verwendung von bind zur Erstellung einer Funktion mit festem Kontext:
Die Methode bind ermöglicht es, Funktionen mit einem konstanten Kontext zu erstellen, was besonders nützlich ist, wenn wir mit Ereignissen und Rückrufen arbeiten.
Hier wird die Funktion getX mithilfe von bind an das Objekt module gebunden, wodurch der richtige Wert für x beim Aufruf der Funktion abgerufen werden kann.
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Ausgabe: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Ausgabe: 42
8.5 Beispiele aus dem echten Leben
Beispiel für die Verwendung von call zum Ausleihen einer Array-Methode:
In diesem Beispiel wird die Methode forEach des Arrays mithilfe von call für das Objekt arguments verwendet.
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Ausgabe: 1, 2, 3
Beispiel für die Verwendung von apply zum Zusammenführen von Arrays:
Hier wird die Methode push mithilfe von apply verwendet, um zwei Arrays zusammenzuführen.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Ausgabe: [1, 2, 3, 4, 5, 6]
Beispiel für die Verwendung von bind zur Erstellung einer teilweisen Funktion:
Die Funktion double wird mit einem festgelegten ersten Argument 2 mithilfe von bind erstellt.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Ausgabe: 10
GO TO FULL VERSION