this — Keyword · JavaScript-Referenz

Signatur

this

Beschreibung

this ist ein besonderes Schlüsselwort, das innerhalb einer Funktion auf den aktuellen Ausführungskontext zeigt. Anders als in vielen klassenbasierten Sprachen hängt der Wert in JavaScript nicht davon ab, wo eine Funktion definiert wurde. Entscheidend ist, wie sie aufgerufen wird. Bei Pfeilfunktionen ist das anders.

Die wichtigsten Regeln:

Methodenaufruf obj.methode(): this ist obj.
Einfacher Funktionsaufruf fn(): Im Strict Mode (also auch in ES-Modulen und Klassen) ist this undefined, sonst das globale Objekt (globalThis).
Konstruktoraufruf new Fn(): this ist das neu erzeugte Objekt.
Explizite Bindung mit call(), apply() oder bind(): this ist das übergebene Objekt.
Pfeilfunktionen haben kein eigenes this. Sie übernehmen es lexikalisch aus dem umgebenden Gültigkeitsbereich.
DOM-Event-Handler, die als normale Funktion registriert werden, erhalten das Element, an dem der Listener hängt (event.currentTarget).

Auf oberster Ebene gilt: In einem klassischen Skript ist this das globale Objekt (im Browser window). In einem ES-Modul ist es undefined, in einem CommonJS-Modul von Node.js module.exports. In Klassen verweist this in Instanzmethoden und Klassenfeldern auf die Instanz, in statischen Methoden auf die Klasse selbst.

Rückgabewert

Typ

any

Beschreibung

Der aktuelle Kontextwert: ein Objekt, undefined (Strict Mode) oder im Strict Mode auch ein primitiver Wert, wenn einer per call/apply übergeben wurde.

Beispiele

Methodenaufruf und Verlust des Kontexts

'use strict';
const konto = {
  inhaber: 'Anna',
  gruss() {
    return `Hallo, ${this?.inhaber}`;
  }
};

console.log(konto.gruss());   // this === konto

const losgeloest = konto.gruss;
console.log(losgeloest());     // this === undefined

const gebunden = konto.gruss.bind(konto);
console.log(gebunden());

Hallo, Anna Hallo, undefined Hallo, Anna

Pfeilfunktion übernimmt this in Callbacks

class Zaehler {
  wert = 0;

  starten() {
    // Die Pfeilfunktion übernimmt this aus starten() → Instanz
    const id = setInterval(() => {
      this.wert++;
      console.log(`Wert: ${this.wert}`);
      if (this.wert === 3) clearInterval(id);
    }, 100);
  }
}

new Zaehler().starten();

Wert: 1 Wert: 2 Wert: 3

Explizite Bindung mit call und apply

function vorstellen(stadt, land) {
  return `${this.name} wohnt in ${stadt}, ${land}.`;
}

const person = { name: 'Ben' };

console.log(vorstellen.call(person, 'Wien', 'Österreich'));
console.log(vorstellen.apply(person, ['Zürich', 'Schweiz']));

Ben wohnt in Wien, Österreich. Ben wohnt in Zürich, Schweiz.

this in DOM-Event-Handlern

const button = document.querySelector('#speichern');

// Normale Funktion: this ist das Element mit dem Listener
button.addEventListener('click', function () {
  this.disabled = true;
  console.log(this === button);
});

// Pfeilfunktion: this stammt aus dem äußeren Bereich (im Modul undefined)
button.addEventListener('click', (event) => {
  console.log(event.currentTarget === button);
});

true true

// Wichtig · Fallstricke

Kontextverlust: Wird eine Methode als Callback übergeben, etwa setTimeout(obj.methode) oder arr.map(obj.methode), geht die Bindung an obj verloren. Abhilfe schaffen bind(), eine Pfeilfunktion als Hülle (() => obj.methode()) oder eine Pfeilfunktion als Klassenfeld.
Pfeilfunktionen als Objektmethoden sind meist ein Fehler: { f: () => this } verweist nicht auf das Objekt. Außerdem lässt sich this bei Pfeilfunktionen weder mit call/apply/bind noch mit new ändern.
Strict Mode vs. Sloppy Mode: Ohne Strict Mode zeigt this bei einfachen Aufrufen auf globalThis. Schreibzugriffe erzeugen dann unbemerkt globale Variablen. Primitive Werte werden in dem Fall in Objekte umgewandelt (Boxing).
Mit bind() gebundene Funktionen lassen sich nicht neu binden. Nur new kann die Bindung überschreiben.
In abgeleiteten Klassen darf this im Konstruktor erst nach super() verwendet werden. Sonst gibt es einen ReferenceError.
Für einen umgebungsunabhängigen Zugriff auf das globale Objekt verwendet man globalThis (ES2020) statt this auf oberster Ebene.
Die Grundregeln werden von allen Browsern unterstützt. Pfeilfunktionen und Klassenfelder setzen ES2015 bzw. ES2022 voraus.

Siehe auch

Function.prototype.bind() Function.prototype.call() Function.prototype.apply() new globalThis super