TLDR
JavaScript hat lexikalische (auch statische) Gültigkeitsbereiche und Schließungen. Dies bedeutet, dass Sie den Umfang eines Bezeichners anhand des Quellcodes erkennen können.
Die vier Bereiche sind:
- Global - für alles sichtbar
- Funktion - sichtbar innerhalb einer Funktion (und ihrer Unterfunktionen und Blöcke)
- Block - sichtbar innerhalb eines Blocks (und seiner Unterblöcke)
- Modul - sichtbar innerhalb eines Moduls
Außerhalb der Sonderfälle des globalen Bereichs und des Modulbereichs werden Variablen mit var(Funktionsbereich), let(Blockbereich) und const(Blockbereich) deklariert . Die meisten anderen Formen der Bezeichnerdeklaration haben einen Blockbereich im strengen Modus.
Überblick
Der Bereich ist der Bereich der Codebasis, über den ein Bezeichner gültig ist.
Eine lexikalische Umgebung ist eine Zuordnung zwischen Bezeichnernamen und den damit verbundenen Werten.
Der Bereich besteht aus einer verknüpften Verschachtelung lexikalischer Umgebungen, wobei jede Ebene in der Verschachtelung einer lexikalischen Umgebung eines Ahnenausführungskontexts entspricht.
Diese verknüpften lexikalischen Umgebungen bilden eine Bereichskette. Bei der Bezeichnerauflösung wird entlang dieser Kette nach einem passenden Bezeichner gesucht.
Die Auflösung der Kennung erfolgt nur in eine Richtung: nach außen. Auf diese Weise können äußere lexikalische Umgebungen nicht in innere lexikalische Umgebungen "sehen".
Es gibt drei relevante Faktoren bei der Entscheidung über den Umfang eines Bezeichners in JavaScript:
- Wie ein Bezeichner deklariert wurde
- Wo eine Kennung deklariert wurde
- Ob Sie sich im strengen oder im nicht strengen Modus befinden
Einige der Möglichkeiten, wie Bezeichner deklariert werden können:
var, letundconst- Funktionsparameter
- Catch-Block-Parameter
- Funktionsdeklarationen
- Benannte Funktionsausdrücke
- Implizit definierte Eigenschaften für das globale Objekt (dh
varim nicht strengen Modus fehlen )
import Aussageneval
Einige der Standortkennungen können deklariert werden:
- Globaler Kontext
- Funktionskörper
- Gewöhnlicher Block
- Die Oberseite einer Kontrollstruktur (z. B. Schleife, wenn, während usw.)
- Kontrollstrukturkörper
- Module
Deklarationsstile
var
Mit deklarierte Bezeichner var haben einen Funktionsumfang , außer wenn sie direkt im globalen Kontext deklariert werden. In diesem Fall werden sie als Eigenschaften für das globale Objekt hinzugefügt und haben einen globalen Gültigkeitsbereich. Es gibt separate Regeln für ihre Verwendung in evalFunktionen.
let und const
Bezeichner, die mit deklariert wurden letund const einen Blockbereich haben , außer wenn sie direkt im globalen Kontext deklariert werden. In diesem Fall haben sie einen globalen Bereich.
Hinweis: let, constund var sind alle hochgezogen . Dies bedeutet, dass ihre logische Definitionsposition die Spitze ihres umschließenden Bereichs (Block oder Funktion) ist. Variablen, die als verwendet deklariert wurden letund consterst gelesen oder zugewiesen werden können, wenn die Steuerung den Deklarationspunkt im Quellcode überschritten hat. Die Zwischenzeit wird als zeitliche Totzone bezeichnet.
function f() {
function g() {
console.log(x)
}
let x = 1
g()
}
f() // 1 because x is hoisted even though declared with `let`!
Funktionsparameternamen
Funktionsparameternamen sind auf den Funktionskörper beschränkt. Beachten Sie, dass dies eine leichte Komplexität aufweist. Als Standardargumente deklarierte Funktionen schließen über der Parameterliste und nicht über dem Hauptteil der Funktion.
Funktionsdeklarationen
Funktionsdeklarationen haben einen Blockbereich im strengen Modus und einen Funktionsbereich im nicht strengen Modus. Hinweis: Der nicht strenge Modus ist ein komplizierter Satz neuer Regeln, die auf den skurrilen historischen Implementierungen verschiedener Browser basieren.
Benannte Funktionsausdrücke
Benannte Funktionsausdrücke sind auf sich selbst beschränkt (z. B. zum Zweck der Rekursion).
Implizit definierte Eigenschaften für das globale Objekt
Im nicht strengen Modus haben implizit definierte Eigenschaften für das globale Objekt einen globalen Bereich, da sich das globale Objekt am oberen Rand der Bereichskette befindet. Im strengen Modus sind diese nicht zulässig.
eval
In evalZeichenfolgen werden mit deklarierte Variablen varim aktuellen Bereich platziert oder, wenn evalsie indirekt verwendet werden, als Eigenschaften für das globale Objekt.
Beispiele
Im Folgenden wird ein Reference weil die Namen werfen x, yund zhaben keine Bedeutung außerhalb der Funktion f.
function f() {
var x = 1
let y = 1
const z = 1
}
console.log(typeof x) // undefined (because var has function scope!)
console.log(typeof y) // undefined (because the body of the function is a block)
console.log(typeof z) // undefined (because the body of the function is a block)
Im Folgenden wird ein ReferenceError für yund ausgelöst z, jedoch nicht für x, da die Sichtbarkeit von xnicht durch den Block eingeschränkt wird. Blöcke, die die Körper von Kontrollstrukturen definieren möchten if, forund while, ähnlich verhalten.
{
var x = 1
let y = 1
const z = 1
}
console.log(x) // 1
console.log(typeof y) // undefined because `y` has block scope
console.log(typeof z) // undefined because `z` has block scope
Im Folgenden xist außerhalb der Schleife sichtbar, da varFunktionsumfang hat:
for(var x = 0; x < 5; ++x) {}
console.log(x) // 5 (note this is outside the loop!)
... wegen dieses Verhaltens müssen Sie vorsichtig sein, wenn Sie Variablen schließen, die mit varin Schleifen deklariert wurden . Hier ist nur eine Instanz einer Variablen xdeklariert, die sich logisch außerhalb der Schleife befindet.
Die folgenden Drucke 5werden fünfmal und dann 5zum sechsten Mal console.logaußerhalb der Schleife gedruckt :
for(var x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // closes over the `x` which is logically positioned at the top of the enclosing scope, above the loop
}
console.log(x) // note: visible outside the loop
Das Folgende wird gedruckt, undefinedweil xes einen Blockbereich hat. Die Rückrufe werden einzeln asynchron ausgeführt. Neues Verhalten für letVariablen bedeutet, dass jede anonyme Funktion über einer anderen Variablen mit dem Namen geschlossen wird x(anders als dies der Fall gewesen wäre var) und daher Ganzzahlen 0durchgedruckt 4werden:
for(let x = 0; x < 5; ++x) {
setTimeout(() => console.log(x)) // `let` declarations are re-declared on a per-iteration basis, so the closures capture different variables
}
console.log(typeof x) // undefined
Im Folgenden wird KEIN a ausgelöst, ReferenceErrorda die Sichtbarkeit von xnicht durch den Block eingeschränkt wird. Es wird jedoch gedruckt, undefinedda die Variable nicht initialisiert wurde (aufgrund der ifAnweisung).
if(false) {
var x = 1
}
console.log(x) // here, `x` has been declared, but not initialised
Eine Variable, die am Anfang einer forSchleife mit letdeklariert wird, ist auf den Hauptteil der Schleife beschränkt:
for(let x = 0; x < 10; ++x) {}
console.log(typeof x) // undefined, because `x` is block-scoped
Im Folgenden wird a ausgelöst, ReferenceErrorda die Sichtbarkeit von xdurch den Block eingeschränkt wird:
if(false) {
let x = 1
}
console.log(typeof x) // undefined, because `x` is block-scoped
Variablen, die mit oder für Module deklariert wurden var, sind alle auf Module beschränkt:letconst
// module1.js
var x = 0
export function f() {}
//module2.js
import f from 'module1.js'
console.log(x) // throws ReferenceError
Im Folgenden wird eine Eigenschaft für das globale Objekt deklariert, da varim globalen Kontext deklarierte Variablen als Eigenschaften zum globalen Objekt hinzugefügt werden:
var x = 1
console.log(window.hasOwnProperty('x')) // true
letund constfügen Sie im globalen Kontext keine Eigenschaften zum globalen Objekt hinzu, haben aber dennoch einen globalen Bereich:
let x = 1
console.log(window.hasOwnProperty('x')) // false
Funktionsparameter können als im Funktionskörper deklariert betrachtet werden:
function f(x) {}
console.log(typeof x) // undefined, because `x` is scoped to the function
Catch-Block-Parameter sind auf den Catch-Block-Body beschränkt:
try {} catch(e) {}
console.log(typeof e) // undefined, because `e` is scoped to the catch block
Benannte Funktionsausdrücke beziehen sich nur auf den Ausdruck selbst:
(function foo() { console.log(foo) })()
console.log(typeof foo) // undefined, because `foo` is scoped to its own expression
Im nicht strengen Modus werden implizit definierte Eigenschaften für das globale Objekt global definiert. Im strengen Modus wird eine Fehlermeldung angezeigt.
x = 1 // implicitly defined property on the global object (no "var"!)
console.log(x) // 1
console.log(window.hasOwnProperty('x')) // true
Im nicht strengen Modus haben Funktionsdeklarationen einen Funktionsumfang. Im strengen Modus haben sie Blockbereich.
'use strict'
{
function foo() {}
}
console.log(typeof foo) // undefined, because `foo` is block-scoped
Wie es unter der Haube funktioniert
Der Bereich ist definiert als der lexikalische Codebereich, über den ein Bezeichner gültig ist.
In JavaScript hat jedes Funktionsobjekt eine versteckte [[Environment]]Referenz, die auf die lexikalische Umgebung des Ausführungskontexts (Stapelrahmen) verweist, in dem es erstellt wurde.
Wenn Sie eine Funktion aufrufen, wird die versteckte [[Call]]Methode aufgerufen. Diese Methode erstellt einen neuen Ausführungskontext und stellt eine Verbindung zwischen dem neuen Ausführungskontext und der lexikalischen Umgebung des Funktionsobjekts her. Dazu wird der [[Environment]]Wert für das Funktionsobjekt in ein äußeres Referenzfeld in der lexikalischen Umgebung des neuen Ausführungskontexts kopiert .
Beachten Sie, dass diese Verknüpfung zwischen dem neuen Ausführungskontext und der lexikalischen Umgebung des Funktionsobjekts als Abschluss bezeichnet wird .
Daher wird in JavaScript der Gültigkeitsbereich über lexikalische Umgebungen implementiert, die durch äußere Referenzen in einer "Kette" miteinander verbunden sind. Diese Kette von lexikalischen Umgebungen wird als Bereichskette bezeichnet, und die Auflösung von Bezeichnern erfolgt durch Durchsuchen der Kette nach einem passenden Bezeichner.
Erfahren Sie mehr .
