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

Welche Szenarien sind für JS-Pfeilfunktionen nicht geeignet?

Inhaltsverzeichnis Überblick Definieren von Metho...

Bootstrap3.0-Studiennotizentabelle bezogen auf

In diesem Artikel werden hauptsächlich Tabellen e...

Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode

Sinnvolle Einstellung des MySQL sql_mode sql_mode...

Div in HTML ausblenden Tabelle ausblenden TABLE- oder DIV-Inhalt im CSS-Stil

Ich habe heute Abend ein Problem gelöst, das mich...

Popularisierung der Theorie – Benutzererfahrung

1. Konzeptanalyse 1: UE User Experience <br /&...

Häufige Anwendungsszenarien für React Hooks (Zusammenfassung)

Inhaltsverzeichnis 1. Staatshaken 1. Grundlegende...

So migrieren Sie das Datenverzeichnis in mysql8.0.20

Das Standardspeicherverzeichnis von MySQL ist /va...

Zwei Möglichkeiten zum Exportieren von CSV in Win10 MySQL

Es gibt zwei Möglichkeiten, CSV in Win10 zu expor...