JavaScript-Heben


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Das Hochziehen ist das Standardverhalten von JavaScript beim Verschieben von Deklarationen in die Spitze.


JavaScript-Deklarationen werden gehisst

In JavaScript kann eine Variable nach ihrer Verwendung deklariert werden.

Mit anderen Worten; Eine Variable kann verwendet werden, bevor sie deklariert wurde.

Beispiel 1 liefert das gleiche Ergebnis wie Beispiel 2:

Beispiel 1

x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element
var x; // Declare x

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element

var x; // Declare x
</script>

</body>
</html> 

Beispiel 2

var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;                     
// Display x in the element

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x; // Declare x
x = 5; // Assign 5 to x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
</script>

</body>
</html> 

Um dies zu verstehen, muss man den Begriff „Heben“ verstehen.

Das Hochziehen ist das Standardverhalten von JavaScript, bei dem alle Deklarationen in die verschoben werden an den Anfang des aktuellen Bereichs (an den Anfang des aktuellen Skripts oder der aktuellen Funktion).


Die Schlüsselwörter let und const

Mit let und const definierte Variablen werden nach oben gehoben des Blocks, aber nicht initialisiert.<p>Bedeutung: Der Codeblock ist sich dessen bewusst Variable, kann aber erst verwendet werden, wenn sie deklariert wurde. <p>Die Verwendung einer let-Variable vor ihrer Deklaration führt zu einem ReferenceError.

Die Variable befindet sich von Anfang an in einer „zeitlichen Totzone“. des Blocks, bis er deklariert wird:

Beispiel

carName = "Volvo";
let carName;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Die Verwendung einer const-Variablen vor ihrer Deklaration stellt einen Syntaxfehler dar. Daher wird der Code einfach nicht ausgeführt.

Beispiel

Dieser Code wird nicht ausgeführt.

carName = "Volvo";
const carName;

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>

<p id="demo"></p>

<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>

</body>
</html>

Lesen Sie mehr über let und const in JS Let/Const.



JavaScript-Initialisierungen werden nicht gehisst

JavaScript hebt nur Deklarationen auf, keine Initialisierungen.

Beispiel 1 liefert nicht das gleiche Ergebnis wie Beispiel 2:

Beispiel 1

var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y = 7; // Initialize y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

</script>

</body>
</html> 

Beispiel 2

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5;  // Initialize x

elem = document.getElementById("demo");      // Find an element 
elem.innerHTML = "x is " + x + " and y is " + y;  // Display x and y

var y = 7;  // Initialize y
</script>

</body>
</html> 

Macht es Sinn, dass y im letzten Beispiel undefiniert ist?

Dies liegt daran, dass nur die Deklaration (var y), nicht die Initialisierung (=7) nach oben gehoben wird.

Wegen des Hebens wurde y vor der Verwendung deklariert, aber weil Initialisierungen werden nicht ausgelöst, der Wert von y ist undefiniert.

Beispiel 2 ist dasselbe wie das Schreiben:

Beispiel

var x = 5; // Initialize x
var y;     // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;           // Display x and y

y = 7;    // Assign 7 to y 

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var x = 5; // Initialize x
var y;   // Declare y

elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y

y = 7;   // Assign 7 to y

</script>

</body>
</html> 

Deklarieren Sie Ihre Variablen oben!

Das Hochziehen ist (für viele Entwickler) ein unbekanntes oder übersehenes Verhalten von JavaScript.

Wenn ein Entwickler das Heben nicht versteht, können Programme Bugs (Fehler) enthalten.<p> Um Fehler zu vermeiden, deklarieren Sie alle Variablen immer am Anfang von jeden Bereich.<p> Da JavaScript das so interpretiert Code, es ist immer eine gute Regel.

JavaScript im strikten Modus erlaubt die Verwendung von Variablen nicht, wenn dies der Fall ist nicht deklariert.
Lernen Sie „use strict“ im nächsten Kapitel.