this in JavaScript – Kontext ist alles
Kaum ein Schlüsselwort in JavaScript hat mehr Entwickler:innen verwirrt als das scheinbar harmlose this. Was in vielen anderen Sprachen ziemlich eindeutig funktioniert, ist in JavaScript erstaunlich dynamisch und manchmal sogar tückisch. Der Grund dafür ist, dass der Wert von this nicht vom Ort der Definition, sondern vom Kontext des Aufrufs abhängt.
In diesem Artikel gehen wir dem Phänomen this gründlich auf den Grund. Wir zeigen Dir, wie this in Funktionen, Methoden, Klassen, Event Handlern und Arrow Functions funktioniert und was Du tun kannst, wenn es sich mal nicht so verhält, wie Du erwartest.
Was ist this überhaupt?
this ist ein kontextbezogener Verweis auf das aktuelle Ausführungsobjekt. Oder einfacher: this zeigt auf das Objekt, das gerade aktiv ist und das im Kontext, aus dem die Funktion gerade aufgerufen wurde.
Klassisches Beispiel:
const user = {
name: "Anna",
greet() {
console.log(`Hallo, ich bin ${this.name}`);
}
};
user.greet(); // → Hallo, ich bin Anna
Hier zeigt this auf das Objekt user, weil greet als Methode dieses Objekts aufgerufen wurde. Würdest Du die Funktion jedoch herauslösen, verändert sich der Kontext:
const greet = user.greet;
greet(); // → this ist das globale Objekt oder undefined
Willkommen in der Welt von this.
this im globalen Kontext
Im globalen Kontext, also außerhalb des Einflussbereichs von Funktionen oder Objekten, verhält sich thisje nach Umgebung sehr unterschiedlich. So richtet es sich im Browser nach dem “window”-Objekt wobei es sich unter NodeJS nach einem globalen Objekt richtet oder schlicht undefined ist.
console.log(this); // Im Browser: window, in Node.js: global oder undefined (im strict mode)
Im Strict Mode ('use strict') ist this im globalen Scope undefined. Das schützt Dich davor, versehentlich auf das globale Objekt zu schreiben.
Hier findest Du detailiertere Infos zum Thema: this im globalen Kontext
this in Funktionen
Innerhalb normaler Funktionen hängt this ebenfalls vom Aufruf ab und nicht vom Ort, an dem die Funktion definiert wurde:
function showThis() {
console.log(this);
}
showThis(); // → global object (oder undefined im strict mode)
Auch hier entspricht this dem globalen Objekt und im Strict Mode ist es undefined.
Hier findest Du detailiertere Infos zum Thema: this in Funktionen
this in Methoden
Wird eine Funktion als Methode eines Objekts aufgerufen, zeigt this auf das Objekt.
const person = {
name: "Tom",
sayName() {
console.log(this.name);
}
};
person.sayName(); // → Tom
Wird dieselbe Funktion hingegen als Referenz aufgerufen, ist this nicht mehr an das Objekt gebunden. Es übernimmt auch hier den Scope in dem sich das aufrufende Element befindet.
const say = person.sayName;
say(); // → global object (oder undefined im strict mode)
Hier findest Du detailiertere Infos zum Thema: this in Methoden
this in Klassen
Mit ES6-Klassen sieht die Sache ähnlich aus. In unserem Beispiel hängt der this-Kontext an der neu geschaffenen “car”-Instanz. Brand bzw. “this.brand” entspricht somit dem übergebenen “Teala”.
class Car {
constructor(brand) {
this.brand = brand;
}
trash() {
console.log(`Ich verschrotte meinen ${this.brand}!`);
}
}
const car = new Car("Tesla");
car.trash(); // → Ich verschrotte meinen Tesla!
Doch Vorsicht: Wird die Methode gelöst aus dem Objekt aufgerufen, verliert sie wieder den Kontext und schmeißt unweigerlich einen Fehler, da der Bezug zu “this.brand” nicht vorhanden ist.
const trashFn = car.trash;
trashFn(); // → "TypeError: Cannot read properties of undefined (reading 'brand')
Hier findest Du detailiertere Infos zum Thema: this in Klassen
Arrow Functions und this
Arrow Functions machen hier einen entscheidenden Unterschied. Sie haben ein lexikalisches this und übernehmen den this-Wert aus dem umgebenden Kontext zur Zeit ihrer Definition, nicht beim Aufruf. Das ist besonders praktisch bei Callbacks oder Event Handlern.
Hier ein und das selbe Codebeispiel mit einer “normalen” Funktion und im zweiten Block mit einer Arrow Function.
function Timer() {
this.seconds = 0;
const that = this;
setInterval(function() {
that.seconds++;
console.log(that.seconds);
}, 1000);
}
new Timer();
Zum Gelingen der Operation muss im ersten Beispiel mit der “normalen” Funktion der Kunstgriff “that = this” ausgeführt werden um den this-Scope in mit in der Funktion bekannt zu machen. Bei der Benutzung einer Arrow Function ist dies nicht nötig.
function Timer() {
this.seconds = 0;
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
new Timer();
Hier findest Du detailiertere Infos zum Thema: this in Arrow Functions
this in Event Handlern
In DOM-Event-Handlern zeigt this standardmäßig auf das Element, das das Event ausgelöst hat. Im unten gezeigten Beispiel mit der “normalen” Funktion handelt es sich hierbei um den Button, auf dem der Event liegt.
document.querySelector("#btn").addEventListener("click", function() {
console.log(this); // → button element
});
Wird hingegen eine Arrow Function verwendet, übernimmt sie das umgebende this, dass heist das this aus dem Kontext, in dem das Element beheimatet ist, was hier zu ungewollten Ergebnissen führen kann.
document.querySelector("#btn").addEventListener("click", () => {
console.log(this); // → wahrscheinlich `window` oder `undefined`
});
Es sollte daher mit Bedacht entscheiden, wann welche Syntax angebracht ist. So ist eine Arrow Function unter Umständen nicht immer der beste Weg.
Hier findest Du detailiertere Infos zum Thema: this in Event Handlern
Methodenbindung mit .bind(), .call() und .apply()
Wenn Du möchtest, dass eine Funktion dauerhaft ein bestimmtes this verwendet, kannst Du sie mit .bind() binden:
const obj = { name: "Max" };
function greet() {
console.log(`Hallo, ${this.name}`);
}
const boundGreet = greet.bind(obj);
boundGreet(); // → Hallo, Max
Mit .call() und .apply() kannst Du eine Funktion sofort ausführen und gleichzeitig this setzen:
greet.call(obj); // → Hallo, Max
greet.apply(obj); // → Hallo, Max
Der Unterschied: Die Methode call() verarbeitet Argumente separat. Die Methode apply() verarbeitet Argumente als Array. Die Methode apply() ist besonders praktisch, wenn Sie anstelle einer Argumentenliste ein Array verwenden möchten.
Hier findest Du detailiertere Infos zum Thema: Methodenbindungen
Fazit: this in JavaScript – verstehen statt raten
Das this-Keyword gehört zu den besonders dynamischen Konzepten in JavaScript. Es wirkt auf den ersten Blick unberechenbar, folgt aber klaren Regeln. Ein grundlegendes Verständnis dieses Konzeptes ist unabdingbar für eine erfolgreiche Entwicklung mit JavaScript. Ob in Funktionen, Methoden, Klassen oder Arrow Functions: this ist kein Mysterium, sondern ein mächtiges Werkzeug für Kontextkontrolle.
FAQ: häufig gestellte Fragen zu this in JavaScript
Was ist this genau in JavaScript?
this ist ein Kontextzeiger, der auf das Objekt zeigt, das aktuell ausführend ist, was nicht unbedingt das ist, in dem die Funktion definiert wurde.
const user = { name: "Anna", say() { console.log(this.name); } };
user.say(); // → Anna
Warum entspricht this in einer Funktion manchmal dem global Object oder ist undefined?
Weil der Aufrufkontext fehlt oder im Strict Mode this nicht auf das globale Objekt fällt.
'use strict';
function show() {
console.log(this); // → undefined
}
show();
Wie funktioniert this in Arrow Functions?
Arrow Functions übernehmen this aus ihrem äußeren Kontext. Sie binden es nicht neu.
const obj = {
name: "Tom",
show: () => console.log(this.name) // → undefined
};
obj.show();
Wie kann ich this dauerhaft an ein Objekt binden?
Es funktioniert indem ich den this Kontext als Argument in der Methode .bind() mit übergebe.
const greet = function() { console.log(this.name); };
const bound = greet.bind({ name: "Lisa" });
bound(); // → Lisa
Was ist der Unterschied zwischen .call(), .apply() und .bind()?
.call()→ sofort ausführen, Argumente einzeln.apply()→ sofort ausführen, Argumente als Array.bind()→ Funktion mit festemthiszurückgeben
Wie verhält sich this in Event Handlern?
In normalen Funktionen zeigt this auf das Element:
button.addEventListener('click', function() {
console.log(this); // → das Button-Element
});
In Arrow Functions erbt es den äußeren Kontext:
button.addEventListener('click', () => {
console.log(this); // → window oder class-Kontext
});
Was passiert, wenn ich this in einer Klasse verliere?
Wenn Du Methoden weiterreichst, kann this verloren gehen:
class App {
log() {
console.log(this); // funktioniert
}
}
const app = new App();
const fn = app.log;
fn(); // → this ist undefined
Lösung: .bind(this) oder Arrow Function im Klassenfeld.
Funktioniert this auch in Modulen oder ES6-Imports anders?
In ES6-Modulen ist der globale Kontext nicht mehr window, sondern undefined. Das betrifft auch this.
console.log(this); // → undefined im Modul
Ist this dasselbe wie self in anderen Sprachen?
Nicht ganz. In Python oder Java ist self bzw. this immer stabil. In JavaScript ist es abhängig vom Aufrufkontext.
Wie kann ich sicherstellen, dass this sich so verhält, wie ich es will?
- Nutze Arrow Functions für lexikalisches
this - Binde Methoden im Konstruktor oder über
.bind() - Vermeide Methodenweitergabe ohne Kontext
- Nutze klare Objektaufrufe (z. B.
obj.method())
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.