So funktioniert Scoping in JavaScript

„Geltungsbereich“ bezieht sich auf den aktuellen Ausführungskontext, in dem Ihr Code Werte und Ausdrücke referenzieren oder „sehen“ kann. Auf Variablen, Objekte und Funktionen aus verschiedenen Teilen des Codes kann basierend auf ihren Bereichen zugegriffen werden.

In JavaScript können Variablen, Objekte und Funktionen einen globalen Bereich, einen Modulbereich, einen Blockbereich oder einen Funktionsbereich haben.

Globaler Geltungsbereich in JavaScript

Jeder Wert, der außerhalb einer Funktion oder eines Blocks in einem Skript deklariert wird, hat einen globalen Geltungsbereich und jede andere Skriptdatei in Ihrem Programm kann darauf zugreifen.

Deklarieren Sie beispielsweise eine globale Variable in einer Datei:

// index.js
Lassen Sie globaleVariable = "irgendein Wert"

Bedeutet, dass jedes andere Skript in Ihrem Programm darauf zugreifen kann:

// otherScript.js
Konsole.log (globaleVariable) // irgendein Wert

JavaScript-Variablen deklarieren im globalen Bereich ist eine schlechte Vorgehensweise, da dies zu einer Verschmutzung des Namensraums führen kann. Der globale Namespace ist der oberste Bereich von Javascript, der die Variablen, Objekte und Funktionen enthält. In einem Browser wird es an die angehängt

Fenster Objekt, während NodeJS ein Objekt namens verwendet global.

Das Verschmutzen des globalen Namensraums kann zu einer Namenskollision führen. Dies ist eine Situation, in der Ihr Code versucht, denselben Variablennamen für verschiedene Dinge im selben Namespace zu verwenden. Namenskollisionen treten häufig in großen Projekten auf, die mehrere Bibliotheken von Drittanbietern verwenden.

Modulumfang

Ein Modul ist eine eigenständige Datei, die Codeteile kapselt und exportiert, die andere Module in einem Projekt verwenden können. Es ermöglicht Ihnen, Ihre Codebasis effizienter zu organisieren und zu pflegen.

ES-Module formalisiert das JavaScript-Modulmuster in JavaScript im Jahr 2015.

Variablen, die Sie in einem Modul deklarieren, gelten für dieses Modul, was bedeutet, dass kein anderer Teil des Programms auf sie zugreifen kann.

Sie können eine in einem Modul deklarierte Variable nur dann außerhalb davon verwenden, wenn das Modul diese Variable mithilfe von exportiert Export Stichwort. Sie können diesen Namen dann mithilfe von in ein anderes Modul importieren importieren Stichwort.

Hier ist ein Beispiel, das den Export einer Klasse zeigt:

// index.js
ExportKlasseFoo{
Konstrukteur(Eigenschaft_1, Eigenschaft_2) {
Dies.property_1 = eigenschaft_1
Dies.property_2 = eigenschaft_2
 }
}

Und so können Sie dieses Modul importieren und die exportierte Eigenschaft verwenden:

// einigeModule.js
importieren { Foo } aus './index.js'
const bar = new Foo('foo', 'Bar')
Konsole.log (bar.property_1) // foo

Dateien werden in JavaScript standardmäßig nicht als Module deklariert.

In clientseitigem JavaScript können Sie ein Skript als Modul deklarieren, indem Sie die Typ zuschreiben Modul auf der Skript Schild:

<Skripttyp="Modul" Quelle="index.js"></script>

In NodeJS können Sie ein Skript als Modul deklarieren, indem Sie die Typ Eigentum zu Modul in deiner Paket.json Datei:

{
"Typ": "Modul"
}

Bereich blockieren

Ein Block in JavaScript ist, wo ein Paar geschweifter Klammern beginnt und endet.

Variablen, die innerhalb eines Blocks mit deklariert sind Lassen, und konst Schlüsselwörter sind auf diesen Block beschränkt, was bedeutet, dass Sie außerhalb davon nicht darauf zugreifen können. Dieser Gültigkeitsbereich gilt nicht für Variablen, die mit deklariert wurden Var Stichwort:

{ // Beginn des Blocks
 const eins = '1'
 lass zwei = '2'
 var drei = '3'
} // Blockende
Konsole.log (eins) // wirft Fehler
Konsole.log (drei) // "3"

Auf die im obigen Block eingeschlossenen und als const oder let deklarierten Variablen kann nur innerhalb des Blocks zugegriffen werden. Sie können jedoch auf die deklarierte Variable zugreifen, indem Sie die verwenden Var Schlüsselwort außerhalb des Blocks.

Funktionsumfang

Innerhalb einer Funktion deklarierte Variablen werden allgemein als lokale Variablen bezeichnet und sind auf die Funktion beschränkt. Sie können außerhalb der Funktion nicht darauf zugreifen. Dieser Gültigkeitsbereich gilt für Variablen, die mit deklariert wurden Var, Lassen, und konst Schlüsselwörter.

Da in einer Funktion deklarierte Variablen für die Funktion lokal sind, können die Namen der Variablen wiederverwendet werden. Die Wiederverwendung von funktionsbezogenen Variablennamen wird als Variablenschatten bezeichnet, und die äußere Variable wird als „beschattet“ bezeichnet.

Zum Beispiel:

Funktionmultiplizieren() {
Lassen eins = 1
Var zwei = 2
konst drei = 3
Rückkehr eins zwei drei
}
// Variables Shadowing
konst drei = 'drei' // Löst keinen Fehler aus

Ein Verständnis der Scoping-Regeln ist von entscheidender Bedeutung

Wenn Sie die verfügbaren Bereiche in JavaScript kennen, können Sie Fehler leichter vermeiden. Der Versuch, auf eine Variable zuzugreifen, die in einem bestimmten Bereich nicht verfügbar ist, ist eine echte Fehlerquelle.

Ein Verständnis des Umfangs beinhaltet auch Konzepte wie die globale Namespace-Verschmutzung, die Ihren Code anfälliger für Fehler machen kann.