Detaillierte Erklärung des this-Zeigeproblems in JavaScript

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!

Das könnte Sie auch interessieren:
  • JavaScript-Grundlagen dieser Verweisung
  • Detaillierte Erklärung dieser Zeigerfunktion in JS
  • Detaillierte Erklärung dieser Referenz und benutzerdefinierter Eigenschaften in JavaScript
  • Detaillierte Erklärung der Funktionsklassifizierung und Beispiele für diese Zeigerfunktion in Javascript
  • Detaillierte Erklärung dieses Zeigeproblems in der JavaScript-Funktion
  • Detaillierte Erklärung des this-Pointing-Problems von JavaScript-Prototypobjekten

<<:  So installieren Sie Elasticsearch und Kibana in Docker

>>:  Der Unterschied zwischen distinct und group by in MySQL

Artikel empfehlen

Eine kurze Analyse der MySQL-Sicherung und -Wiederherstellung

Inhaltsverzeichnis 1. Einleitung 2. Einfache Defi...

Detaillierte Erklärung der CSS-Stylesheets und des Formatlayouts

Stilvorlagen CSS (Cascading Style Sheets) wird zu...

Detaillierte Erklärung, wie Angular mit unerwarteten Ausnahmefehlern umgeht

Vorne geschrieben Unabhängig davon, wie gut der C...

Javascript-Bereich und Abschlussdetails

Inhaltsverzeichnis 1. Geltungsbereich 2. Geltungs...

So deinstallieren Sie MySQL vollständig unter CentOS

Dieser Artikel dokumentiert die vollständige Dein...

Vue3 kapselt die Textskelett-Effektkomponente der Seitennavigation

Vue3-Projektkapselung Seitennavigation Textskelet...

So lösen Sie das Problem der Groß-/Kleinschreibung bei MySQL-Abfragen

Frage Als ich kürzlich ein praktisches Projekt mi...

Beheben von Problemen beim Importieren und Exportieren von Mysql

Hintergrund Da ich alle meine Aufgaben auf Docker...

5 Möglichkeiten zur Migration von MySQL zu ClickHouse

Die Datenmigration muss von MySQL nach ClickHouse...