Hissning är JavaScripts standardbeteende för att flytta deklarationer till topp.
I JavaScript kan en variabel deklareras efter att den har använts.
Med andra ord; en variabel kan användas innan den har deklarerats.
Exempel 1 ger samma resultat som Exempel 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
Prova själv →
<!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
Prova själv →
<!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>
För att förstå detta måste du förstå termen "hissning".
Hissning är JavaScripts standardbeteende att flytta alla deklarationer till överst i det aktuella omfånget (till toppen av det aktuella skriptet eller den aktuella funktionen).
Variabler definierade med let
och const
hissas till toppen av blocket, men inte initierat.<p>Betydning: Kodblocket är medvetet om variabel, men den kan inte användas förrän den har deklarerats. <p>Användning av en let
-variabel innan den deklareras kommer att resultera i en Referensfel
.
Variabeln är i en "temporell död zon" från början av blocket tills det deklareras:
carName = "Volvo";
let carName;
Prova själv →
<!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>
Att använda en const
-variabel innan den deklareras är ett syntaxfel, så koden kommer helt enkelt inte att köras.
Den här koden kommer inte att köras.
carName = "Volvo";
const carName;
Prova själv →
<!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>
Läs mer om låt och konst i JS Let/Const.
JavaScript lyfter bara deklarationer, inte initialiseringar.
Exempel 1 ger inte samma resultat som Exempel 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
Prova själv →
<!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
Prova själv →
<!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>
Är det vettigt att y är odefinierat i det sista exemplet?
Detta beror på att endast deklarationen (var y), inte initialiseringen (=7) lyfts till toppen.
På grund av hissning har y deklarerats innan den används, men pga initialiseringar hissas inte, värdet på y är odefinierat.
Exempel 2 är detsamma som att skriva:
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
Prova själv →
<!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>
Hissning är (för många utvecklare) ett okänt eller förbisett beteende hos JavaScript.
Om en utvecklare inte förstår hissning, kan program innehålla buggar (fel).<p> För att undvika buggar, deklarera alltid alla variabler i början av varje omfattning.<p> Eftersom det är så här JavaScript tolkar kod är det alltid en bra regel.
JavaScript i strikt läge tillåter inte att variabler används om de är det inte deklarerat.
Studera "använd strikt" i nästa kapitel.