JavaScript-Bereich


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Der Geltungsbereich bestimmt die Zugänglichkeit (Sichtbarkeit) von Variablen.

JavaScript hat drei Arten von Bereichen:

  • Bereich blockieren

  • Funktionsumfang

  • Globaler Geltungsbereich

Blockumfang

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:

Beispiel

{ 
  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.

Beispiel

{ 
  var x = 2; 
  }
// x CAN be used here

Lokaler Geltungsbereich

Innerhalb einer JavaScript-Funktion deklarierte Variablen werden zu LOKAL zu die Funktion.

Beispiel

// 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.


Funktionsumfang

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
}

Globale JavaScript-Variablen

Eine außerhalb einer Funktion deklarierte Variable wird GLOBAL.

Beispiel

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.


Globaler Geltungsbereich

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

JavaScript-Variablen

In JavaScript sind Objekte und Funktionen ebenfalls Variablen.

Der Geltungsbereich bestimmt die Zugänglichkeit von Variablen, Objekten und Funktionen verschiedene Teile des Codes.



Automatisch global

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.

Beispiel

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>

strikter Modus

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.


Globale Variablen in HTML

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:

Beispiel

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:

Beispiel

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>

Warnung

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 von JavaScript-Variablen

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

Funktionsargumente (Parameter) fungieren als lokale Variablen innerhalb von Funktionen.