Diese Seite wurde von der Cloud Translation API übersetzt.

Umfang der globalen und lokalen Variablen

In diesem Artikel erfahren Sie mehr über den Umfang und seine Funktionsweise in JavaScript.

Der Umfang ist ein grundlegendes Konzept in JavaScript und anderen Programmiersprachen, das den Kontext definiert, in dem auf Variablen zugegriffen und sie verwendet werden. Je mehr Sie mit JavaScript lernen und immer mehr mit Variablen arbeiten, desto nützlicher und auf Ihren Code anwendbarer wird die Funktion.

Der Umfang kann Ihnen bei Folgendem helfen:

Arbeitsspeicher effizienter nutzen:Scope bietet die Möglichkeit, Variablen nur bei Bedarf zu laden. Wenn eine Variable außerhalb des Geltungsbereichs liegt, müssen Sie sie dem Code, der gerade ausgeführt wird, nicht zur Verfügung stellen.
Fehler leichter finden und beheben:Wenn Sie Variablen mit lokalem Umfang isolieren, ist es einfacher, Fehler in Ihrem Code zu beheben, da Sie im Gegensatz zu globalen Variablen darauf vertrauen können, dass Code außerhalb des Geltungsbereichs lokal beschränkte Variablen nicht manipulieren kann.
Kleine wiederverwendbare Codeblöcke erstellen:Sie können beispielsweise eine reine Funktion schreiben, die nicht von einem externen Bereich abhängig ist. Sie können eine solche Funktion mit minimalen Änderungen problemlos an eine andere Stelle verschieben.

Was ist der Geltungsbereich?

Der Umfang einer Variablen bestimmt, wo im Code Sie eine Variable verwenden können.

JavaScript definiert globale oder lokale Variablen:

Variablen mit globalem Geltungsbereich sind in allen anderen Bereichen innerhalb des JavaScript-Codes verfügbar.
Variablen mit lokalem Geltungsbereich sind nur in einem bestimmten lokalen Kontext verfügbar und werden durch Schlüsselwörter wie var, let und const erstellt. Wenn Sie die Schlüsselwörter var, let oder const verwenden, um eine Variable innerhalb einer Funktion zu erstellen, hat diese Variable einen lokalen Gültigkeitsbereich.

In späteren Abschnitten dieses Artikels werden der blockierte und der lexikalische Bereich erläutert:

Variablen des Block-Bereichs sind lokal für einen Block verfügbar. Dies richtet sich nach der Position der geschweiften Klammern an der Stelle, an der die Block-Anweisung definiert ist. Nur Variablen, die mit den Keywords let oder const deklariert sind, haben einen Blockierbereich.
Der lexikalische Geltungsbereich verwendet die Stelle, an der eine Variable im Quellcode deklariert ist, um zu bestimmen, wo sie verfügbar ist. Mit Verschlüssen gewähren Sie einer eingeschlossenen Funktion Zugriff auf Variablen, auf die im äußeren Bereich, der als lexikalische Umgebung bezeichnet wird, referenziert wird.

Wenn der Zugriff auf eine Variable innerhalb ihres Geltungsbereichs erfolgt, gibt JavaScript den zugewiesenen Wert zurück oder löst einen Fehler aus.

So deklarieren Sie eine Variable:

Verwenden Sie die Keywords var, const oder let, um Variablen auf lokaler oder globaler Ebene zu deklarieren.
Verwenden Sie die Schlüsselwörter const oder let, um Variablen auf Blockebene zu deklarieren.

Wenn Sie eine var-Variable in einer Funktion deklarieren, stellt die Deklaration die Variable der nächsten einschließenden Funktion zur Verfügung. Das Schlüsselwort var kann nicht zum Deklarieren von Variablen mit Blockierungsumfang verwendet werden.

Beispiele für Bereiche

Dieses Beispiel zeigt den globalen Gültigkeitsbereich, da die Variable greeting außerhalb einer Funktion oder eines Blocks deklariert wird. Dadurch wird der entsprechende Wert für den gesamten Code im aktuellen Dokument verfügbar gemacht:

const greeting = 'hello';
console.log(greeting); // 'hello'

Im Beispiel für den globalen Geltungsbereich wird der Variablen greeting ein Wert hello zugewiesen.

Dieses Beispiel zeigt den lokalen Gültigkeitsbereich, da die Variable greeting mit dem Schlüsselwort let innerhalb einer Funktion deklariert wird. Die Variable greeting ist eine lokal beschränkte Variable und nicht außerhalb der Funktion verfügbar.

function greet() {
  let greeting = 'Hello World!';
  console.log(greeting);
}

Dieses Beispiel zeigt den Blockumfang, da die Variable greeting innerhalb eines Blocks deklariert wird, sodass die Variable nur innerhalb der geschweiften Klammern zugänglich ist:

if (true) {
   const greeting = 'hello';
}

console.log(greeting); // ReferenceError: greeting is not defined

Wenn die Funktion console.log versucht, den Wert der Variablen greeting auszugeben, gibt JavaScript die Fehlermeldung ReferenceError anstelle der erwarteten hello-Meldung zurück. Woran liegt das?

Ein Fehler wird zurückgegeben, da die Variable greeting einen Blockumfang hat und der nächstgelegene Block Teil der bedingten if-Anweisung ist. Sie können innerhalb eines Blocks von außerhalb des Blocks nicht auf die Variablen let und const zugreifen. Daher können Sie nur auf die Variable greeting innerhalb der geschweiften Klammern zugreifen, die den Blockbereich angeben.

In diesem Beispiel wird der Fehler behoben, da die Methode console.log(message) innerhalb der geschweiften Klammern verschoben wird. Der aktualisierte Code verschiebt die Methode console.log(message) innerhalb des Blocks.

if (true) {
   const greeting = 'hello';
   console.log(greeting);
}

Umfang

Globaler Geltungsbereich

Sie können von überall im Programm auf globale Variablen zugreifen.

Sehen wir uns eine HTML-Datei an, die zwei JavaScript-Dateien importiert: file-1.js und file-2.js:

<script src="file-1.js"></script>
<script src="file-2.js"></script>

In diesem Beispiel hat die Variable globalMessage einen globalen Geltungsbereich und wird außerhalb einer Funktion geschrieben. Während der Ausführung und Ausführung können Sie von überall im JavaScript-Programm aus auf den Wert der Variable globalMessage zugreifen.

In diesem Code-Snippet sehen Sie den Inhalt der Dateien file-1.js und file-2.js. Die Variable globalMessage ist in beiden Dateien verfügbar.

// file-1.js
function hello() {
    var localMessage = 'Hello!';
}

var globalMessage = 'Hey there!';

// file-2.js
console.log(localMessage); // localMessage is not defined
console.log(globalMessage); // Hey there!

Es gibt einen weiteren Umfang, der in diesem Artikel nicht ausführlich behandelt wird. Wenn Sie eine Variable innerhalb eines JavaScript-Moduls, aber außerhalb einer Funktion oder eines Blocks erstellen, hat sie keinen globalen Geltungsbereich, sondern sie hat vielmehr den Modulbereich. Variablen mit Modulumfang sind überall im aktuellen Modul verfügbar, aber nicht in anderen Dateien oder Modulen. Wenn Sie eine modulbezogene Variable für andere Dateien verfügbar machen möchten, müssen Sie sie aus dem Modul, in dem sie erstellt wurde, exportieren und dann aus dem Modul import, das auf die Variable zugreifen muss.

Lokaler Bereich und Funktionsbereich

Wenn Sie Variablen in einer JavaScript-Funktion mit den Keywords var, let oder const erstellen, sind die Variablen lokal der Funktion zugeordnet, sodass Sie nur innerhalb der Funktion auf sie zugreifen können. Lokale Variablen werden beim Start einer Funktion erstellt und gelöscht, wenn die Ausführung der Funktion abgeschlossen ist.

In diesem Beispiel wird die Variable total in der Funktion addNumbers() deklariert. Sie können nur innerhalb der Funktion addNumbers() auf die Variablen a, b, und total zugreifen.

function addNumbers(a, b) {
    const total = a + b;
}

addNumbers(3, 4);

Sie können die Schlüsselwörter let und const verwenden, um Variablen zu benennen. Wenn Sie das Keyword let verwenden, kann JavaScript die Variable aktualisieren. Beim Keyword const bleibt die Variable jedoch konstant.

var variable1 = 'Declared with var';
var variable1 = 'Redeclared with var';
variable1; // Redeclared with var

let variable2 = 'Declared with let. Cannot be redeclared.';
variable2 = 'let cannot be redeclared, but can be updated';
variable2; // let cannot be redeclared, but can be updated

const variable3 = 'Declared with const. Cannot be redeclared or updated';
variable3; // Declared with const. Cannot be redeclared or updated

Bereich blockieren

Blockierungen werden verwendet, um eine einzelne Anweisung oder eine Reihe von Anweisungen zu gruppieren. Sie können das Schlüsselwort const oder let verwenden, um eine lokale Variable auf Blockebene zu deklarieren. Das Schlüsselwort var kann nicht zum Deklarieren von Variablen mit Blockierungsumfang verwendet werden.

In diesem Block ist beispielsweise der Umfang für die Variable name und ihren Wert "Elizabeth" in geschweiften Klammern enthalten. Variablen innerhalb eines Blockbereichs sind außerhalb des Blocks nicht verfügbar.

{
    const name = "Elizabeth";
}

Sie können Variablen mit Blockebene in if-, for- oder while-Anweisungen verwenden.

Beachten Sie die beiden for-Schleifen in diesem Code-Snippet. Eine for-Schleife verwendet das Schlüsselwort var, um die Initialisierungsvariable zu deklarieren, die durch die Zahlen 0, 1 und 2 erhöht wird. Die andere for-Schleife verwendet das Schlüsselwort let, um die Initialisierungsvariable zu deklarieren.

for (var i = 0; i < 2; i++) {
    // ...
}

console.log(i); // 2

for (let j = 0; j < 2; j++) {
    // ...
}

console.log(j); // The j variable isn't defined.

Im vorherigen Codebeispiel ist Ihnen vielleicht aufgefallen, dass die i-Variable in der ersten for-Schleife außerhalb der for-Schleife erfasst wurde und dennoch einen 2-Wert beibehält, da das var-Keyword keinen Blockierbereich verwendet. Das Problem wurde in der zweiten for-Schleife behoben, in der die mit dem Keyword let deklarierte Variable j auf den Block der for-Schleife beschränkt ist und nicht mehr existiert, nachdem die for-Schleife beendet wurde.

Wiederverwendung eines Variablennamens in einem anderen Bereich

Mit dem Umfang kann eine Variable innerhalb einer Funktion isoliert werden, selbst wenn Sie denselben Variablennamen an anderer Stelle in einem anderen Bereich wiederverwenden.

In diesem Beispiel wird gezeigt, wie Sie durch Verwendung des Umfangs denselben Variablennamen in verschiedenen Funktionen wiederverwenden können:

function listOne() {
    let listItems = 10;
    console.log(listItems); // 10
}

function listTwo() {
   let listItems = 20;
   console.log(listItems); // 20
}

listOne();
listTwo();

Den listItems-Variablen in den Funktionen listOne() und listTwo() werden die erwarteten Werte zugewiesen, sodass sie nicht miteinander in Konflikt stehen.

Schließungen und lexikalischer Bereich

Schließungen beziehen sich auf eine eingeschlossene Funktion, bei der eine innere Funktion auf den äußeren Funktionsbereich zugreifen kann. Dies wird auch als lexikalische Umgebung bezeichnet. In JavaScript verwenden Sie daher Closures, damit Funktionen auf die äußere lexikalische Umgebung verweisen können. Dadurch kann der Code innerhalb einer Funktion auf Variablen verweisen, die außerhalb der Funktion deklariert wurden. Tatsächlich können Sie eine Kette von Verweisen auf äußere lexikalische Umgebungen codieren, sodass eine Funktion von einer Funktion aufgerufen wird, die wiederum von einer anderen Funktion aufgerufen wird.

In diesem Beispiel bildet der Code einen Abschluss mit der lexikalen Umgebung, die erstellt wird, wenn die Funktion outer() aufgerufen wird und die über die Variable hello geschlossen wird. Daher wird die Variable hello in der Callback-Funktion setTimeout verwendet.

function outer() {
    const hello = 'world';

    setTimeout(function () {
        console.log('Within the closure!', hello)
    }, 100);
}

outer();

Beim lexikalischen Bereich wird der Umfang während der Kompilierung des Quellcodes festgelegt, nicht während der Laufzeit. Weitere Informationen zur lexischen Umgebung finden Sie unter Lexikalische Bereiche und -schließungen.

Module

JavaScript-Module helfen beim Organisieren von JavaScript-Code. Bei richtiger Anwendung bieten sie Ihrer Codebasis eine effektive Struktur und helfen bei der Wiederverwendung des Codes. Anstatt globale Variablen zu verwenden, um Variablen für verschiedene Dateien freizugeben, bieten JavaScript-Module eine Technik zum Exportieren und import von Variablen.

// hello.js file
function hello() {
  return 'Hello world!';
}

export { hello };

// app.js file
import { hello } from './hello.js';

console.log(hello()); // Hello world!

Demo für Bereichsvisualisierer

Der Umfang ist ein grundlegendes Konzept, das jeder JavaScript-Entwickler verstehen sollte. Um das Umfangssystem besser zu verstehen, können Sie versuchen, eigenen Code mit JS Scope Visualizer zu schreiben. In der Demo werden Farben im Code verwendet, um JavaScript-Bereiche zu visualisieren.

Fazit

In diesem Artikel werden verschiedene Arten von Geltungsbereichen vorgestellt. Der JavaScript-Umfang ist eines der komplexeren Konzepte in der Webentwicklung. Daher ist es großartig, dass Sie diesen Inhalt gelesen und sich Zeit genommen haben, dieses Thema zu verstehen.

Der Umfang ist keine Funktion für Nutzer. Es betrifft nur Webentwickler, die Code schreiben, aber wenn Sie wissen, wie der Umfang funktioniert, können Sie Programmfehler beheben, wenn sie auftreten.