Grafische Erklärung des zugrunde liegenden Prinzips der JavaScript-Bereichskette

Grafische Erklärung des zugrunde liegenden Prinzips der JavaScript-Bereichskette

Vorwort

Beim Erlernen von JavaScript muss jeder wissen, dass der externe Speicherplatz nicht auf interne Variablen zugreifen kann. Wir kennen oft nur diese Grundregel. Was ist also das grundlegende Prinzip zur Umsetzung dieser Grundregel? Heute zeige ich Ihnen, wie Sie die Scope-Kette aus der Perspektive eines weißen Mannes verstehen, und hoffe, Ihnen dabei etwas weiterzuhelfen!

Umfang

1. Was ist Umfang?

Einfach ausgedrückt ist der Gültigkeitsbereich eine Reihe von Regeln für die Suche nach Variablen nach Namen. Der Gültigkeitsbereich kann allgemein als geschlossener Raum verstanden werden. Dieser Raum ist geschlossen und hat keine Auswirkungen auf die Außenwelt. Der externe Raum kann nicht auf den internen Raum zugreifen, aber der interne Raum kann auf den externen Raum zugreifen, der ihn umgibt.

2. [[Scopes]]-Eigenschaft

In JavaScript ist jede Funktion ein Objekt. Auf einige Eigenschaften des Objekts können wir zugreifen, auf einige davon können wir jedoch nicht frei zugreifen. Die Eigenschaft [[Scopes]] ist eine davon. Diese Eigenschaft kann nur von der JavaScript-Engine gelesen werden.

Tatsächlich ist [[scope]] das, was wir häufig als Bereich bezeichnen, in dem die Kontextsammlung der Bereichslaufzeit gespeichert ist.

Da func.prototype.constructor und func hier auf die gleiche Funktion verweisen, betrachten wir die Eigenschaft [[Scopes]], indem wir auf das Prototypobjekt der Funktion func zugreifen.

3. Geltungsbereichskette

Die im [[Scope]] gespeicherte Sammlung von Ausführungskontextobjekten ist miteinander verknüpft, und wir nennen diese Kettenverbindung eine Scope-Kette. JavaScript sucht nach Variablen durch die Bereichskette und sucht von der Spitze der Bereichskette nach unten (die Bereichskette der Funktion, in der das Objekt gesucht wird, wird durchsucht).

4. Grafische Erklärung des Prinzips der Variablenfindung

//Nehmen Sie den folgenden Code als Beispiel, um das Prinzip der JavaScript-Suche nach Variablen über die Bereichskette zu veranschaulichen**
Funktion a() {
  Funktion b() {
  //Der ursprüngliche Wert von b, den ich hier angegeben habe, war 234, aber der Kommentarbereich hat mich daran erinnert, dass die folgende Zahl als 123 geschrieben wurde, also habe ich den Wert von b in 123 geändert
      var b = 123;
  }
  var a = 123;
  B();
}
var glob = 100;

1. Wenn die globale Funktion a() definiert ist, sieht die Gültigkeitsbereichskette wie folgt aus

Die [[Scopes]]-Eigenschaft einer Funktion zeigt auf das Scope-Chain-Objekt. Zu diesem Zeitpunkt hat die Scope-Chain nur ein Schlüssel-Wert-Paar, das auf das globale Objekt zeigt. Das globale Objekt speichert Dinge, auf die global zugegriffen werden kann, d. h. den äußersten Scope, auf den jeder zugreifen kann.

2. Wenn die globale Funktion a() aktiviert und aufgerufen wird, sieht die Gültigkeitsbereichskette wie folgt aus

Zu diesem Zeitpunkt ist das erste, worauf die Bereichskette zugreifen kann, das Schlüssel-Wert-Paar im Aktivierungsobjekt. Wenn kein Schlüssel-Wert-Paar vorhanden ist, wird auf das globale Objekt zugegriffen.

3. Wenn die Funktion b in der Funktion a() definiert ist, lautet die Gültigkeitsbereichskette von b wie folgt

Wenn b nur definiert, aber nicht aufgerufen wird, ist die Gültigkeitsbereichskette von b dieselbe wie die von a.

4. Wenn Funktion b in Funktion a() aktiviert und aufgerufen wird, sieht die Gültigkeitsbereichskette wie folgt aus

Die Bereichskette zeigt zuerst auf das Aktivierungsobjekt der Funktion b(). Die Suche nach Variablen erfolgt ebenfalls in der Reihenfolge der Bereichskette und wird beendet, wenn eine Variable gefunden wird.

Zusammenfassen

Der Grund, warum der äußere Bereich nicht auf den inneren Bereich zugreifen kann, besteht darin, dass die Bereichskette des äußeren Bereichs nicht über das Aktivierungsobjekt des inneren Bereichs verfügt und daher nicht auf die internen Variablen zugreifen kann. Die Reihenfolge, in der der innere Bereich auf Variablen zugreift, richtet sich nach der Bereichskette. Schauen Sie zuerst nach innen. Wenn nichts gefunden wird, schauen Sie außerhalb entlang der Anwendungsbereichskette nach. Der äußere Bereich ist der globale Bereich.

Dies ist das Ende dieses Artikels über die zugrunde liegenden Prinzipien der JavaScript-Bereichskette. Weitere relevante Inhalte zur JavaScript-Bereichskette 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!

Das könnte Sie auch interessieren:
  • Fortgeschrittene JavaScript-Programmierung: Variablen und Umfang
  • Statischer und dynamischer Gültigkeitsbereich von JavaScript anhand von Beispielen erklärt
  • Javascript-Bereich und Abschlussdetails
  • Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten
  • Detaillierte Erklärung zur Verwendung von Scoped Slots in Vue.js-Slots
  • Zusammenfassung des JS-Ausführungskontexts und -umfangs
  • Gedanken und Austausch zu Umfangsproblemen in JS

<<:  So ändern Sie den Standardspeicherort von Docker-Images (Lösung)

>>:  Das Raster ist Ihr Layoutplan für die Seite

Artikel empfehlen

Anwendung von Ankerpunkten in HTML

Ankerpunkt festlegen <a name="nach oben&qu...

Tiefes Verständnis von Zeilenhöhe und vertikaler Ausrichtung

Mehrere Konzepte Zeilenbox: Eine Box, die eine In...

Tutorial zum Migrieren von Projekten von MYSQL zu MARIADB

Bereiten Sie die Datenbank (MySQL) vor. Wenn Sie ...

MySQL Online-Übung zur Deadlock-Analyse

Vorwort Ich glaube, dass jeder beim Erlernen von ...

Einfaches Docker Swarm-Tutorial

Schwarm drei virtuelle Maschinen 132,133,134 1. I...

Implementierung der Änderung von Konfigurationsdateien im Docker-Container

1. Betreten Sie den Container docker run [Option]...

Vorteile und Nachteile von JSON sowie Einführung in die Verwendung

Inhaltsverzeichnis 1. Was ist JSON 1.1 Array-Lite...

JS implementiert Anforderungsdispatcher

Inhaltsverzeichnis Abstraktion und Wiederverwendu...

So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil

Inhaltsverzeichnis Bindungsklasse Inline-Stile bi...

Warum wird IE6 von den meisten Leuten verwendet?

In erster Linie bin ich Webdesigner. Genauer gesag...

Implementierung der React-Sternebewertungskomponente

Voraussetzung ist die Eingabe der Bewertungsdaten...