Vertieftes Verständnis des Umfangs und Kontexts von Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

Übersicht

Die Implementierung von Umfang und Kontext in Javascript ist ein einzigartiges Merkmal der Javascript-Sprache. In gewissem Maße ist die Javascript-Sprache sehr flexibel. Funktionen in Javascript können verschiedene Kontexte annehmen und Bereiche können gekapselt und gespeichert werden. Gerade aufgrund dieser Eigenschaften bietet Javascript auch viele nützliche Designmuster. Umfang und Kontext sind jedoch auch Bereiche, in denen Javascript-Programmierer während der Entwicklung häufig verwirrt sind.
Im Folgenden werden Ihnen die Konzepte von Umfang und Kontext in Javascript sowie deren Unterschiede vorgestellt.

Umfang vs. Kontext

Der erste wichtige Punkt ist, dass Umfang und Kontext nicht dieselben Konzepte sind und sich nicht auf dasselbe beziehen. Als Frontend-Freak sehe ich oft Artikel, die diese beiden Konzepte verwechseln. Daher werden einige Dinge immer weniger klar, je mehr ich sie lese. Diese beiden Konzepte scheinen seit langem verwechselt zu sein. Daher habe ich viele Informationen überprüft und diese beiden Konzepte kurz erläutert. :stuck_out_tongue_closed_eyes:
Wenn in Javascript eine Funktion aufgerufen wird, sind ein Bereich und ein Kontext an die Funktion gebunden. Grundsätzlich ist der Umfang funktionsbasiert und der Kontext objektbasiert. Mit anderen Worten: Der Gültigkeitsbereich bezieht sich auf den Zugriff auf Variablen innerhalb einer Funktion, wenn die Funktion aufgerufen wird. Der Kontext bezieht sich normalerweise auf den Wert des Schlüsselworts „this“, das eine Referenz auf das Objekt ist, das den aktuell ausgeführten Code besitzt.

Variabler Umfang

Variablen können im lokalen oder globalen Bereich definiert werden und werden als lokale Variablen bzw. globale Variablen bezeichnet. Globale Variablen beziehen sich auf außerhalb der Funktion deklarierte Variablen. Auf globale Variablen kann überall im Programm zugegriffen werden. Lokale Variablen beziehen sich auf Variablen, die im Funktionskörper definiert sind. Auf sie kann nur innerhalb des Funktionskörpers oder in verschachtelten Funktionen zugegriffen werden, der Zugriff außerhalb der Funktion ist nicht möglich.
Javascript unterstützt derzeit keinen Bereich auf Blockebene (Variablen, die in if-, switch-, for- usw.-Anweisungen definiert sind). Dies bedeutet, dass auf innerhalb eines Blocks definierte Variablen auch außerhalb des Blocks zugegriffen werden kann. In ES6 können wir jedoch den Bereich auf Blockebene mithilfe des Schlüsselworts „let“ definieren.
Bezüglich des Inhalts des Umfangs können Sie andere Informationen überprüfen. Dieser Teil des Inhalts ist relativ einfach.

„dieser“ Kontext

Der Kontext hängt normalerweise davon ab, wie die Funktion aufgerufen wird. Wenn eine Funktion als Methode für ein Objekt aufgerufen wird, bezieht sich „this“ auf das Objekt, für das die Funktion aufgerufen wurde.

Code kopieren Der Code lautet wie folgt:

var obj={

foo:function (){

console.log(this === obj);

}

};

obj.foo(); //Ausgabe true

Wenn wir zum Erstellen eines neuen Objekts das Schlüsselwort „new“ verwenden, bezieht sich dies gleichermaßen auf das neu erstellte Objekt.

Code kopieren Der Code lautet wie folgt:

Funktion foo(){

console.log(this);

}

foo(); //Ausgabefenster

var obj=new foo(); //Ausgabe foo {}

Zu beachten ist, dass sich beim Aufruf einer Funktion im globalen Bereich auf das globale Objekt bezieht, das sich in der Browserumgebung auf das Fenster bezieht. Wenn der Code jedoch im strikten Modus ausgeführt wird, wird „this“ auf „undefiniert“
gesetzt Ausführungskontext

Javascript ist eine Single-Threaded-Sprache, was bedeutet, dass Javascript, wenn es im Browser ausgeführt wird, jeweils nur eine Sache ausführen kann und andere Dinge in der Methode in die Warteschlange gestellt werden und auf die Verarbeitung warten.

1. Wenn die Javascript-Codedatei vom Browser geladen wird, ist der neueste Eintrag standardmäßig ein globaler Ausführungskontext. Wenn eine Funktion im globalen Kontext aufgerufen wird, tritt das Programm in die aufgerufene Funktion ein, und die Javascript-Engine erstellt einen neuen Ausführungskontext für die Funktion und verschiebt ihn an die Spitze des Ausführungskontextstapels. Der Browser führt immer den Kontext aus, der sich aktuell oben im Stapel befindet. Sobald die Ausführung abgeschlossen ist, wird der Kontext oben im Stapel abgelegt und führt dann den Code im darunter liegenden Kontext aus. Auf diese Weise werden die Kontexte im Stapel nacheinander ausgeführt und vom Stapel entfernt, bis sie zum globalen Kontext zurückkehren.

2. Ein Ausführungskontext kann in zwei Phasen unterteilt werden: Erstellungsphase und Ausführungsphase. In der Erstellungsphase erstellt der JavaScript-Interpreter zunächst ein Variablenobjekt (auch „Aktivierungsobjekt“ genannt). Aktive Objekte bestehen aus Variablen, Funktionsdeklarationen und Parametern. In dieser Phase wird die Gültigkeitsbereichskette der Funktion initialisiert und auch das von dieser referenzierte Objekt bestimmt. Als nächstes folgt die Ausführungsphase, in der der Code interpretiert und ausgeführt wird.
Im Javascript-Code kann es eine beliebige Anzahl von Funktionskontexten geben. Wir wissen bereits, dass der Javascript-Interpreter einen neuen Kontext erstellt und auf alle innerhalb der Funktion deklarierten Variablen zugegriffen werden kann den Umfang der aktuellen Funktion.

3. Durch die obige Erklärung haben wir ein grundlegendes Konzept für den „Ausführungskontext“ der Funktion, aber hier sind alle am meisten verwirrt. Der „Ausführungskontext“ in Javascript bezieht sich hauptsächlich auf den Bereich, nicht auf den „diesen Kontext“, auf den im vierten Abschnitt oben Bezug genommen wird. Es gibt viele ähnliche verwirrende Konzepte in Javascript, aber solange wir das spezifische Objekt verstehen, auf das sich jedes Konzept bezieht, werden wir nicht mehr verwirrt sein. Daher hoffe ich auch, dass jeder wirklich zwischen „Ausführungskontext“ und „diesem Kontext“ unterscheiden kann ".

In einem einfachen Satz ist der Ausführungskontext ein Konzept, das sich auf den Umfang bezieht, auch wenn dies möglicherweise nicht streng ist.

Scope-Kette

Für jeden Ausführungskontext gibt es einen daran gebundenen Bereich. Die Bereichskette enthält das Ausführungskontextaktivierungsobjekt (was etwas kompliziert klingt) im Ausführungskontextstapel. Die Bereichskette bestimmt den Zugriff auf Variablen und die Auflösung von Bezeichnern.

Codebeispiel:

Code kopieren Der Code lautet wie folgt:

Funktion zuerst(){

Zweiter();

Funktion second(){

        dritte();

         Funktionthird(){

            four();

             Funktion four(){

//Code

            }

}

}

}

first();

Führen Sie den obigen Code aus und die verschachtelten Funktionen werden ausgeführt. Was den obigen Code betrifft, wird auch eine Bereichskette gebildet. Die Reihenfolge der Bereichskette von oben nach unten ist: vierter, dritter, zweiter, erster, global. Die vierte Funktion kann auf Variablen im globalen Bereich zugreifen und auf alle Variablen zugreifen, die in den Funktionen dritte, zweite und erste definiert sind.
Zu beachten ist, dass lokale Variablen innerhalb des Funktionskörpers eine höhere Priorität haben als globale Variablen mit demselben Namen. Wenn eine in einer Funktion deklarierte lokale Variable oder eine in einem Funktionsparameter enthaltene Variable denselben Namen wie eine globale Variable hat, wird die globale Variable durch die lokale Variable überschrieben.
Einfach ausgedrückt: Jedes Mal, wenn wir versuchen, auf eine Variable zuzugreifen, sucht das Programm nach der Variablen im Gültigkeitsbereich der aktuellen Funktion. Wenn sie nicht gefunden werden kann, sucht es entlang der Gültigkeitskette bis zur oberen Ebene der Funktion Die Variable wurde gefunden. Wenn sie nicht gefunden werden kann, wird undefiniert zurückgegeben.

Zusammenfassung

In diesem Artikel werden die verwandten Konzepte von Kontext und Umfang in Javascript vorgestellt. Es gibt auch mehrere weitere wichtige Konzepte in Javascript, wie z. B. Schließungen usw. Wenn Sie diese in Zukunft verstehen, werden Sie einen Artikel schreiben~~