Das this-Keyword in JavaScript: Kontext endlich verstehen

Wenn du in JavaScript schon einmal this.name geschrieben hast und plötzlich undefined herauskam, bist du nicht allein. Das this-Keyword ist einer der häufigsten Stolpersteine für Einsteiger – und selbst erfahrene Entwickler geraten manchmal ins Grübeln. Der Grund: Anders als in vielen anderen Sprachen zeigt this in JavaScript nicht fest auf ein bestimmtes Objekt. Sein Wert hängt davon ab, wie eine Funktion aufgerufen wird, nicht davon, wo sie definiert ist. In diesem Beitrag entwirren wir das Ganze Schritt für Schritt.

Was ist this überhaupt?

this ist eine spezielle Referenz, die beim Aufruf einer Funktion automatisch gesetzt wird. Du kannst es dir als eine unsichtbare Variable vorstellen, die JavaScript für dich befüllt. Die entscheidende Frage lautet immer: In welchem Kontext wird die Funktion aufgerufen? Genau dieser Aufrufkontext bestimmt den Wert. Deshalb kann dieselbe Funktion je nach Aufruf ein völlig anderes this haben.

this in normalen Funktionen

Rufst du eine ganz normale Funktion einfach so auf, zeigt this auf das globale Objekt – im Browser also window. Im strict mode (und in ES-Modulen, die automatisch strikt sind) ist this stattdessen undefined. Das ist ein bewusster Schutzmechanismus, damit du nicht versehentlich globale Variablen überschreibst.

function zeigeThis() {
  console.log(this);
}

zeigeThis();
// Browser (nicht strict): window
// strict mode / Modul: undefined

this in Methoden und Objekten

Interessant wird es bei Methoden – also Funktionen, die zu einem Objekt gehören. Wird die Methode über das Objekt aufgerufen, zeigt this auf genau dieses Objekt. Der Teil links vom Punkt beim Aufruf ist der Schlüssel.

const nutzer = {
  name: "Anna",
  begruessung() {
    console.log(`Hallo, ich bin ${this.name}`);
  }
};

nutzer.begruessung(); // "Hallo, ich bin Anna"

// Vorsicht: this hängt am Aufruf, nicht an der Funktion!
const fn = nutzer.begruessung;
fn(); // "Hallo, ich bin undefined" – this ging verloren

Genau hier passiert der klassische Fehler: Sobald du eine Methode aus ihrem Objekt herauslöst und separat aufrufst, fehlt der Kontext links vom Punkt – und this ist nicht mehr das Objekt.

Pfeilfunktionen und lexikalisches this

Pfeilfunktionen verhalten sich anders: Sie haben kein eigenes this. Stattdessen übernehmen sie this aus dem umgebenden Kontext, in dem sie geschrieben wurden. Man nennt das lexikalisches this. Das löst ein altes Problem elegant – zum Beispiel in Callbacks wie setInterval:

const timer = {
  sekunden: 0,
  start() {
    setInterval(() => {
      this.sekunden++;
      console.log(this.sekunden);
    }, 1000);
  }
};

timer.start(); // 1, 2, 3, ... this bleibt das timer-Objekt

Hätten wir hier eine normale Funktion statt der Pfeilfunktion genutzt, wäre this beim Aufruf durch setInterval verloren gegangen. Die Pfeilfunktion greift dagegen auf das this von start zu – und das ist das timer-Objekt.

this explizit setzen: call, apply und bind

Manchmal möchtest du selbst bestimmen, worauf this zeigt. Dafür bietet JavaScript drei Methoden. Mit call und apply rufst du eine Funktion direkt auf und übergibst das gewünschte this als erstes Argument – der Unterschied liegt nur darin, wie die weiteren Argumente übergeben werden. Mit bind erzeugst du dagegen eine neue Funktion, deren this fest verdrahtet ist.

function vorstellen(gruss) {
  console.log(`${gruss}, ich bin ${this.name}`);
}

const person = { name: "Ben" };

vorstellen.call(person, "Hi");         // "Hi, ich bin Ben"
vorstellen.apply(person, ["Servus"]);  // "Servus, ich bin Ben"

const gebunden = vorstellen.bind(person);
gebunden("Moin"); // "Moin, ich bin Ben"

Zur Merkhilfe: call nimmt einzelne Argumente (Comma), apply nimmt ein Array. bind führt nichts sofort aus, sondern gibt dir eine vorbereitete Funktion zurück.

this in Klassen und Event-Handlern

In Klassen zeigt this innerhalb einer Methode normalerweise auf die konkrete Instanz. Problematisch wird es, wenn du eine Methode als Event-Handler übergibst – dann ruft der Browser sie in einem anderen Kontext auf und this geht verloren. Ein bewährter Fix ist bind im Konstruktor:

class Zaehler {
  constructor() {
    this.wert = 0;
    // this fest an die Instanz binden
    this.erhoehen = this.erhoehen.bind(this);
  }

  erhoehen() {
    this.wert++;
    console.log(this.wert);
  }
}

const z = new Zaehler();
const button = document.querySelector("button");
button.addEventListener("click", z.erhoehen); // funktioniert dank bind

Alternativ kannst du die Methode als Klassenfeld mit Pfeilfunktion definieren (erhoehen = () => { ... }), dann bleibt this ebenfalls automatisch an die Instanz gebunden. Beide Wege sind in modernem JavaScript üblich.

Fazit

Der wichtigste Merksatz für this lautet: Es kommt auf den Aufruf an, nicht auf die Definition. Bei normalen Funktionen ist es das globale Objekt oder undefined, bei Methoden das Objekt links vom Punkt, bei Pfeilfunktionen das this der Umgebung. Und wenn du die Kontrolle brauchst, helfen dir call, apply und bind. Wenn du dir angewöhnst, bei jeder Funktion kurz zu fragen „Wie wird sie aufgerufen?“, verliert this schnell seinen Schrecken. Probier die Beispiele in der Konsole aus – nichts festigt das Verständnis so sehr wie eigenes Herumexperimentieren.