Wovon hängt der Wert des Ausführungskontexts von…

Der Wert von this in JavaScript hängt davon ab, wie die Funktion aufgerufen wird. Die wichtigsten Szenarien:

Globaler Kontext: Außerhalb von Funktionen im strikten Modus ('use strict') ist this undefined. Ohne strikten Modus ist es das globale Objekt (window im Browser, global in Node.js).

Aufruf einer Objektmethode: this zeigt auf das Objekt, dem die aufgerufene Methode gehört.

const obj = {
  prop: 'Wert',
  method: function() {
    // this === obj
    console.log(this.prop);
  }
};
obj.method();

Normale Funktionsaufrufe: Im strikten Modus ist this undefined. Ohne strikten Modus ist es das globale Objekt.

function myFunction() {
  // im strikten Modus ist this === undefined
  // ohne strikten Modus ist this === window (im Browser)
  console.log(this);
}
myFunction();

Konstruktor (new): Bei Verwendung des Operators new mit einer Konstruktorfunktion verweist this innerhalb der Funktion auf das neu erstellte Objekt.

function MyClass(name) {
  this.name = name; // this === neues Objekt
}
const instance = new MyClass('test');
// instance.name === 'test'

Explizite Bindung (call, apply, bind): Die Methoden call, apply und bind erlauben es, den Wert von this explizit festzulegen.
- call(thisArg, arg1, arg2, ...): Ruft die Funktion auf, setzt this auf thisArg und übergibt Argumente einzeln.
- apply(thisArg, [argsArray]): Ruft die Funktion auf, setzt this auf thisArg und übergibt Argumente als Array.
- bind(thisArg): Gibt eine neue Funktion zurück, bei der this dauerhaft gebunden ist.
```
const anotherObj = { value: 42 };
function showValue() {
  console.log(this.value);
}
showValue.call(anotherObj); // Gibt 42 aus
```

Arrow-Funktionen (=>): Arrow-Funktionen haben kein eigenes this. Der Wert von this innerhalb einer Arrow-Funktion erbt vom lexikalischen Kontext, in dem sie definiert wurde.

const outerObj = {
  name: 'Outer',
  method: function() {
    const arrowFunc = () => {
      // this wird von method geerbt, das als Methode von outerObj aufgerufen wird
      console.log(this.name);
    };
    arrowFunc();
  }
};
outerObj.method(); // Gibt 'Outer' aus

const anotherArrowFunc = () => {
    // this wird vom globalen Kontext geerbt (oder undefined im strikten Modus)
    console.log(this);
};
anotherArrowFunc();

DOM-Event-Handler: In den meisten Fällen verweist this im Event-Handler auf das DOM-Element, auf dem das Ereignis ausgelöst wurde.

// Beispiel im Browser
const button = document.querySelector('button');
button.addEventListener('click', function() {
  // this === button
  console.log(this.tagName);
});

Das Verständnis dieser Mechanismen ist entscheidend für die korrekte Verwendung von this in JavaScript.

Wovon hängt der Wert des Ausführungskontexts von `this` in JavaScript ab?