JavaScript Hoisting

Hævning (Hoisting) er JavaScript's standardadfærd for at flytte deklarationer til toppen.

JavaScript deklarationer hæves

I JavaScript kan man deklarere en variabel, før den bruges.

Med andre ord, kan man bruge variablen, før den er deklareret.

Eksempel 1 medEksempel 2 resultaterne er de samme:

Eksempel 1

x = 5; // Tilføj 5 til x
elem = document.getElementById("demo"); // Find element
elem.innerHTML = x;                     // Vis x i elementet
var x; // Deklarere x

Prøv det selv

Eksempel 2

var x; // Deklarere x
x = 5; // Tilføj 5 til x
elem = document.getElementById("demo"); // Find element
elem.innerHTML = x;                     // Vis x i elementet

Prøv det selv

For at forstå dette, skal du forstå termbegrebet "hoisting".

Hoisting er JavaScript's standardadfærd for at hæve alle deklarationer til toppen af den aktuelle scop (hæve til toppen af det aktuelle script eller den aktuelle funktion).

let og const-nøgordene

med let eller const Deklarerede variabler og konstanter hæves ikke!

Vær venlig at JS Let / Const Læs mere om let og const her.

JavaScript initialiseringer hæves ikke

JavaScript hæver kun deklarationer, ikke initialiseringer.

Eksempel 1 medEksempel 2 resultaterne er forskellige:

Eksempel 1

var x = 5; // Initialiser x
var y = 7; // Initialiser y
elem = document.getElementById("demo"); // Find element
elem.innerHTML = x + " " + y;           // Vis x og y

Prøv det selv

Eksempel 2

var x = 5; // Initialiser x
elem = document.getElementById("demo"); // Find element
elem.innerHTML = x + " " + y;           // Vis x og y
var y = 7; // Initialiser y 

Prøv det selv

Er det fornuftigt at sige, at y stadig er udefineret i det sidste eksempel?

Dette er fordi kun deklarationen (var y) og ikke initialiseringen (=7) er hævet op til toppen.

Takket være hoisting er y blevet erklæret, før den bruges, men da initialiseringen ikke er løftet, er værdien af y stadig udefineret.

Eksempel 2 er også ligesom:

Eksempel

var x = 5; // Initialiser x
var y;     // Erklær y
elem = document.getElementById("demo"); // Find element
elem.innerHTML = x + " " + y;           // Vis x og y
y = 7;    // Tilføj 7 til y

Prøv det selv

Erklær dine variabler øverst!

Hoisting (for mange udviklere) er en ukendt eller ignoreret adfærd i JavaScript.

Hvis udviklere ikke forstår hoisting, kan programmet indeholde fejl (fejl).

For at undgå fejl skal du altid erklære alle variabler i begyndelsen af hver funktionsområde.

Da dette er måden, JavaScript fortolker kode på, skal du holde denne gode vane.

Strict mode i JavaScript tillader ikke brug af variabler, der ikke er erklæret.

Lær mere i det næste kapiteluse strict