Woher kommt der Kontext der Funktion in JavaScript…

Der Ausführungs- (oder this) Kontext in JavaScript wird zum Zeitpunkt des Funktionsaufrufs bestimmt, nicht zum Zeitpunkt ihrer Deklaration. Die folgenden Faktoren beeinflussen seinen Wert:

Globaler Kontext: Außerhalb von Funktionen verweist this auf das globale Objekt (im Browser window, in Node.js global). Im Strict Mode ('use strict') ist this in diesem Fall undefined.
```
// Im Browser
console.log(this); // window

// In Node.js
console.log(this); // global
```
Aufruf einer Objektmethode: Wenn eine Funktion als Methode eines Objekts aufgerufen wird (über Punktnotation), verweist this auf dieses Objekt.
```
const obj = {
  name: 'Obj',
  method: function() {
    console.log(this.name);
  }
};
obj.method(); // Obj
```
"Normale" Funktionsaufrufe: Bei einem einfachen Funktionsaufruf (nicht als Methode) verweist this im Nicht-Strict-Modus auf das globale Objekt. Im Strict Mode ist this undefined.
```
function greet() {
  console.log(this);
}
greet(); // window (im Nicht-Strict-Modus) oder undefined (im Strict Mode)
```
Konstruktor (mit new): Wenn eine Funktion mit dem Schlüsselwort new aufgerufen wird, wirkt sie als Konstruktor. this innerhalb der Funktion verweist auf die neu erstellte Instanz des Objekts.
```
function Person(name) {
  this.name = name;
}
const person1 = new Person('Alice');
console.log(person1.name); // Alice
```
Methoden call, apply, bind: Diese Methoden erlauben es, explizit den Wert von this für eine Funktion festzulegen.
- call und apply rufen die Funktion sofort auf, wobei this als erstes Argument übergeben wird. call akzeptiert die restlichen Argumente einzeln, apply in Form eines Arrays.
- bind gibt eine neue Funktion zurück, bei der this dauerhaft an das erste Argument "gebunden" ist.
```
const anotherObj = { name: 'Another Obj' };

function displayContext() {
  console.log(this.name);
}

displayContext.call(anotherObj); // Another Obj
displayContext.apply(anotherObj); // Another Obj

const boundFunction = displayContext.bind(anotherObj);
boundFunction(); // Another Obj
```

Arrow-Funktionen: Arrow-Funktionen haben kein eigenes this. Sie "fangen" den Wert von this aus der lexikalischen Umgebung ein, in der sie deklariert wurden. Das macht sie nützlich für Callbacks innerhalb von Methoden oder bei der Arbeit mit DOM-Events.

const objWithArrow = {
  name: 'Arrow Obj',
  method() {
    const arrowFunc = () => {
      console.log(this.name); // `this` wird aus `method` (objWithArrow) übernommen
    };
    arrowFunc();
  }
};
objWithArrow.method(); // Arrow Obj

// Vergleich mit einer normalen Funktion
const objWithRegular = {
  name: 'Regular Obj',
  method() {
    const regularFunc = function() {
      console.log(this); // `this` wird window oder undefined (im Strict Mode) beim Aufruf in diesem Kontext
    };
    regularFunc();
  }
};
objWithRegular.method(); // window (oder undefined)

Die Definition des Kontexts ist eine der Schlüsselmerkmale von JavaScript, und das Verständnis dieser Regeln ist wesentlich für die korrekte Arbeit mit Funktionen und Objekten.

Woher kommt der Kontext der Funktion in JavaScript?