Das Schlüsselwort this in JavaScript kann verwirrend sein, da es sich in regulären Funktionen und Pfeilfunktionen unterschiedlich verhält. In diesem Blogbeitrag erklären wir, wie dies bei beiden Funktionstypen funktioniert, erforschen, warum es diese Unterschiede gibt, und vermitteln das Grundwissen, das Sie benötigen, um dies in JavaScript zu verstehen.

Reguläre Funktionen

Reguläre Funktionen in JavaScript werden mit dem Schlüsselwort function definiert. Der Wert dieser Funktion hängt davon ab, wie die Funktion aufgerufen wird. Hier einige Beispiele:

1. Globaler Kontext

• Nicht-strikter Modus:

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs the global object (window in browsers)

• Erläuterung: Wenn im nicht-strikten Modus eine Funktion im globalen Kontext (nicht als Methode eines Objekts) aufgerufen wird, bezieht sich dies auf das globale Objekt (Fenster in Browsern oder global in Node .js).

  • Strikter Modus:

  'use strict';

  function regularFunction() {
      console.log(this);
  }

  regularFunction(); // Logs undefined

• Erläuterung: Im strikten Modus bleibt dies undefiniert, wenn eine Funktion im globalen Kontext aufgerufen wird, was eine sicherere Umgebung bietet, indem versehentliche Änderungen am globalen Objekt verhindert werden.

2. Methodenaufruf

Wenn eine Funktion als Methode eines Objekts aufgerufen wird, bezieht sich dies auf dieses Objekt.

• Beispiel:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• Erläuterung: In diesem Fall zeigt dies auf obj, da die Funktion als Methode von obj aufgerufen wird.

  • Strenger Modus: Das Verhalten bleibt im strikten Modus gleich.

3. Konstruktoraufruf

Wenn eine Funktion als Konstruktor verwendet wird (aufgerufen mit dem Schlüsselwort new), bezieht sich dies auf die neu erstellte Instanz.

• Beispiel:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• Erläuterung: Beim Aufruf mit new bezieht sich dies innerhalb der Person-Konstruktorfunktion auf die neue Instanz, die erstellt wird. Jede neue Instanz (Person1 und Person2) erhält ihre eigene Namenseigenschaft und ihre eigene sayHello-Methode.

  • Strenger Modus: Das Verhalten bleibt im strikten Modus gleich.

4. Explizite Bindung

Sie können dies explizit mit call, apply oder bind binden.

• Beispiel:

  function regularFunction() {
      console.log(this);
  }

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• Erläuterung: Durch Aufrufen und Anwenden wird die Funktion sofort aufgerufen, wobei dieser Wert auf obj festgelegt ist, während bind eine neue Funktion erstellt, wobei dieser Wert dauerhaft an obj gebunden ist.

  • Strenger Modus: Das Verhalten bleibt im strikten Modus gleich.

Pfeilfunktionen

Pfeilfunktionen, die in ES6 eingeführt wurden, haben keinen eigenen this-Kontext. Stattdessen erben sie dies vom umgebenden (lexikalischen) Bereich. Dies macht Pfeilfunktionen in bestimmten Situationen nützlich.

1. Lexikalisches Dies

Pfeilfunktionen erben dies von dem Bereich, in dem sie definiert sind.

• Nicht-strikter Modus:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• Erklärung: Pfeilfunktionen haben kein eigenes this; Sie nutzen dies aus dem umgebenden Bereich. Hier bezieht es sich auf das globale Objekt, da die Funktion im globalen Bereich definiert ist.

  • Strikter Modus:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• Erläuterung: Wenn im strikten Modus der umgebende Bereich global ist, bleibt dieser undefiniert, da er vom umgebenden Bereich geerbt wird.

2. Methodenaufruf

Im Gegensatz zu regulären Funktionen erhalten Pfeilfunktionen kein eigenes This, wenn sie als Methoden aufgerufen werden. Sie erben dies vom umschließenden Bereich.

• Beispiel:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• Erläuterung: Pfeilfunktionen binden ihr eigenes this nicht, sondern erben es vom lexikalischen Bereich. In diesem Beispiel bezieht sich dies auf das globale Objekt oder undefiniert im strikten Modus, nicht auf obj.

  • Strikter Modus: Protokolliert undefiniert, nicht obj.

3. Pfeilfunktion innerhalb einer anderen Funktion

Wenn eine Pfeilfunktion innerhalb einer anderen Funktion definiert wird, erbt sie diese von der äußeren Funktion.

• Beispiel:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• Erläuterung: In diesem Fall bezieht sich dies innerhalb der Pfeilfunktion auf dasselbe wie in der äußeren Funktion, nämlich obj.

  • Strenger Modus: Das Verhalten bleibt im strikten Modus gleich.

4. Pfeilfunktion in Event-Handlern

Pfeilfunktionen in Ereignishandlern erben dies vom umgebenden lexikalischen Bereich, nicht von dem Element, das das Ereignis auslöst.

• Beispiel:

  const button = document.querySelector('button');

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• Erläuterung: Die Pfeilfunktion bindet dies nicht an das Schaltflächenelement; es erbt es vom umgebenden Bereich, der der globale Bereich ist oder im strikten Modus undefiniert ist.

  • Strikter Modus: Protokolliert undefiniert, nicht das Schaltflächenelement.

Warum diese Unterschiede?

Der Unterschied zwischen regulären Funktionen und Pfeilfunktionen liegt darin, wie sie damit umgehen:

• Reguläre Funktionen: Der Wert davon ist dynamisch und wird durch die Aufrufstelle bestimmt (wie die Funktion aufgerufen wird).
• Pfeilfunktionen: Der Wert davon ist lexikalisch und wird zum Zeitpunkt der Definition der Funktion basierend auf dem Wert dieses Werts des umschließenden Ausführungskontexts festgelegt.

Schlüsselkonzepte, die es zu verstehen gilt

Um das Verhalten davon in JavaScript zu verstehen, müssen Sie die folgenden Konzepte kennen:

1. Ausführungskontext: Der Kontext, in dem Code ausgeführt wird, und beeinflusst, wie dies bestimmt wird.
2. Call-site: Die Stelle im Code, an der eine Funktion aufgerufen wird, was den Wert dieser Funktion in regulären Funktionen beeinflusst.
3. Lexikalisches Scoping: Wie dies in Pfeilfunktionen vom umgebenden Bereich geerbt wird.
4. Strikter Modus: Wie der strikte Modus das Standardverhalten davon in bestimmten Kontexten ändert.

Zusammenfassung

• Reguläre Funktionen: Dies ist dynamisch und wird von der Aufrufseite bestimmt.
• Pfeilfunktionen: Dies ist lexikalisch und wird durch den umgebenden Bereich bestimmt, wenn die Funktion definiert wird.

Das Verständnis dieser Unterschiede wird Ihnen helfen, vorhersehbareren und wartbareren JavaScript-Code zu schreiben. Unabhängig davon, ob Sie reguläre Funktionen oder Pfeilfunktionen verwenden, ist es für eine effektive JavaScript-Entwicklung von entscheidender Bedeutung zu wissen, wie dies funktioniert.