Der Umfang ist ein wichtiges Konzept zur Bestimmung der Zugänglichkeit von Variablen. Dieses Konzept steht im Mittelpunkt von Abschlüssen, bei denen Variablen in globale und lokale unterteilt werden.
In diesem Artikel werde ich versuchen, in einfachen Worten zu erklären, welchen Umfang JavaScript hat.
1. Geltungsbereich
Bevor wir uns mit den Details des Anwendungsbereichs befassen, schauen wir uns ein kurzes Beispiel an.
Angenommen, wir haben eine Variable definiert:
const message = 'Hello'
console.log(message) // 'Hello'
Wir können seinen Wert leicht an die Konsole ausgeben. Das ist klar.
Fügen wir nun die Deklaration der Nachrichtenvariablen in den if-Block ein:
if (true) {
const message = 'Hello'
}
console.log(message) // ReferenceError: message is not defined
Dieses Mal wird beim Versuch, auf die Variable zuzugreifen, eine ReferenceError: -Nachricht als nicht definierte Ausnahme ausgelöst.
Warum ist das passiert?
Weil der if-Block einen Bereich für die Nachrichtenvariable erstellt hat. Und Nachricht ist nur in diesem Bereich verfügbar.
Daher ist die Verfügbarkeit von Variablen durch den Umfang begrenzt, in dem sie definiert sind.
Der Umfang ist also der Umfang der Variablen.
2. Bereich blockieren
Ein Codeblock in JavaScript definiert den Umfang der Variablen, die mit den Schlüsselwörtern const und let deklariert wurden:
if (true) {
// if
const message = 'Hello'
console.log(message) // 'Hello'
}
console.log(message) // ReferenceError
Die erste console.log () gibt den Wert der Nachrichtenvariablen sicher an die Konsole aus, da auf diese Variable in dem Bereich zugegriffen wird, in dem sie definiert ist.
Das Aufrufen der zweiten console.log () generiert jedoch einen Fehler, da die Nachrichtenvariable in ihrem externen Bereich nicht verfügbar ist: Nachricht ist im aktuellen Kontext nicht vorhanden.
Der Blockbereich wird auch in den Anweisungen if, for, while erstellt.
Zum Beispiel:
for (const color of ['green', 'red', 'blue']) {
// for
const message = 'Hi'
console.log(color) // 'green', 'red', 'blue'
console.log(message) // 'Hi', 'Hi', 'Hi'
}
console.log(color) // ReferenceError
console.log(message) // ReferenceError
Die Farb- und Nachrichtenvariablen sind nur im for-Block vorhanden.
Gleiches gilt für die while-Anweisung:
while (/* */) {
// while
const message = 'Hi'
console.log(message) // 'Hi'
}
console.log(message) // ReferenceError
Die in while definierte Nachricht ist nur in dieser Schleife verfügbar.
In JavaScript können Sie eigenständige Codeblöcke erstellen. Sie definieren auch ihren eigenen Umfang:
{
const message = 'Hi'
console.log(message) // 'Hi'
}
console.log(message) // ReferenceError
2.1. var hat keinen Blockumfang
Wie wir in den vorherigen Beispielen gesehen haben, erstellt ein Codeblock einen Bereich für Variablen, die mit den Schlüsselwörtern const und let deklariert wurden. Dies funktioniert jedoch nicht für Variablen, die mit dem Schlüsselwort var deklariert wurden.
Betrachten wir ein Beispiel:
if (true) {
// if
var count = 0
console.log(count) // 0
}
console.log(count) // 0
Die Anzahl der Variablen ist erwartungsgemäß im if-Block verfügbar. Es ist jedoch auch außerhalb dieses Blocks erhältlich!
Dies liegt daran, dass der Codeblock keinen Bereich für Variablen erstellt, die mit dem Schlüsselwort var deklariert wurden. Aber die Funktion macht es.
3. Funktionsumfang
Funktionen in JavaScript erstellen einen Bereich für alle Variablen, unabhängig davon, mit welchem Schlüsselwort sie deklariert sind (var, const oder let).
Zum Beispiel:
function run() {
// run()
var message = ', , !'
console.log(message)
}
run() // ', , !'
console.log(message) // ReferenceError
Die Funktion run () erstellt einen Bereich. Die Nachrichtenvariable ist innerhalb der Funktion verfügbar, jedoch nicht außerhalb.
Ebenso schafft die Funktion einen Bereich für Variablen, die mit const und let deklariert wurden, und sogar für andere Funktionen und Funktionsausdrücke:
function run() {
// run()
const two = 2
let one = 1
function run2() {}
var run3 = () => {}
console.log(two)
console.log(one)
console.log(run2)
console.log(run3)
}
run() // 2 1 ƒ run2() {} () => {}
console.log(two) // ReferenceError
console.log(one) // ReferenceError
console.log(run2) // ReferenceError
console.log(run3) // ReferenceError
4. Modulsichtbarkeit
ES6-Module bieten auch Raum für Variablen, Funktionen und Klassen.
Das Kreismodul erstellt ein konstantes pi (für den internen Gebrauch):
// circle
const pi = 3.14
console.log(pi) // 3.14
// pi
Die pi-Variable wird innerhalb des Kreismoduls deklariert und von dort nicht exportiert.
Dann wird das Kreismodul importiert:
import './circle'
console.log(pi) // ReferenceError
Die Variable pi ist außerhalb des Kreismoduls nicht verfügbar (bis sie mit export exportiert wird).
Der modulare Bereich umfasst Module. Dies bedeutet, dass private Variablen (die nicht exportiert werden) für die eigenen Anforderungen des Moduls verwendet und vor externem Zugriff geschützt werden.
Wir können also sagen, dass der Geltungsbereich der Kapselungsmechanismus für Codeblöcke, Funktionen und Module ist.
5. Bereiche können verschachtelt werden
Ein interessantes Merkmal von Bereichen ist, dass sie ineinander verschachtelt werden können.
Im folgenden Beispiel erstellt die Funktion run () einen Bereich, und darin erstellt ein if-Block einen anderen Bereich:
function run() {
// run()
const message = ', , !'
if (true) {
// if
const friend = ''
console.log(message) // ', , !'
}
console.log(friend) // ReferenceError
}
run()
Der Bereich des if-Blocks ist im Bereich der Funktion run () verschachtelt.
Ein Bereich, der sich in einem anderen Bereich befindet, wird als interner Bereich bezeichnet. Im obigen Beispiel ist dies der Bereich des if-Blocks.
Ein Bereich, der einen anderen Bereich enthält, wird als äußerer Bereich bezeichnet. Im obigen Beispiel ist dies der Umfang der Funktion run ().
Was ist mit variabler Verfügbarkeit? Es ist eine einfache Regel zu beachten:
Variablen aus dem äußeren Bereich sind im inneren Bereich verfügbar.
Daher ist die Nachrichtenvariable im if-Block verfügbar.
6. Globaler Geltungsbereich
Der globale Bereich ist der äußerste Bereich. Es ist für jeden internen oder lokalen Bereich verfügbar. Im Browser wird der globale Bereich erstellt, wenn die im src-Attribut des Skript-Tags angegebene JavaScript-Datei geladen wird:
<script src="script.js">// script.js
// globaler Bereich
let counter = 1
Im globalen Bereich deklarierte Variablen sind globale Variablen. Sie sind in jedem anderen Bereich erhältlich.
Der globale Bereich ist ein Mechanismus, der es der JavaScript-Laufzeit (Browser, Node.js) ermöglicht, Hostobjekte (d. H. Umwelteigene Objekte) als globale Variablen für Anwendungen verfügbar zu machen.
Beispielsweise sind Fenster und Dokument globale Variablen (Objekte), die vom Browser bereitgestellt werden. In Node.js ist eine solche Variable beispielsweise das Prozessobjekt.
7. Lexikalischer Geltungsbereich
Definieren wir zwei Funktionen, von denen eine in der anderen verschachtelt ist:
function outer() {
// outer()
let v = ' outer()!'
function inner() {
// inner()
console.log(v) // ' outer()!'
}
return inner
}
const f = outer()
f()
Schauen Sie sich die letzte Zeile an: inner () wird außerhalb des Bereichs von extern () aufgerufen. Woher weiß JavaScript, dass der Wert, der in der Funktion inner () auf die Konsole gedruckt wird, zu der Variablen v gehört, die in der Funktion Outer () deklariert ist?
Antwort: Dank lexikalischem Scoping.
JavaScript implementiert einen Mechanismus, der als lexikalisches oder statisches Scoping bezeichnet wird. Lexikalischer Bereich bedeutet, dass die Zugänglichkeit von Variablen statisch durch die Position dieser Variablen im Bereich der verschachtelten Funktion bestimmt wird: Variablen aus dem Bereich der äußeren Funktion sind im Bereich der verschachtelten Funktion verfügbar.
Die formale Definition des lexikalischen Umfangs lautet wie folgt:
Der lexikalische Bereich besteht aus statisch definierten externen Bereichen, d.h. aus äußeren Regionen, festgelegt durch Verwendung von Variablen aus diesen Regionen in inneren Funktionen.
Im obigen Beispiel besteht der lexikalische Bereich der inneren () Funktion aus dem Bereich der äußeren () Funktion.
Darüber hinaus ist inner () ein Abschluss, da es den Wert der Variablen aus dem lexikalischen Bereich verwendet.
8. Isolierung von Variablen
Offensichtlich isoliert der Bereich die Variablen. Dadurch können verschiedene Bereiche Variablen mit demselben Namen enthalten.
Sie können die Variablen Anzahl, Index, Strom, Wert usw. verwenden. in verschiedenen Bereichen ohne drohende Kollisionen (Namenskonflikte).
Zum Beispiel:
function foo() {
// foo()
let count = 1
console.log(count) // 1
}
function bar() {
// bar()
let count = 2
console.log(count) // 2
}
foo()
bar()
Fazit
Der Umfang bestimmt die Verfügbarkeit von Variablen. Eine im aktuellen Bereich deklarierte Variable ist nur darin verfügbar.
In JavaScript werden Bereiche durch Blöcke, Funktionen und Module erstellt.
Mit den Schlüsselwörtern const und let deklarierte Variablen können block-, funktional- oder modular sein, während mit dem Schlüsselwort var deklarierte Variablen keinen Blockbereich haben.
Bereiche können verschachtelt werden. Im äußeren Bereich deklarierte Variablen sind im inneren Bereich verfügbar.
Der lexikalische Bereich besteht aus statisch definierten äußeren Bereichen. Jede Funktion, unabhängig davon, wo sie ausgeführt wird, hat Zugriff auf Variablen aus ihrem lexikalischen Bereich (dies ist die Essenz von Abschlüssen).
Ich hoffe, der Artikel hat Ihnen geholfen. Danke für die Aufmerksamkeit.