this gehört zu den am meisten missverstandenen Konzepten in JavaScript, weil sein Wert NICHT davon abhängt, WO eine Funktion definiert wurde, sondern WIE sie AUFGERUFEN wird. Dieses Kapitel klärt alle vier Aufruf-Regeln systematisch.

Regel 1: Methodenaufruf – this ist das Objekt vor dem Punkt

const konto = {
  kontostand: 1500,
  zeigeKontostand() {
    console.log(this.kontostand); // 'this' ist 'konto', weil konto.zeigeKontostand() aufgerufen wird
  },
};

konto.zeigeKontostand(); // 1500

Regel 2: einfacher Funktionsaufruf – this ist undefined (im Strict Mode)

function zeigeThis() {
  console.log(this); // undefined - ES Modules laufen automatisch im Strict Mode
}

zeigeThis();

Die berüchtigte Falle: Wird eine Methode aus ihrem Objekt HERAUSGELÖST und separat aufgerufen, gilt NICHT mehr Regel 1, sondern Regel 2:

const konto = {
  kontostand: 1500,
  zeigeKontostand() {
    console.log(this.kontostand);
  },
};

const loseFunktion = konto.zeigeKontostand; // die Funktion wird 'herausgelöst'
loseFunktion(); // TypeError: Cannot read properties of undefined - 'this' ist NICHT mehr 'konto'!

Regel 3: explizite Bindung mit call, apply und bind

function zeigeKontostand() {
  console.log(this.kontostand);
}

const konto = { kontostand: 1500 };

zeigeKontostand.call(konto);   // 1500 - 'this' wird explizit auf 'konto' gesetzt, Argumente einzeln
zeigeKontostand.apply(konto);  // 1500 - identisch zu call, Argumente als Array

const gebundeneFunktion = zeigeKontostand.bind(konto); // 'this' PERMANENT gebunden
gebundeneFunktion(); // 1500 - funktioniert auch losgelöst, da 'this' fest gebunden ist

bind() ist die Lösung für das Callback-Problem aus Regel 2 – setTimeout(konto.zeigeKontostand.bind(konto), 1000) funktioniert korrekt, weil die zurückgegebene Funktion this unveränderlich in sich trägt.

Regel 4: Konstruktor-Aufruf mit new

Wird eine Funktion mit new aufgerufen, erzeugt JavaScript ein NEUES, leeres Objekt und setzt this darauf – Details dazu folgen in Kapitel 19, sobald wir class kennenlernen (das intern auf demselben Mechanismus basiert).

Arrow Functions: die elegantere moderne Lösung

Wie in Kapitel 9 gezeigt, haben Arrow Functions KEIN eigenes this – sie erben es lexikalisch vom umgebenden Scope. Damit lässt sich das Callback-Problem oft ELEGANTER als mit bind() lösen:

const konto = {
  kontostand: 1500,
  transaktionen: [100, -50, 200],

  zeigeAlleTransaktionen() {
    // Arrow Function als Callback: erbt 'this' von zeigeAlleTransaktionen(), also 'konto'
    this.transaktionen.forEach(betrag => {
      console.log(`${this.kontostand > 0 ? '✓' : '✗'} Buchung: ${betrag}`);
    });
  },
};

konto.zeigeAlleTransaktionen(); // 'this' bleibt in JEDEM Callback-Durchlauf korrekt 'konto'