Bezieht sich der \"this\"-Operator in JavaScript immer auf das beabsichtigte Objekt?

Inkonsistentes Verhalten des „this“-Operators in JavaScript

Der „this“-Operator in JavaScript kann aufgrund seiner sich ändernden Referenz ein inkonsistentes Verhalten aufweisen Werte abhängig vom Aufrufkontext. Dies kann besonders problematisch sein, wenn Methoden eines Objekts als Rückruffunktionen verwendet werden.

Aufrufmuster und „dies“

JavaScript-Funktionen können auf vier Arten aufgerufen werden:

1. Als Methode: Wenn es als Methode innerhalb eines Objekts aufgerufen wird, bezieht sich „this“ auf das Objekt selbst.

   const obj = {
     method() {
    console.log(this); // Logs the object
     },
   };
   
   obj.method();

2. Als Funktion: Beim Aufruf ohne spezifischen Kontext bezieht sich „this“ auf das globale Objekt, typischerweise das Fensterobjekt in einem Browser.

   function fn() {
     console.log(this); // Logs the window object
   }
   
   fn();

3. Als Konstruktor: Beim Aufruf mit dem Schlüsselwort new bezieht sich „this“ auf eine neu erstellte Instanz der Klasse.

   class MyClass {
     constructor() {
    console.log(this); // Logs an instance of MyClass
     }
   }
   
   new MyClass();

4. Mit der apply-Methode: Rückrufe verwenden dieses Aufrufmuster. „this“ kann angegeben werden, indem das erste Argument als Referenzobjekt übergeben wird.

   const obj = {
     method() {
    console.log(this); // Logs the object
     },
   };
   
   const fn = obj.method.bind(obj);
   fn(); // Logs the object

Inkonsistentes Verhalten bei Rückrufen

Die Inkonsistenz entsteht, wenn Methoden eines Objekts als Callback-Funktionen verwendet werden. Da Rückrufe als Funktionen aufgerufen werden, würde „this“ auf das globale Objekt verweisen. Es wird jedoch erwartet, dass es sich auf das Objekt bezieht, zu dem die Methode gehört.

Best Practices

Um diese Inkonsistenz zu vermeiden, werden die folgenden Best Practices empfohlen:

• Behalten Sie „dies“ bei. Referenz: Verwenden Sie die Bindungsmethode, um „dies“ explizit an das gewünschte Objekt zu binden, bevor Sie die Methode als Rückruf übergeben.

  const obj = {
  method() {
    console.log(this); // Logs the object
  },
  };
  
  const fn = obj.method.bind(obj);
  setTimeout(fn, 1000); // Logs the object

• Pfeilfunktionen verwenden: Pfeilfunktionen haben einen impliziten lexikalischen Gültigkeitsbereich, was bedeutet, dass sie die „this“-Bindung vom umgebenden Kontext erben. Dadurch entfällt die Notwendigkeit einer expliziten Bindung.

  const obj = {
  method: () => {
    console.log(this); // Logs the object
  },
  };
  
  setTimeout(obj.method, 1000); // Logs the object

Das obige ist der detaillierte Inhalt vonBezieht sich der \"this\"-Operator in JavaScript immer auf das beabsichtigte Objekt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!