Detaillierte Erklärung dieses Zeigeproblems in JavaScript

Vorwort

Glauben Sie mir, solange Sie sich an die 7️⃣ Schritte in diesem Artikel erinnern, können Sie diese Referenz in JS gründlich beherrschen.

Sagen Sie zuerst die Formel auf: Pfeilfunktion, neu, binden, anwenden und aufrufen, Objekt, direkter Aufruf, nicht in Funktion.

Anhand der Reihenfolge der Formel können Sie, sofern eines der vorherigen Szenarien zutrifft, feststellen, worauf dies hinweist.

Als nächstes werden wir sie in der Reihenfolge der Formeln ausführlich erklären. Die Beispielcodes im Artikel werden alle in der Chrome-Konsole ausgeführt.

Am Ende des Artikels finden Sie sorgfältig vorbereitete Übungen, mit denen Sie Ihre Lernergebnisse testen können. Vergessen Sie nicht, sie auszuprobieren~

1. Pfeilfunktionen

Die Pfeilfunktion hat den ersten Rang, da sie nicht geändert wird. Solange es sich bei der aktuellen Funktion um eine Pfeilfunktion handelt, müssen also keine anderen Regeln beachtet werden.

Das „this“ einer Pfeilfunktion ist die Referenz des äußeren „this“, wenn es erstellt wird. Hier gibt es zwei wichtige Punkte:

1. Wenn eine Pfeilfunktion erstellt wird, wird ihr this-Zeiger bestimmt.
2. Dies innerhalb der Pfeilfunktion bezieht sich auf das äußere Dies.

Um dieses der Pfeilfunktion zu kennen, müssen Sie daher zuerst die Richtung des äußeren Dies kennen und dann die Sieben-Schritte-Formel in der äußeren Ebene weiter anwenden.

2. neu

Wenn eine Funktion mit dem neuen Schlüsselwort aufgerufen wird, muss „this“ in der Funktion ein neues, von JS erstelltes Objekt sein.

Die Leser fragen sich möglicherweise: „Wenn die Pfeilfunktion mit dem neuen Schlüsselwort aufgerufen wird, wird dann das this der Pfeilfunktion geändert?“

Versuchen wir es auf der Konsole.

Funktion = () => {}
neue Funktion () // Fehler ausgeben

Wie aus der Konsole ersichtlich ist, können Pfeilfunktionen nicht als Konstruktoren verwendet werden und daher nicht mit „new“ ausgeführt werden.

3. binden

bind bezieht sich auf Function.prototype.bind().

Bei mehrmaligem Binden wird nur der Wert des ersten Bindens erkannt

Fehleranfällige Punkte

Funktion func() {
  console.log(dies)
}

func.bind(1).bind(2)() // 1

Dies wird in Pfeilfunktionen nicht geändert

binden und neu

Fehleranfällige Punkte

Funktion func() {
  Konsole.log(dies, dies.__proto__ === Funktion.Prototyp)
}

boundFunc = func.bind(1)
new boundFunc() // Objekt true, Formel 2 hat Vorrang

4. Bewerben und anrufen

Der erste Parameter von apply() und call() ist dieser. Der Unterschied besteht darin, dass beim Aufruf von apply die tatsächlichen Parameter in einem Array platziert werden, während beim Aufruf von call die tatsächlichen Parameter durch Kommas getrennt sind.

Dies wird in Pfeilfunktionen nicht geändert

Fehleranfällige Punkte

Funktion = () => {
  //Hier zeigt this auf das äußere this, siehe Formel 7 „nicht in der Funktion“
  console.log(dies)
}

func.apply(1) // Fenster, Formel 1 hat Vorrang

Dies wird in der Bind-Funktion nicht geändert

Fehleranfällige Punkte

Funktion func() {
  console.log(dies)
}

boundFunc = func.bind(1)
boundFunc.apply(2) // 1, Formel 3 hat Vorrang

5. Obi-Punkt (Obj.)

Funktion func() {
  konsole.log(dieses.x)
}

obj = { x: 1 }
obj.func = Funktion
obj.func() // 1

Es ist nicht nötig, hier Code zu verwenden, um zu veranschaulichen, dass Pfeilfunktionen und Bind-Funktionen eine höhere Priorität haben. Wenn Sie interessiert sind, können Sie es selbst ausprobieren.

6. Direktanruf

Wenn die Funktion das vorherige Szenario nicht erfüllt und direkt aufgerufen wird, wird auf das globale Objekt verwiesen. In der Browserumgebung ist das globale Objekt „Window“ und in der Node.js-Umgebung ist es „Global“.

Beginnen wir mit einem einfachen Beispiel.

Funktion func() {
  console.log(dies)
}

func() // Fenster

Nehmen wir ein kompliziertes Beispiel, bei dem die OuterFunc in der äußeren Schicht einem verwirrenden Zweck dient.

Funktion äußereFunktion() {
  console.log(dies) // { x: 1 }

  Funktion func() {
    console.log(dieses) // Fenster
  }

  Funktion()
}

outerFunc.bind({ x: 1 })()

7. Nicht in einer Funktion

Szenarien, die nicht in Funktionen enthalten sind, können in Browser-<script/>-Tags oder Node.js-Moduldateien unterteilt werden.

1. Im Tag <script /> bezieht sich dies auf Window.
2. In einer Node.js-Moduldatei bezieht sich dies auf das Standardexportobjekt des Moduls, nämlich module.exports.

Nicht strikter Modus

Der strikte Modus wurde in ES5 eingeführt. Vor der ES5-Spezifikation, d. h. im nicht strengen Modus, durfte dies nicht undefiniert oder null sein. **Wenn also im nicht strengen Modus durch die obigen sieben Schritte festgestellt wird, dass dies auf „undefiniert“ oder „null“ verweist, dann verweist dies auf das globale Objekt. **In der Browserumgebung ist das globale Objekt „Window“ und in der Node.js-Umgebung ist es „Global“.

Beispielsweise bezieht sich dies im folgenden Code im nicht strikten Modus auf das globale Objekt.

Funktion a() {
  console.log("Funktion a:", dies)
  ;(() => {
    console.log("Pfeilfunktion: ", diese)
  })()
}

A()

a.bind(null)()

a.binden(undefiniert)()

a.binden().binden(2)()

a.anwenden()

Das Ergebnis der Ausführung im nicht strikten Modus ist:

Führen Sie im strikten Modus denselben Code zum Vergleich aus. Denken Sie daran, den gesamten Code auf einmal zu kopieren und in die Konsole einzufügen, um ihn im strengen Modus auszuführen (da die erste Zeile „use strict“ sich auf den folgenden Code auswirkt).

"streng verwenden"

Funktion a() {
  console.log("Funktion a:", dies)
  ;(() => {
    console.log("Pfeilfunktion: ", diese)
  })()
}

A()

a.bind(null)()

a.binden(undefiniert)()

a.binden().binden(2)()

a.anwenden()

Das Ergebnis der Ausführung im strikten Modus ist:

Die Formel mit sieben Schritten ist sowohl im strengen als auch im nicht strengen Modus vollständig, mit der Ausnahme, dass im nicht strengen Modus „null“ oder „undefiniert“ in das globale Objekt konvertiert wird. Deshalb habe ich dies nicht in die Tipps aufgenommen.

Wiederholungsfragen

Sagen Sie zuerst die Formel auf und beantworten Sie dann die Fragen: „Pfeilfunktion, neu, binden, anwenden und aufrufen, Objekt, direkter Aufruf, nicht in Funktion“.

1. Was ist der Wert von func.count, nachdem der folgende Code ausgeführt wurde?

Funktion func(num) {
  dies.zählen++
}

Funktion.Anzahl = 0
Funktion(1)

Antwort

func.count ist 0.

Der Aufruf von func() gehört gemäß der Formel zur 6. Kategorie „Direktaufruf“. Im nicht strikten Modus bezieht sich dies auf das globale Objekt. dies hat nichts mit func zu tun, daher bleibt func.count unverändert. so einfach.

2. Auf wen zeigt die folgende Pfeilfunktion?

obj = {
  Funktion() {
    const Pfeilfunktion = () => {
      console.log(dieser._name)
    }

    Pfeilfunktion zurückgeben
  },

  _name: "Objekt",
}

obj.func()()

Funktion = Objekt.Funktion
Funktion()()

obj.func.bind({ _name: "newObj" })()()

obj.func.bind()()()

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })()

Antwort

// Objekt
// undefiniert
//neuesObjekt
// undefiniert
// bindObj

Es ist ganz einfach, nicht wahr? Haben Sie es aufgegeben, es zu lernen?

Zusammenfassen

Dies ist das Ende dieses Artikels über das this-Pointing-Problem in JavaScript. Weitere relevante Inhalte zu this-Pointing in js finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!