Was ist der Kontext in JavaScript?

Der Kontext (this) in JavaScript ist eine Referenz auf das Objekt, in dessen Kontext die aktuelle Funktion ausgeführt wird. Sein Wert wird bestimmt, wie die Funktion aufgerufen wurde, nicht wo sie definiert wurde.

Hauptmethoden zur Bestimmung des Kontexts:

• Globaler Kontext: Außerhalb von Funktionen, im Nicht-Strikt-Modus, verweist this auf das globale Objekt (window im Browser, global in Node.js). Im Strikt-Modus ist this undefined.

  // Nicht-Strikt-Modus (im Browser)
  console.log(this === window); // true
  
  // Strikt-Modus
  "use strict";
  console.log(this === undefined); // true
  

• Methode eines Objekts: Wenn eine Funktion als Methode eines Objekts aufgerufen wird (obj.method()), verweist this innerhalb der Funktion auf dieses Objekt (obj).

  const user = {
      name: "John",
      greet: function() {
          console.log("Hello, " + this.name);
      }
  };
  user.greet(); // Ausgabe: Hello, John (this verweist auf user)
  

• Funktionsaufruf (call, apply, bind): Die Methoden call und apply rufen die Funktion mit einem explizit angegebenen Kontext auf. bind erstellt eine neue Funktion mit festem Kontext.

  function sayName(greeting) {
      console.log(greeting + ", " + this.name);
  }
  
  const person = { name: "Peter" };
  
  sayName.call(person, "Hi"); // Ausgabe: Hi, Peter (this = person)
  sayName.apply(person, ["Hello"]); // Ausgabe: Hello, Peter (this = person)
  
  const boundSayName = sayName.bind(person, "Hey");
  boundSayName(); // Ausgabe: Hey, Peter (this = person)
  

• Konstruktor (new): Beim Aufruf einer Funktion mit dem Operator new wird ein neues leeres Objekt erstellt, und this innerhalb der Konstruktorfunktion verweist auf dieses neue Objekt.

  function Person(name) {
      this.name = name;
  }
  
  const john = new Person("John");
  console.log(john.name); // Ausgabe: John (this innerhalb von Person verweist auf john)
  

• Arrow-Funktionen: Arrow-Funktionen haben keinen eigenen Kontext. this innerhalb einer Arrow-Funktion wird aus der äußeren (lexikalischen) Umgebung übernommen, in der die Funktion erstellt wurde.

  const user = {
      name: "Alice",
      greet: function() {
          const innerGreet = () => {
              console.log("Hello, " + this.name); // this wird aus greet übernommen (verweist auf user)
          };
          innerGreet();
      }
  };
  user.greet(); // Ausgabe: Hello, Alice
  

Das Verständnis, wie this bestimmt wird, ist entscheidend für die korrekte Arbeit mit Objekten, Methoden und Ereignis-Handlern in JavaScript.