JavaScript-hissning


Innehållsförteckning

    Visa innehållsförteckning


Hissning är JavaScripts standardbeteende för att flytta deklarationer till topp.


JavaScript-deklarationer är hissade

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:

Exempel 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

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> 

Exempel 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

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


Sökorden låt och förbli

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:

Exempel

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.

Exempel

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-initialiseringar lyfts inte

JavaScript lyfter bara deklarationer, inte initialiseringar.

Exempel 1 ger inte samma resultat som Exempel 2:

Exempel 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

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> 

Exempel 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

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:

Exempel

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> 

Deklarera dina variabler överst!

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.