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

Schritte und Fallstricke beim Upgrade von Linux MySQL 5.5 auf MySQL 5.7

Inhaltsverzeichnis Linux MySQL 5.5 auf MySQL 5.7 ...

MySQL-Datenoperation – Verwendung von DML-Anweisungen

veranschaulichen DML (Data Manipulation Language)...

Implementierung integrierter Module und benutzerdefinierter Module in Node.js

1. Commonjs Commonjs ist ein benutzerdefiniertes ...

Beispiel für die Verwendung von CASE WHEN beim Sortieren in MySQL

Vorwort In einem früheren Projekt wurde die Sorti...

JavaScript-Plugin-Kapselung für Tabellenwechsel

In diesem Artikel wird der Kapselungscode von Jav...

Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

Das Endergebnis sieht so aus, ist es nicht süß … ...

Implementierungscode für die nahtlose Verbindung des Div-Bildlaufbands

Code kopieren Der Code lautet wie folgt: <html...

Einen Web-Rechner mit Javascript schreiben

Dieser Artikel beschreibt hauptsächlich die Auswi...

So importieren Sie chinesische Daten in Navicat für SQLite in CSV

In diesem Artikel erfahren Sie zu Ihrer Informati...

So erstellen Sie eine Vue3-Desktopanwendung

In diesem Artikel sehen wir uns an, wie man mit V...

js, um einen interessanten Countdown-Effekt zu erzielen

js interessanter Countdown-Fall. Zu Ihrer Informa...

Zusammenfassung verschiedener Methoden zur MySQL-Datenwiederherstellung

Inhaltsverzeichnis 1. Einleitung 2. Direkte Wiede...