Das Hochziehen ist das Standardverhalten von JavaScript beim Verschieben von Deklarationen in die Spitze.
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:
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>
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).
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:
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.
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 hebt nur Deklarationen auf, keine Initialisierungen.
Beispiel 1 liefert nicht das gleiche Ergebnis wie Beispiel 2:
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>
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:
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>
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.