Detaillierte Erklärung dieses Zeigeproblems in JavaScript

Vorwort

Der This-Zeiger in JS hat Anfängern schon immer Kopfschmerzen bereitet. Sehen wir uns heute an, was passiert ist, als dies auf den Boden fiel, und sprechen wir ausführlich über das Prinzip der Anzeige dieser Anzeige, sodass wir uns darüber keine Gedanken mehr machen müssen.

Einführung

Zunächst einmal wissen wir alle, dass dies ein Schlüsselwort in der Sprache Javascript ist.

Es stellt ein internes Objekt dar, das automatisch bei Ausführung der Funktion generiert wird und nur innerhalb der Funktion verwendet werden kann. Der Wert ändert sich je nachdem, wo die Funktion verwendet wird. Es gibt jedoch ein allgemeines Prinzip, nämlich, dass die Richtung von this nicht bestimmt werden kann, wenn die Funktion definiert wird. Erst wenn die Funktion ausgeführt wird, kann bestimmt werden, auf wen this tatsächlich zeigt. Tatsächlich zeigt this letztendlich auf das Objekt, das die Funktion aufruft, in der es sich befindet. Lassen Sie uns dieses Problem Schritt für Schritt untersuchen.

Entdecken Sie One

Funktion a() {
  var user = "Gedämpfter Marmorkarpfen";
  console.log(dieser.Name); //undefiniert
  console.log(dieses); //Fenster
 }
 A();
 window.a(); //Die beiden Ergebnisse sind gleich

Wie oben erwähnt, zeigt dies letztendlich auf das Objekt, das die Funktion aufruft, in der es sich befindet. Hier wird a tatsächlich vom Fensterobjekt angezeigt.

Erkundung 2

var obj = {
  Name: 'Gedämpfter Dickkopffisch',
  f1: Funktion () {
   console.log(this.name); //Gedämpfter Marmorkarpfen}
 };
 obj.f1();

Es ist wichtig, noch einmal zu betonen, dass die Richtung von this nicht bestimmt werden kann, wenn die Funktion definiert wird. Erst wenn die Funktion ausgeführt wird, können wir feststellen, auf wen this zeigt. In diesem Beispiel wird die f1-Funktion, in der sich this befindet, vom obj-Objekt aufgerufen, daher zeigt this hier auf das obj-Objekt.

Erkundung Drei

Wenn Sie dies vollständig verstehen möchten, müssen Sie sich die folgenden Beispiele ansehen.

var obj = {
  eine: 5,
  B: {
   eine: 10,
   fn: Funktion () {
    konsole.log(diese.a); //10
   }
  }
 };
 obj.b.fn();

Bedeutet dies nicht, dass sich dies letztlich auf das Objekt bezieht, das die Funktion aufruft, in der es sich befindet? Warum zeigt dies nicht auf das Obj-Objekt?

Drei Punkte müssen hier noch ergänzt werden:

1. Wenn eine Funktion dies hat, aber nicht vom übergeordneten Objekt aufgerufen wird, bezieht sich dies auf das Fenster.
2. Wenn eine Funktion über dies verfügt und von einem Objekt auf der vorherigen Ebene aufgerufen wird, dann bezieht sich dies auf das Objekt auf der vorherigen Ebene.
3. Wenn eine Funktion über dies verfügt und mehrere Objekte enthält, zeigt dies, obwohl die Funktion vom äußersten Objekt aufgerufen wird, nur auf das Objekt eine Ebene darüber.

Wenn man das sieht, glaube ich, dass jeder das Prinzip dieses Zeigens grundsätzlich verstanden hat. Ich wiederhole es noch einmal: Das Zeigen von this kann nicht bestimmt werden, wenn die Funktion definiert wird. Erst wenn die Funktion ausgeführt wird, können wir bestimmen, auf wen this tatsächlich zeigt. Tatsächlich zeigt this letztendlich auf das Objekt, das die Funktion aufruft, in der es sich befindet.

Hier sind einige verschiedene Anwendungsszenarien für dieses

Konstruktor (neues Schlüsselwort)

Funktion Student() {
  this.name = 'Gedämpfter Dickkopffisch';
 }
 var s1 = neuer Student();
 console.log(s1.name); // Gedämpfter Marmorkarpfen

Der Grund, warum Objekt s1 auf den Namen in der Funktion Student zeigen kann, besteht darin, dass das neue Schlüsselwort den Zeiger davon so ändern kann, dass er auf Objekt s1 zeigt.

// Der Ausführungsprozess des neuen Schlüsselworts 1. Erstellen Sie ein leeres Objekt im Funktionskörper.
 2. Lassen Sie den aktuellen Wert auf dieses leere Objekt zeigen.
 3. Fügen Sie hierdurch dem aktuell leeren Objekt Schlüssel-Wert-Paare hinzu.
 4. Geben Sie das Objekt mit allen Schlüssel-Wert-Paaren zurück, die der externen Variable hinzugefügt wurden.

Der this-Zeiger im Timer

varnum = 0;
 Funktion Obj() {
  diese.num = 1;
  this.getNum1 = Funktion () {
   konsole.log(diese.nummer);
  };
  this.getNum2 = Funktion () {
   setzeIntervall(Funktion () {
    konsole.log(diese.nummer);
   }, 1000);
  };
 }
 var o = neues Obj();
 o.getNum1();//1 (o.num)
 o.getNum2();//0 (Fenster.num)

Der Grund, warum der Wert von o.getNum2() 0 ist, ist, dass this hier auf window zeigt. Lassen Sie uns zur Erklärung unser this-Zeigeprinzip herausnehmen: Die Richtung von this kann nicht bestimmt werden, wenn die Funktion definiert wird. Erst wenn die Funktion ausgeführt wird, können wir bestimmen, auf wen this tatsächlich zeigt. Tatsächlich zeigt this letztendlich auf das Objekt, das die Funktion aufruft, in der es sich befindet.

Lösung: Die Funktion, in der sich this.num befindet, ist function () { console.log(this.num);} im Timer setInterval . Gemäß dem this-Zeigeprinzip zeigt this bei Ausführung der Funktion auf ihr übergeordnetes Objekt. setInterval , und da auf setInterval durch window hingewiesen wird, zeigt this auf window .

call , apply , bind Richtung ändern

varnum = 0;
 Funktion Obj() {
  diese.num = 1;
  this.getNum1 = Funktion () {
   konsole.log(diese.nummer);
  };
  this.getNum2 = Funktion () {
   setzeIntervall(Funktion () {
    konsole.log(diese.nummer);
   }.bind(this), 1000);//Verwenden Sie Bind, um dies an diese Funktion zu binden};
 }
 var o = neues Obj();
 o.getNum1();//1 (o.num)
 o.getNum2();//1 (o.num)
 

erklären:

Die Methode bind() ist eine Methode von Function.prototype. Wenn sie von einer gebundenen Funktion aufgerufen wird, erstellt die Methode bind eine neue Funktion und verwendet den ersten Parameter als Laufzeitwert der neuen Funktion.

Nach den Grundsätzen:

Vor der Verwendung der bind -Methode: Beim Aufruf: this.num zeigt auf das Objekt, das die Funktion aufruft, in der es sich befindet, also das Objekt window.setTimeout . Nach der Verwendung der bind -Methode: Beim Aufruf wird das ursprüngliche this an das Objekt umgeleitet, das die Funktion getSum2 aufruft (die Funktion, in der sich das neue this befindet). Hier wird der Konstruktor über new aufgerufen, sodass er auf das o-Objekt zeigt.

In dieser Situation wird häufiger bind -Methode verwendet. Wenn Sie stattdessen call oder apply -Methode verwenden, ist das Ergebnis natürlich auch korrekt, aber call und apply -Methoden werden unmittelbar nach dem Aufruf ausgeführt, sodass kein Verzögerungseffekt auftritt und der Timer bedeutungslos ist.

Oben finden Sie eine ausführliche Erklärung des This-Pointing-Problems in JavaScript. Weitere Informationen zum This-Pointing in JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!