Wenn du schon länger mit JavaScript arbeitest, hast du sicher das Wort this
immer wieder gesehen. Viele denken, das sei kompliziert, aber eigentlich steckt dahinter nur ein simples Prinzip: this
zeigt immer auf das Objekt, das gerade den aktuellen Kontext liefert.
this
sich je nach Aufrufart ändertDer häufigste Stolperstein ist die Art, wie eine Funktion aufgerufen wird. Beim normalen Funktionsaufruf (z. B. myFunc()
) zeigt this
im Nicht‑Strict‑Mode auf das globale Objekt (window
im Browser). Im Strict‑Mode ist this
undefined
. Wenn du eine Methode einer Objekt‑Instanz nutzt (obj.method()
), verweist this
auf genau dieses Objekt (obj
).
Ein weiteres Detail: Arrow‑Funktionen übernehmen das this
aus ihrer äußeren Umgebung, statt ein eigenes zu erzeugen. Das macht sie ideal für Callbacks, bei denen du den ursprünglichen Kontext behalten willst.
call
, apply
und bind
Manchmal musst du den Kontext manuell festlegen. Mit call
und apply
rufst du eine Funktion sofort mit einem gewünschten this
auf. Der Unterschied: call
nimmt einzelne Argumente, apply
ein Array von Argumenten. Beispiel:
function greet(greeting) {
console.log(greeting + ', ' + this.name);
}
const person = { name: 'Anna' };
greet.call(person, 'Hallo'); // Hallo, Anna
greet.apply(person, ['Hi']); // Hi, Anna
Wenn du später ein neues this
festlegen willst, nutzt du bind
. Es gibt dir eine neue Funktion zurück, die immer den vorgegebenen Kontext verwendet:
const greetAnna = greet.bind(person);
setTimeout(greetAnna, 1000); // nach 1 s: Hallo, Anna
Das ist besonders nützlich bei Event‑Handlern oder in Klassen, wo du Methoden an andere Stellen weitergeben musst, ohne den Kontext zu verlieren.
Ein kurzer Check, wann du welches Mittel wählen solltest:
call
/apply
, wenn du die Funktion sofort mit einem neuen this
ausführen musst.bind
, wenn du die Funktion später, aber immer mit demselben Kontext aufrufen willst.Zusammengefasst: this
ist nicht mystisch, sondern ein Verweis, der beim Funktionsaufruf bestimmt wird. Mit den drei Werkzeugen hast du die volle Kontrolle, egal ob du sofort ausführen oder später benutzen willst. Probiere die Beispiele aus, spiel ein bisschen rum und du wirst merken, dass das this‑Binding
plötzlich viel greifbarer wird.
Was ist am schwersten in JavaScript? Die Antwort: Asynchronität und der Event Loop. Verständlich erklärt, mit Beispielen, Checklisten, FAQ und Troubleshooting.
© 2025. Alle Rechte vorbehalten.