Die letzten Schritte zum Beherrschen von JavaScript ' dieses Keyword 'This'

Die grundlegende Verwendung von JavaScript this Schlüsselwort wurde im vorherigen Artikel erläutert. this Der Schlüssel zum Zeigen ist der Laufzeitkontext. Wenn sich der Kontext jedoch über die Erwartungen hinaus ändert, tritt das Problem auf. Dieser Artikel wird sich auf diese Situation konzentrieren und wie man sie lösen.

Kernpunkte

• Das Schlüsselwort this in JavaScript verweist auf den aktuellen Ausführungskontext und das Verständnis ist für die Manipulation und Interaktion von Objekten essentiell, insbesondere wenn objektorientierte Programmierung oder Verwendung von Frameworks und Bibliotheken verwendet werden, die stark auf this beruhen.
Häufige Probleme mit
• this Schlüsselwörter umfassen die Verwendung in extrahierten Methoden, Rückruffunktionen und Schließungen. Diese Probleme können gelöst werden, indem das Schlüsselwort bind() mit der this -Methode explizit an das richtige Objekt gebunden wird.
• ecmascript 6 führt eine Pfeilfunktion ein, die den Wert this aus dem direkten Umschließungsbereich erhält. Die lexikalische Bindung der Pfeilfunktion kann nicht überschrieben werden, was sie zu einer eleganteren Lösung macht, um den richtigen Kontext aufrechtzuerhalten. this Der Wert von
• hängt davon ab, wie die Funktion aufgerufen wird. In der Methode verweist this auf das Objekt, zu dem es gehört, in einer normalen Funktion auf das globale Objekt; zeigt auf das neu erstellte Objekt; this this new this FAQS this call() lösen apply() In diesem Abschnitt werden einige der häufigsten Probleme untersucht, die bei der Verwendung der Schlüsselwörter bind() auftreten und lernen, wie man sie löst. this

1. Einer der häufigsten Fehler von

besteht darin, eine Variable des Objekts einer Variablen zuzuweisen und zu erwarten, dass noch auf das ursprüngliche Objekt verweist. Wie im folgenden Beispiel gezeigt, funktioniert dies nicht.

Auch wenn this ein Hinweis auf

zu sein scheint, ist es eigentlich nur ein weiterer Hinweis auf

selbst. Wir wissen bereits, dass der Anrufstandort den Kontext bestimmt, und hier ist der Anrufort , was ein einfacher Funktionsaufruf ist. Um zu beweisen, dass this auf eine Funktion ohne Basis verweist (eine Funktion, die nicht an ein bestimmtes Objekt gebunden ist), fügen Sie einfach unten des Codes hinzu und Sie sehen die folgende Ausgabe:

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

getCarBrand enthält nur eine normale Funktion, die keine Mitgliedsmethode des car -Objekts mehr ist. In diesem Fall wird this.brand tatsächlich in window.brand konvertiert, natürlich ist es undefiniert. Wenn wir die Methode aus dem Objekt extrahieren, wird es erneut zu einer normalen Funktion. Die Verbindung zum Objekt wird abgeschnitten und funktioniert nicht mehr wie erwartet. Mit anderen Worten, die extrahierte Funktion ist nicht an das Objekt gebunden, das sie nimmt. Wie beheben wir es? Wenn wir einen Verweis auf das ursprüngliche Objekt beibehalten möchten, müssen wir die getBrand() -Funktion explizit an das getCarBrand -Objekt binden, wenn die getBrand() -Funktion der car Variablen zugewiesen wird. Wir können die bind() -Methode verwenden, um dies zu erreichen.

function(){
  console.log(this.brand);
}

Jetzt erhalten wir die richtige Ausgabe, weil wir den Kontext erfolgreich neu definiert haben, wie wir es aussehen sollen.

2. this Das nächste Problem tritt auf, wenn wir eine Methode (mit als Argument) als Rückruffunktion übergeben. Zum Beispiel:

this Auch wenn wir

verwenden, erhalten wir tatsächlich nur die Funktion

var getCarBrand = car.getBrand.bind(car);
getCarBrand(); // 输出：Nissan

, die an das Tastenobjekt angehängt ist. Die Übergabe von Parametern an eine Funktion ist eine implizite Zuordnung. Was hier passiert, ist also fast das gleiche wie im vorherigen Beispiel. Der Unterschied besteht darin, dass

jetzt keine explizite Zuordnung, sondern eine implizite Zuordnung ist. Das Ergebnis ist fast das gleiche - was wir erhalten, ist eine normale Funktion, die an ein Tastenobjekt gebunden ist. Mit anderen Worten, wenn wir eine Methode für ein Objekt ausführen, unterscheidet sich das Objekt von dem Objekt, das die Methode ursprünglich definiert hat, und das Schlüsselwort car.getBrand zeigt nicht mehr auf das ursprüngliche Objekt, sondern auf das Objekt, das die Methode nannte. Weitere Informationen finden Sie in unserem Beispiel: Wir führen getBrand() im car.getBrand (Tastenelement) anstelle des this -Objekts aus, das es ursprünglich definiert hat. Daher zeigt el nicht mehr auf car.getBrand, sondern auf car. Wenn wir den Verweis auf das ursprüngliche Objekt unverändert halten möchten, müssen wir auch die this -Funktion mit der car -Methode explizit an das Objekt el binden. bind() getBrand() car Jetzt funktioniert alles wie erwartet.

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var el = document.getElementById("btn");
el.addEventListener("click", car.getBrand);

3. Eine andere Situation, in der der Kontext von

schief gehen kann, ist, dass wir innerhalb der Schließung verwenden. Betrachten Sie das folgende Beispiel: this

Die Ausgabe hier ist

, weil die Verschlussfunktion (interne Funktion) nicht auf die this -Rearable der externen Funktion zugreifen kann. Das Endergebnis ist, dass this gleich

ist, da

el.addEventListener("click", car.getBrand.bind(car));

in der inneren Funktion an das globale Objekt gebunden ist. Um dieses Problem zu lösen, müssen wir die

an die undefined -Funktion binden. this this.brand window.brand Diese Bindung entspricht this. Eine weitere beliebte Möglichkeit, Schließungen zu beheben, besteht darin, dem Wert this einer anderen Variablen den Wert zuzuordnen, wodurch unerwartete Änderungen verhindert werden. getBrand()

var car = {
  brand: "Nissan",
  getBrand: function() {
    console.log(this.brand);
  }
};

var getCarBrand = car.getBrand;

getCarBrand(); // 输出：undefined

Hier kann der Wert von this _this, that, self, me, my, context,

,

, zugewiesen werden , ,

,

, das Pseudonym des Objekts oder einen anderen Namen, der zu Ihnen passt. Der Schlüssel ist, Verweise auf das ursprüngliche Objekt zu behalten. this this function Rettung von ECMascript 6 => this new Im vorherigen Beispiel sehen wir die sogenannte "lexikalische Methode var self = this;" - wenn wir den Wert

einer anderen Variablen zuweisen. In ECMascript 6 können wir ähnliche, aber elegantere Techniken verwenden, um dies mit Neupfeilfunktionen zu erreichen. Die Pfeilfunktion wird nicht vom Schlüsselwort

function(){
  console.log(this.brand);
}

erstellt, sondern vom sogenannten "Fat-Pfeil" -Operator (

). Im Gegensatz zu normalen Funktionen erhalten Pfeilfunktionen Werte aus ihrem direkt geschlossenen Bereich. Die lexikalische Bindung von Pfeilfunktionen kann auch mit dem this -Operator nicht überschrieben werden. Lassen Sie uns nun sehen, wie Sie die -Anweisung mit der Pfeilfunktion ersetzen.

this

Was er sich erinnern kann

• this Wir sehen, dass das Schlüsselwort
  wie jeder andere Mechanismus einige einfache Regeln befolgt, und wenn wir sie gut verstehen, können wir den Mechanismus mit mehr Vertrauen verwenden. Schauen wir uns also einen kurzen Blick auf das, was wir gelernt haben (aus diesem Artikel und dem vorherigen Artikel):
  • in den folgenden Fällen zeigt
  auf das globale Objekt:
  im äußersten Kontext außerhalb eines jeden Funktionsblocks.
in einer Funktion, die keine Objektmethode ist.
• this in Funktionen, die keine Objektkonstruktoren sind.
• call() apply() Wenn die Funktion als Eigenschaft des übergeordneten Objekts bezeichnet wird, verweist bind() auf das übergeordnete Objekt. this null Wenn eine Funktion mithilfe von this oder
oder
• aufgerufen wird, zeigt new auf den ersten Parameter, der an diese Methoden übergeben wird. Wenn der erste Parameter this oder kein Objekt ist, verweist
auf das globale Objekt.
• this beim Aufrufen einer Funktion unter Verwendung des
-Operators verweist

auf das neu erstellte Objekt.

this Bei der Verwendung von Pfeilfunktionen (eingeführt in ECMascript 6) hängt

vom lexikalischen Bereich ab und zeigt auf das übergeordnete Objekt.

Lernen Sie diese einfachen und klaren Regeln, wir können leicht vorhersagen, worauf

hinweisen wird, und wenn es nicht das ist, was wir wollen, wissen wir, welche Methoden verwendet werden können, um sie zu beheben.

this this Zusammenfassung

JavaScripts this Schlüsselwort ist ein schwieriges Konzept, aber Sie können es mit einfach mehr üben. Ich hoffe, dieser Artikel und mein vorheriger Artikel werden als Grundlage für Ihr Verständnis dienen und eine wertvolle Referenz sein, wenn Sie das nächste Mal Kopfschmerzen geben.

JavaScript FAQs für Schlüsselwörter (FAQs)

(Der FAQS -Teil wird hier weggelassen, da es zu lang ist und mit dem vorherigen Inhalt stark dupliziert wird. Der FAQs -Teil wurde früher ausführlich erklärt.)

Das obige ist der detaillierte Inhalt vonDie letzten Schritte zum Beherrschen von JavaScript ' dieses Keyword 'This'. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!