Der Geltungsbereich bestimmt die Zugänglichkeit (Sichtbarkeit) von Variablen.
JavaScript hat drei Arten von Bereichen:
Bereich blockieren
Funktionsumfang
Globaler Geltungsbereich
Vor ES6 (2015) hatte JavaScript nur Global Scope und Function Scope.
ES6 führte zwei wichtige neue JavaScript-Schlüsselwörter ein: let
und const
.
Diese beiden Schlüsselwörter stellen den Blockbereich in JavaScript bereit.
Auf innerhalb eines { }-Blocks deklarierte Variablen kann nicht zugegriffen werden von außerhalb des Blocks:
{
let x = 2;
}
// x can NOT be used here
Variablen, die mit dem Schlüsselwort var
deklariert wurden, dürfen KEINEN Blockbereich haben.
Auf Variablen, die innerhalb eines {}-Blocks deklariert sind, kann über zugegriffen werden außerhalb des Blocks.
{
var x = 2;
}
// x CAN be used here
Innerhalb einer JavaScript-Funktion deklarierte Variablen werden zu LOKAL zu die Funktion.
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p><b>carName</b> is undefined outside myFunction():</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
let carName = "Volvo";
document.getElementById("demo1").innerHTML = typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML = typeof carName;
</script>
</body>
</html>
Lokale Variablen haben einen Funktionsbereich:
Auf sie kann nur innerhalb der Funktion zugegriffen werden.
Da lokale Variablen nur innerhalb ihrer Funktionen erkannt werden, können Variablen mit demselben Namen in verschiedenen Funktionen verwendet werden.
Lokale Variablen werden beim Start einer Funktion erstellt und bei Abschluss der Funktion gelöscht.
JavaScript hat einen Funktionsbereich: Jede Funktion erstellt einen neuen Bereich.
Innerhalb einer Funktion definierte Variablen sind von außerhalb nicht zugänglich (sichtbar). Funktion.
Mit var
, let
deklarierte Variablen und const
sind ganz ähnlich, wenn es innerhalb einer Funktion deklariert wird.
Sie alle haben einen Funktionsumfang:
function myFunction() {
var carName = "Volvo";
// Function Scope
}
function myFunction() {
let carName = "Volvo"; //
Function Scope
}
function myFunction() {
const carName = "Volvo"; //
Function Scope
}
Eine außerhalb einer Funktion deklarierte Variable wird GLOBAL.
let carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>A GLOBAL variable can be accessed from any script or function.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "I can display " + carName;
}
</script>
</body>
</html>
Eine globale Variable hat einen Globalen Geltungsbereich:
Alle Skripte und Funktionen einer Webseite können darauf zugreifen.
Global deklarierte Variablen (außerhalb jeglicher Funktion) haben Globaler Geltungsbereich.
Auf Globale Variablen kann von überall in einem JavaScript-Programm zugegriffen werden.
Mit var
, let
deklarierte Variablen und const
sind ganz ähnlich, wenn es außerhalb eines Blocks deklariert wird.
Sie alle haben einen globalen Geltungsbereich:
var x = 2;
// Global scope
let x = 2; //
Global scope
const x = 2; //
Global scope
In JavaScript sind Objekte und Funktionen ebenfalls Variablen.
Der Geltungsbereich bestimmt die Zugänglichkeit von Variablen, Objekten und Funktionen verschiedene Teile des Codes.
Wenn Sie einer Variablen, die nicht deklariert wurde, einen Wert zuweisen, wird diese automatisch zu einer GLOBAL-Variable.
In diesem Codebeispiel wird eine globale Variable carName
deklariert, auch wenn Der Wert wird innerhalb einer Funktion zugewiesen.
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable:</p>
<p id="demo"></p>
<script>
myFunction();
// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;
function myFunction() {
carName = "Volvo";
}
</script>
</body>
</html>
Alle modernen Browser unterstützen die Ausführung von JavaScript im „Strict Mode“.
In einem späteren Kapitel dieses Tutorials erfahren Sie mehr über die Verwendung des strikten Modus.
Im „Strikten Modus“ sind nicht deklarierte Variablen nicht automatisch global.
Bei JavaScript ist der globale Geltungsbereich die JavaScript-Umgebung.
In HTML ist der globale Bereich das Fensterobjekt.
Globale Variablen, die mit dem Schlüsselwort var
definiert sind, gehören zum Fensterobjekt:
var carName = "Volvo";
// code here
can use window.carName
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Scope</h2>
<p>In HTML, global variables defined with <b>var</b>, will become window variables.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
// code here can use window.carName
document.getElementById("demo").innerHTML = "I can display " + window.carName;
</script>
</body>
</html>
Globale Variablen, die mit dem Schlüsselwort let
definiert wurden, gehören nicht zum Fensterobjekt:
let carName = "Volvo";
// code here can not use window.carName
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Global Variables</h2>
<p>In HTML, global variables defined with <b>let</b>, will not become window variables.</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
// code here can not use window.carName
document.getElementById("demo").innerHTML = "I can not display " + window.carName;
</script>
</body>
</html>
Erstellen Sie KEINE globalen Variablen, es sei denn, Sie beabsichtigen dies.
Ihre globalen Variablen (oder Funktionen) können Fenstervariablen (bzw Funktionen).
Jede Funktion, einschließlich des Fensterobjekts, kann Ihr globales überschreiben Variablen und Funktionen.
Die Lebensdauer einer JavaScript-Variable beginnt mit ihrer Deklaration.
Funktionsvariablen (lokale Variablen) werden gelöscht, wenn die Funktion abgeschlossen ist.
In einem Webbrowser werden globale Variablen gelöscht, wenn Sie den Browser schließen Fenster (oder Tab).
Funktionsargumente (Parameter) fungieren als lokale Variablen innerhalb von Funktionen.