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

Linux verwendet stty zum Anzeigen und Ändern von Terminalzeileneinstellungen

Sttty ist ein gängiger Befehl zum Ändern und Druc...

MySQL mit Nutzungsanalyse

Verwendung von „haben“ Mit der Having-Klausel kön...

So stellen Sie FastDFS in Docker bereit

Installieren Sie Fastdfs auf Docker Mount-Verzeic...

So kapseln Sie Axios-Anfragen mit Vue

Tatsächlich ist es sehr einfach, Axios in Vue zu ...

Beispielcode für die Codevorlage für die Linux C-Protokollausgabe

Vorwort Dieser Artikel stellt hauptsächlich den r...

Bei verschachtelten MySQL-Transaktionen aufgetretene Probleme

MySQL unterstützt verschachtelte Transaktionen, a...

Unterscheidung zwischen Linux-Hardlinks und Softlinks

Unter Linux gibt es zwei Arten von Dateiverbindun...

Detaillierte Erklärung der HTML-Formularelemente (Teil 2)

HTML-Eingabeattribute Das Value-Attribut Das Valu...