Warum sich das Schlüsselwort „this' in regulären Funktionen und Pfeilfunktionen unterschiedlich verhält

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 davon hängt in diesen Funktionen davon ab, wie die Funktion aufgerufen wird. Hier einige Beispiele:

1. Globaler Kontext

• Nicht-strenger Modus:

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

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

• Erklärung: 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

• Erklärung: 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

• Erklärung:In diesem Fall verweist dies auf obj, da die Funktion als Methode von obj aufgerufen wird.

  • Strikter 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"

• Erklärung: 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.

  • Strikter 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

• Erklärung: Aufrufen und Anwenden ruft sofort die Funktion auf, wobei dieses auf obj gesetzt ist, während bind eine neue Funktion erstellt, bei der dieses dauerhaft an obj gebunden ist.

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

Pfeilfunktionen

Pfeilfunktionen, die in ES6 eingeführt wurden, haben keinen eigenen 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-strenger 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

• Erklärung: 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

• Erklärung: 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

• Erklärung:In diesem Fall bezieht sich diese Funktion innerhalb der Pfeilfunktion auf dasselbe wie in der äußeren Funktion, die obj. ist.

  • Strikter 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.

• Example:

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

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

• Explanation: The arrow function does not bind this to the button element; it inherits it from the surrounding scope, which is the global scope or undefined in strict mode.

  • Strict Mode: Logs undefined, not the button element.

Why These Differences?

The difference between regular functions and arrow functions lies in how they handle this:

• Regular Functions: The value of this is dynamic and determined by the call-site (how the function is called).
• Arrow Functions: The value of this is lexical and set at the time the function is defined, based on the this value of the enclosing execution context.

Key Concepts to Understand

To understand the behavior of this in JavaScript, you need to know the following concepts:

1. Execution Context: The context in which code is executed, affecting how this is determined.
2. Call-site: The location in code where a function is called, influencing the value of this in regular functions.
3. Lexical Scoping: How this is inherited in arrow functions from the surrounding scope.
4. Strict Mode: How strict mode changes the default behavior of this in certain contexts.

Summary

• Regular Functions: this is dynamic and determined by the call-site.
• Arrow Functions: this is lexical and determined by the surrounding scope when the function is defined.

Understanding these distinctions will help you write more predictable and maintainable JavaScript code. Whether you're using regular functions or arrow functions, knowing how this works is crucial for effective JavaScript development.

Das obige ist der detaillierte Inhalt vonWarum sich das Schlüsselwort „this' in regulären Funktionen und Pfeilfunktionen unterschiedlich verhält. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!