Signatur
Beschreibung
apply() ruft die Funktion, auf der es aufgerufen wird, sofort auf. Das erste Argument legt fest, welchen Wert this innerhalb der Funktion hat. Das zweite Argument enthält die Argumente als Array oder als array-ähnliches Objekt, also z. B. arguments, eine NodeList oder { length: 2, 0: 'a', 1: 'b' }.
Der einzige Unterschied zu call(): call() erwartet die Argumente einzeln, apply() als eine Liste. Vor ES2015 brauchte man apply() vor allem, um eine Funktion mit einer Argumentliste variabler Länge aufzurufen, z. B. Math.max.apply(null, zahlen). Heute erledigt das meist der Spread-Operator (Math.max(...zahlen)).
Trotzdem ist apply() weiterhin nützlich:
- Methoden ausleihen: Eine Methode eines anderen Objekts wird mit einem fremden
thisaufgerufen, z. B.Array.prototype-Methoden auf array-ähnlichen Objekten. - Wrapper und Decorators: Man leitet
thisund alle Argumente unverändert an die ursprüngliche Funktion weiter. - Älterer Code:
apply()funktioniert auch in Umgebungen ohne Spread-Syntax.
Anders als bind() erzeugt apply() keine neue Funktion, sondern führt die Funktion direkt aus.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $thisArg Pflicht | any | Wert für this beim Aufruf. Im nicht-strikten Modus wird null bzw. undefined durch das globale Objekt ersetzt, und primitive Werte werden in Objekte umgewandelt. Im strikten Modus wird der Wert unverändert übernommen. |
|
| $argsArray | Array|ArrayLike|null|undefined | undefined | Array oder array-ähnliches Objekt mit den Argumenten für die Funktion. Bei null oder undefined wird die Funktion ohne Argumente aufgerufen. |
Rückgabewert
this und den angegebenen Argumenten.Beispiele
this festlegen und Argumente als Array übergeben
const begruesse = function (gruss, satzzeichen) {
return `${gruss}, ${this.name}${satzzeichen}`;
};
const nutzer = { name: 'Anna' };
console.log(begruesse.apply(nutzer, ['Hallo', '!']));
// Zum Vergleich mit call():
console.log(begruesse.call(nutzer, 'Servus', '?'));
Maximum eines Arrays – klassisch vs. modern
const messwerte = [12, 47, 3, 29];
// Klassisch mit apply()
const maxAlt = Math.max.apply(null, messwerte);
// Modern mit Spread-Syntax
const maxNeu = Math.max(...messwerte);
console.log(maxAlt, maxNeu);
Array-Methode auf array-ähnlichem Objekt ausleihen
const arrayAehnlich = { length: 3, 0: 'rot', 1: 'grün', 2: 'blau' };
// join() von Array.prototype mit fremdem this aufrufen
const text = Array.prototype.join.apply(arrayAehnlich, [' | ']);
console.log(text);
// Zwei Arrays in place zusammenführen
const ziel = [1, 2];
Array.prototype.push.apply(ziel, [3, 4, 5]);
console.log(ziel);
Logging-Wrapper, der this und Argumente weiterreicht
const mitLogging = (fn) => function (...args) {
console.log(`Aufruf von ${fn.name} mit`, args);
return fn.apply(this, args); // this des Aufrufers beibehalten
};
const konto = {
saldo: 100,
einzahlen(betrag) {
this.saldo += betrag;
return this.saldo;
}
};
konto.einzahlen = mitLogging(konto.einzahlen);
console.log(konto.einzahlen(50));
// Wichtig · Fallstricke
- Arrow Functions: Bei Pfeilfunktionen wird
thisArgignoriert, weil ihrthislexikalisch aus dem umgebenden Code stammt. Die Argumente werden trotzdem übergeben. - Grenze für die Argumentanzahl: JavaScript-Engines begrenzen die Zahl der Argumente pro Aufruf, oft auf einige Zehn- bis Hunderttausend. Bei sehr großen Arrays kann
Math.max.apply(null, riesigesArray)einenRangeErrorauslösen. Das gilt genauso für die Spread-Syntax. In solchen Fällen besser mitreduce()oder einer Schleife arbeiten. - Falscher Argumenttyp: Ist
argsArrayweder ein Objekt nochnull/undefined(z. B. eine Zahl oder ein String), wird einTypeErrorgeworfen. - Nicht-strikter Modus:
apply(null, …)setztthisauf das globale Objekt (windowbzw.globalThis). Das kann ungewollt globale Variablen verändern. - Überschriebenes apply: Eine Funktion kann eine eigene Eigenschaft
applyhaben. Robuster Bibliothekscode verwendet daherReflect.apply(fn, thisArg, args)oderFunction.prototype.apply.call(fn, thisArg, args). - Kompatibilität: In allen Browsern und in Node.js verfügbar. Array-ähnliche Objekte als
argsArraywerden seit ES5 unterstützt.