Was ist das Schlüsselwort 'this'?

this ist ein Schlüsselwort in JavaScript, das auf das Objekt verweist, im Kontext dessen der aktuelle Code ausgeführt wird. Sein Wert wird durch die Art des Funktionsaufrufs bestimmt.

Die Hauptarten, this zu definieren:

• Globaler Kontext: Außerhalb einer Funktion verweist this auf das globale Objekt (window im Browser, global in Node.js).
• Normale Funktionsaufrufe: Im Nicht-Strikt-Modus (strict mode) verweist this ebenfalls auf das globale Objekt (oder undefined, wenn die Funktion als Methode eines Objekts aufgerufen wird, aber dieses Objekt null oder undefined ist). Im Strikt-Modus ist this gleich undefined.
• Objektmethode: Wird die Funktion als Methode eines Objekts aufgerufen (also über den Punkt-Operator .), verweist this auf das Objekt, das die Methode besitzt.
• Konstruktor: Bei Verwendung des new-Operators verweist this auf die neu erstellte Instanz des Objekts.
• call(), apply(), bind()-Methoden: Diese Methoden erlauben es, den Wert von this explizit beim Funktionsaufruf festzulegen. bind() gibt eine neue Funktion zurück, bei der this gebunden ist, während call() und apply() die Funktion mit dem angegebenen this aufrufen.
• Arrow-Funktionen: Arrow-Funktionen haben kein eigenes this. this in einer Arrow-Funktion wird lexikalisch aus dem umgebenden Kontext geerbt, in dem sie definiert wurde.

Beispiele:

// Globaler Kontext
console.log(this === window); // true (im Browser)

// Normale Funktionsaufrufe
function myFunction() {
  console.log(this);
}
myFunction(); // window (im Nicht-Strikt-Modus)

// Objektmethode
const myObject = {
  myMethod: function() {
    console.log(this);
  }
};
myObject.myMethod(); // myObject

// Konstruktor
function MyConstructor() {
  this.value = 10;
  console.log(this);
}
const instance = new MyConstructor(); // Instanzobjekt

// call(), apply(), bind()
function greet(name) {
  console.log("Hello, " + name + "! My name is " + this.name);
}
const person = { name: "Alice" };
greet.call(person, "Bob"); // Hello, Bob! My name is Alice
greet.apply(person, ["Bob"]); // Hello, Bob! My name is Alice
const boundGreet = greet.bind(person);
boundGreet("Bob"); // Hello, Bob! My name is Alice

// Pfeilfunktion
const arrowFunction = () => {
  console.log(this);
};
arrowFunction(); // window (wenn im globalen Kontext definiert)

Das Verständnis, wie this in verschiedenen Kontexten bestimmt wird, ist entscheidend für das Schreiben korrekten JavaScript-Codes.