this in Arrow Functions: Die stille Revolution im JavaScript-Kontext
Seit der Einführung von Arrow Functions mit ES6 (ECMAScript 2015) hat sich JavaScript in Bezug auf das this-Verhalten grundlegend verändert. Während in klassischen Funktionen this dynamisch und abhängig vom Aufruf gebunden ist, gelten für Arrow Functions ganz andere Regeln. Sie übernehmen das this des umgebenden Kontexts, ganz gleich, wann oder wie sie aufgerufen werden.
Diese Eigenschaft kann für Entwickler:innen ein großer Vorteil sein, wenn man sie richtig versteht und gezielt einsetzt. Doch sie bringt auch neue Stolpersteine mit sich, besonders wenn man zu schnell in alte Denkmuster zurückfällt.
Lexikalisches this: Der entscheidende Unterschied
Der wohl wichtigste Punkt bei Arrow Functions ist, dass sie kein eigenes this binden. Stattdessen übernehmen sie das this aus dem lexikalischen Kontext, also aus der Umgebung, in der sie definiert wurden, nicht aus der Umgebung, in der sie aufgerufen werden.
Ein klassisches Beispiel:
const user = {
name: "Nora",
greet() {
setTimeout(function () {
console.log(`Hallo, ich bin ${this.name}`);
}, 1000);
}
};
user.greet(); // `this` zeigt auf das globale Objekt oder ist undefined
Hier ist das Problem: Die an setTimeout übergebene Funktion hat ein eigenes this, das beim Aufruf auf das globale Objekt zeigt, nicht auf user.
Die Lösung mit einer Arrow Function:
const user = {
name: "Nora",
greet() {
setTimeout(() => {
console.log(`Hallo, ich bin ${this.name}`);
}, 1000);
}
};
user.greet(); // "Hallo, ich bin Nora"
Da Arrow Functions das this des umgebenden Scopes übernehmen, was in diesem Fall der Methode greet() ist, bleibt der Bezug zu user erhalten.
Kein dynamisches this mehr: Befreiung oder Einschränkung?
Im Gegensatz zu normalen Funktionen haben Arrow Functions kein dynamisches Verhalten, wenn es um this geht. Das bedeutet, dass man es nicht nachträglich mit call, apply oder bind in den Kontext bringen muss.
const arrow = () => {
console.log(this.name);
};
const person = { name: "Mila" };
arrow.call(person); // `this` bleibt das ursprüngliche – nicht veränderbar
Das ist ein Segen, wenn man sich auf stabilen Kontext verlassen will, aber ein Fluch, wenn man this bewusst steuern möchte.
Arrow Functions in Klassen: Bestens geeignet für Event-Handler
Ein Paradebeispiel für den praktischen Einsatz von Arrow Functions mit festem this-Binding sind Event-Handler in Klassen.
class Button {
constructor(label) {
this.label = label;
}
handleClick = () => {
console.log(`Button "${this.label}" wurde geklickt`);
};
}
Durch die Verwendung einer Arrow Function als Klassen-Eigenschaft ist this automatisch auf die jeweilige Instanz gebunden, ganz ohne bind() im Konstruktor. Das macht Arrow Functions zu einem bevorzugten Werkzeug in modernen UI-Frameworks wie React, Vue (Composition API) oder Svelte.
Achtung bei Methoden: Arrow Functions sind keine Prototypen-Methoden
Ein wichtiger Unterschied zu klassischen Methoden. Arrow Functions landen nicht auf dem Prototypen der Klasse, sondern direkt auf jeder Instanz.
class User {
#name;
constructor(name) {
this.name = name;
}
greet = () => {
console.log(`Hallo, ich bin ${this.name}`);
};
}
Das bedeutet, dass für jede Instanz die Arrow Function neu erstellt wird, was zu mehr Speicherverbrauch führen kann, wenn viele Instanzen erzeugt werden. Für Utility-Methoden mit häufigem Aufruf wäre eine Arrow Function dann die falsche Wahl.
Hier stellt sich dann auch die Frage, ob in Bezug auf stringenten Code und bessere Lesbarkeit komplett auf die Benutzung von Arrow Functions verzichtet werden und stattdessen die Möglichkeit der “.bind()” Methode im Konstruktor verwendet werden sollte.
Arrow Functions in Callbacks: Eine elegante Lösung für this
In vielen klassischen Callbacks, zum Beispiel bei Array-Methoden wie .map() oder .forEach(), kann die Verwendung von Arrow Functions das lästige Binden von this überflüssig machen.
const team = {
name: "Entwicklung",
members: ["Lia", "Tom", "Nico"],
list() {
this.members.forEach(member => {
console.log(`${member} ist Teil des Teams ${this.name}`);
});
}
};
team.list();
// Lia ist Teil des Teams Entwicklung
// Tom ist Teil des Teams Entwicklung
// Nico ist Teil des Teams Entwicklung
Mit einer normalen Funktion im Callback müsste man das this manuell mit bind(this) setzen oder vorher zwischenspeichern (that = this).
Kein this, kein arguments, kein super
Arrow Functions sind leichtgewichtig und verzichten dabei auf eigene Bindungen für einige Kernkonzepte. Neben this betrifft das auch:
arguments(keine Zugriffsmöglichkeit auf übergebene Argumente)super(kein direkter Zugriff auf die Superklasse in Arrow Functions)new(Arrow Functions sind nicht als Konstruktoren nutzbar)
Das macht sie weniger geeignet für komplexe Methodenlogik, aber ideal für einfache, kontextstabile Aufgaben.
Fazit: Arrow Functions – Kontextbewusst statt kontextflexibel
Arrow Functions sind ein mächtiges Werkzeug, um das oft verwirrende Verhalten von this in JavaScript überschaubar und sicher zu gestalten. Indem sie auf das this ihrer Umgebung zugreifen, machen sie den Code weniger fehleranfällig, besonders in asynchronen Operationen oder im Umgang mit UI-Events.
Aber Arrow Functions ersetzen nicht alle Einsatzzwecke klassischer Funktionen. Wer this, arguments oder super aktiv benötigt, sollte weiterhin normale Funktionen verwenden.
Richtig eingesetzt sind Arrow Functions eine Bereicherung für jede:n Entwickler:in. Besonders in Kombination mit modernen Klassen, React-Komponenten oder funktionalem Code.
Buy me a coffee
Wenn Dir meine Beiträge gefallen und sie Dir bei Deiner Arbeit helfen, würde ich mich über einen “Kaffee” und ein paar nette Worte von Dir freuen.