Detaillierte Erklärung des this-Zeigeproblems in JavaScript

Zusammenfassen

• Globale Umgebung ➡️ Fenster
• Normale Funktion ➡️ Fenster oder undefiniert
• Konstruktor ➡️ Konstruierte Instanz
• Pfeilfunktion ➡️ diese im äußeren Bereich, wenn definiert
• Objektmethoden ➡️ Das Objekt
• call(), apply(), bind() ➡️ Der erste Parameter

Globale Umwelt

Unabhängig vom strengen Modus bezieht sich dies auf das Fensterobjekt.

console.log(dies === Fenster) // wahr

// Strenger Modus „use strict“
console.log(dies === Fenster) // wahr

Gewöhnliche Funktionen

1. Normaler Modus
   • Dies bezieht sich auf das Fensterobjekt
     

   Funktion test() {
     gib dieses === Fenster zurück
   }
   
   konsole.log(test()) // wahr
   

2. Strikter Modus
   • dieser Wert ist nicht definiert
     

   // Strenger Modus „use strict“
   
   Funktion test() {
     gib dies zurück === undefiniert
   }
   
   konsole.log(test()) // wahr
   

Konstruktor

Wenn eine Funktion als Konstruktor verwendet wird, verweist dies auf die erstellte Instanz.

Funktion Test() {
  diese.Nummer = 1
}

let test1 = neuer Test()

konsole.log(test1.nummer) // 1

Pfeilfunktionen

Wenn es sich bei der Funktion um eine Pfeilfunktion handelt, bezieht sich dies auf diesen Wert im vorherigen Bereich, als die Funktion definiert wurde.

lass test = () => {
  gib dieses === Fenster zurück
}

konsole.log(test()) // wahr

lass obj = {
  Anzahl: 1
}

Funktion foo() {
  zurückgeben () => {
    gib diese Nummer zurück
  }
}

lass test = foo.call(obj)

konsole.log(test()) // 1

Objektmethoden

Wenn eine Funktion als Methode eines Objekts verwendet wird, bezieht sich dies auf das Objekt.

lass obj = {
  Nummer: 1,
  getNumber() {
    gib diese Nummer zurück
  }
}

konsole.log(obj.getNumber()) // 1

aufrufen(), anwenden(), binden()

• Beim Aufrufen der Methode call() oder apply() einer Funktion zeigt das this der Funktion auf den ersten übergebenen Parameter.
• Wenn die bind()-Methode einer Funktion aufgerufen wird, zeigt das this der zurückgegebenen neuen Funktion auf den ersten übergebenen Parameter.

lass obj = {
  Anzahl: 1
}

Funktion test(num) {
  gib diese.Nummer + Nummer zurück
}

konsole.log(test.call(obj, 1)) // 2

console.log(test.anwenden(obj, [2])) // 3

lass foo = test.bind(obj, 3)
konsole.log(foo()) // 4

Dies ist das Ende dieses Artikels über den detaillierten Fall dieses Zeigeproblems in JavaScript. Weitere verwandte Inhalte zu diesem Zeigeproblem in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel unten weiter. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!