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 die Funktionsweise in JavaScript.

Der Umfang ist ein grundlegendes Konzept in JavaScript und anderen Programmiersprachen, mit dem der Kontext definiert wird, in dem auf Variablen zugegriffen und sie verwendet werden. Je mehr Sie JavaScript erlernen und vermehrt mit Variablen arbeiten, desto nützlicher und praktischer wird es für Ihren Code.

Der Umfang kann Ihnen bei Folgendem helfen:

Arbeitsspeicher effizienter nutzen:Der Umfang bietet die Möglichkeit, Variablen nur bei Bedarf zu laden. Wenn eine Variable außerhalb des Gültigkeitsbereichs liegt, müssen Sie sie nicht für den Code verfügbar machen, der gerade ausgeführt wird.
Fehler leichter finden und beheben:Wenn Sie Variablen mit dem lokalen Geltungsbereich isolieren, ist die Fehlerbehebung in Ihrem Code einfacher, da Sie im Gegensatz zu globalen Variablen darauf vertrauen können, dass Code von außerhalb des Geltungsbereichs keine Variablen mit lokalem Geltungsbereich bearbeiten kann.
Kleine Blöcke mit wiederverwendbarem Code erstellen:Sie können beispielsweise eine reine Funktion schreiben, die nicht auf externen Geltungsbereichen angewiesen ist. Sie können eine solche Funktion mit minimalen Änderungen an einen anderen Ort verschieben.

Was ist der Geltungsbereich?

Der Geltungsbereich einer Variablen bestimmt, wo im Code eine Variable verwendet werden kann.

JavaScript definiert Variablen mit globalem oder lokalem Geltungsbereich:

Variablen mit globalem Geltungsbereich sind in allen anderen Bereichen im JavaScript-Code 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 Geltungsbereich.

In späteren Abschnitten dieses Artikels werden der Block- und lexikalische Geltungsbereich erläutert:

Variablen des Blockbereichs sind lokal für einen Block verfügbar. Dies wird anhand der Position der geschweiften Klammern bestimmt, an denen die Blockanweisung definiert ist. Nur Variablen, die mit den Keywords let oder const deklariert wurden, haben einen Blockierungsbereich.
Beim Lexikalischen Geltungsbereich wird die Stelle im Quellcode verwendet, an der eine Variable deklariert ist, um zu bestimmen, wo diese Variable verfügbar ist. Sie verwenden Closures, um einer geschlossenen Funktion Zugriff auf Variablen zu gewähren, die im äußeren Bereich, der als lexikalischen Umgebung bezeichnet werden, referenziert werden.

Wenn auf eine Variable innerhalb ihres Gültigkeitsbereichs zugegriffen wird, gibt JavaScript den zugewiesenen Wert zurück oder erzeugt auf andere Weise einen Fehler.

So deklarieren Sie eine Variable:

Verwenden Sie die Schlüsselwörter var, const oder let, um Variablen mit lokalem oder globalem Geltungsbereich zu deklarieren.
Verwenden Sie die Keywords const oder let, um Variablen für den Blockierungsbereich zu deklarieren.

Wenn Sie eine var-Variable in einer Funktion deklarieren, wird die Variable durch die Deklaration der nächsten einschließenden Funktion zur Verfügung gestellt. Das Keyword var kann nicht verwendet werden, um Variablen mit Blockierungsumfang zu deklarieren.

Beispiele für Bereiche

In diesem Beispiel wird der globale Gültigkeitsbereich dargestellt, da die Variable greeting außerhalb einer Funktion oder eines Blocks deklariert wird. Dadurch steht ihr Wert für den gesamten Code im aktuellen Dokument zur Verfügung:

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

Im Beispiel mit globalem Geltungsbereich wird der Variable greeting der Wert hello zugewiesen.

Dieses Beispiel zeigt den lokalen Geltungsbereich, da es die Variable greeting mit dem Schlüsselwort let innerhalb einer Funktion deklariert. Die Variable greeting ist eine Variable mit lokalem Umfang und steht außerhalb der Funktion nicht zur Verfügung.

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

In diesem Beispiel wird der Umfang des Blocks veranschaulicht, da die Variable greeting innerhalb eines Blocks deklariert wird, sodass nur innerhalb der geschweiften Klammern auf die Variable zugegriffen werden kann:

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 anstelle der erwarteten hello-Meldung die Fehlermeldung ReferenceError zurück. Warum?

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

In diesem Beispiel wird der Fehler behoben, da die Methode console.log(message) in die geschweiften Klammern verschoben wird. Durch den aktualisierten Code wird die Methode console.log(message) innerhalb des Blocks verschoben.

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

Arten des Umfangs

Globaler Geltungsbereich

Sie können von überall im Programm auf Variablen mit globalem Geltungsbereich 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 auf den Wert der Variablen 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 anderen Umfang, der in diesem Artikel nicht intensiv behandelt wird. Wenn Sie eine Variable in einem JavaScript-Modul, aber außerhalb einer Funktion oder eines Blocks erstellen, hat sie keinen globalen, sondern keinen Modulbereich. Variablen mit Modulumfang sind überall im aktuellen Modul verfügbar, jedoch nicht in anderen Dateien oder Modulen. Um eine modulbezogene Variable für andere Dateien verfügbar zu machen, 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 Funktionsumfang

Wenn Sie Variablen in einer JavaScript-Funktion mit den Schlüsselwörtern var, let oder const erstellen, sind die Variablen lokal für die Funktion vorhanden, sodass Sie nur von innerhalb der Funktion darauf 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 die Variable mit JavaScript aktualisiert werden. Mit dem 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

Blockbereich

Blocks 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 Keyword var kann nicht zum Deklarieren von Variablen mit Blockumfang verwendet werden.

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

{
    const name = "Elizabeth";
}

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

Beachten Sie die beiden for-Schleifen in diesem Code-Snippet. In einer for-Schleife wird das Schlüsselwort var zum Deklarieren der Initialisierungsvariable verwendet, die sich durch die Zahlen 0, 1 und 2 erhöht. In der anderen for-Schleife wird mit dem Schlüsselwort let die Initialisierungsvariable deklariert.

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 stellen Sie möglicherweise fest, dass die Variable i in der ersten for-Schleife außerhalb der for-Schleife durchgesickert ist und weiterhin einen 2-Wert behält, da das Keyword var keinen Blockbereich verwendet. Das Problem wird 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 nach Abschluss der for-Schleife nicht mehr existiert.

Wiederverwendung eines Variablennamens in einem anderen Bereich

Der Bereich kann eine Variable innerhalb einer Funktion isolieren, auch wenn Sie denselben Variablennamen an anderer Stelle in einem anderen Bereich wiederverwenden.

Dieses Beispiel zeigt, wie Sie durch die Verwendung des Bereichs einen 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 Umfang

Schließungen beziehen sich auf eine geschlossene Funktion, in der eine innere Funktion auf den äußeren Funktionsbereich zugreifen kann. Dieser wird auch als lexikalische Umgebung bezeichnet. In JavaScript verwenden Sie daher Closures, damit Funktionen auf die äußere lexikalische Umgebung verweisen können, sodass Code innerhalb einer Funktion auf Variablen verweisen kann, 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 eine Geschlossenheit mit der lexikalischen Umgebung, die beim Aufrufen der Funktion outer() erstellt wird und die über die Variable hello geschlossen wird. Daher wird die Variable hello innerhalb der Callback-Funktion setTimeout verwendet.

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

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

outer();

Beim lexikalischen Geltungsbereich wird der Umfang während der Kompilierung des Quellcodes festgelegt, nicht während der Laufzeit. Weitere Informationen zur lexikalischen Umgebung finden Sie unter Lexikalischer Geltungsbereich und Closure.

Module

JavaScript-Module helfen Ihnen, JavaScript-Code zu organisieren. Bei richtiger Verwendung bieten sie eine effektive Struktur für Ihre Codebasis und helfen bei der Wiederverwendung von Code. Statt globale Variablen zur gemeinsamen Nutzung von Variablen in verschiedenen Dateien zu verwenden, bieten JavaScript-Module ein Verfahren 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 des Bereichs-Visualizers

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

Fazit

In diesem Artikel werden verschiedene Arten des Umfangs vorgestellt. Der JavaScript-Bereich gehört zu den fortgeschritteneren Konzepten in der Webentwicklung. Daher ist es toll, dass Sie diesen Inhalt gelesen und sich Zeit genommen haben, um dieses Thema zu verstehen.

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