Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission.

Hoisting er en JavaScript-mekanisme, der giver dig adgang til variabler og funktioner, før du initialiserer dem. At hejse en sådan erklæring flytter den effektivt til toppen af ​​dens anvendelsesområde.

Lær alt om, hvordan hejsning fungerer i JavaScript, og hvordan du administrerer det bedst for at undgå fejl i din kode.

Løftevariabler Med var, lad og konst

Hoisting er muligt, fordi JavaScript bruger JIT (Just-in-Time) kompileringssystemet, som scanner din kode for at identificere alle variabler i deres respektive omfang.

JIT-kompileren hejser derefter alle forekomster af variable erklæringer til toppen af ​​deres omfang ved kompilering. JavaScript løfter kun erklæringer af variabler, ikke deres initialiseringer.

Opførslen af ​​variabler, når de hejses, afhænger af det nøgleord, du erklærer dem med, da hvert søgeord opfører sig forskelligt.

var

Adgang til en ikke-initialiseret variabel erklæret med

instagram viewer
var søgeord vender tilbage udefineret. For eksempel:

konsol.log (foo); // udefineret
var foo = 2;

Ovenstående kodelogs udefineret fordi den kalder console.log før den initialiserer variablen.

JavaScript-compileren ser den forrige kodeblok sådan:

var foo;
konsol.log (foo); // udefineret
foo = 2;

Under hejsning adlyder variabler regler for JavaScript-omfang. Javascript vil kun hejse en variabel til toppen af ​​det omfang, du erklærede den i. Forsøg på at logge værdien af ​​en variabel uden for dens erklærede omfang vil resultere i en Referencefejl. For eksempel, hvis du erklærer en variabel inde i en funktion, vil den ikke være synlig uden for dette omfang:

fungereminFunktion() {
konsol.log (foo); // udefineret
var foo = 10;
}
minFunktion();
konsol.log (foo); // ReferenceError: foo er ikke defineret

At forsøge at få adgang til en variabel uden for dens omfang vil resultere i en Referencefejl.

lade og konst

Ifølge MDN dokumentation vedr lade og konst hejsning, JavaScript hejser også variabler, der er erklæret med lade og konst søgeord. Men i modsætning til variabler deklareret med var søgeord, initialiseres de ikke med en udefineret værdi.

For eksempel:

fungereminFunktion() {
konsol.log (foo); // udefineret
konsol.log (bjælke); // ReferenceError: Kan ikke få adgang til 'bar' før initialisering
konsol.log (baz); // ReferenceError: Kan ikke få adgang til 'baz' før initialisering
var foo = 5;
lade bar = 10;
konst baz = 15;
}
minFunktion();

Du kan ikke få adgang til variabler, der er erklæret med nøgleordene let og const, før du initialiserer dem med en værdi.

Løftefunktioner

JavaScript-hejse fungerer på samme måde som variabler. Som med variabler afhænger det af, hvordan du erklærer dem. For eksempel hejser JavaScript funktionserklæringer anderledes end funktionsudtryk.

En funktionserklæring er en funktion, der er erklæret med et navn, mens et funktionsudtryk er en funktion, hvis navn du kan udelade. For eksempel:

fungerefoo() {
// funktionserklæring
}
konst bar = () => {
// funktionsudtryk
}

JavaScript hejser funktionserklæringer, men ikke funktionsudtryk. For eksempel:

foo(); // 5
bar(); // TypeError: bar() er ikke en funktion
// Funktionserklæring
fungerefoo() {
konsol.log(5);
}
// Funktionsudtryk
var bar = fungereudtryk() {
konsol.log(10);
};

Denne kode kalder foo før den erklærer og initialiserer den som en funktion, men den logger stadig 5 til konsollen. Prøver dog at ringe bar resulterer i en Typefejl.

Håndtering af hejsning

At være opmærksom på hejsning og de potentielle fejl, der kan opstå, hvis det håndteres forkert, kan spare dig for mange timers fejlretning. Her er nogle måder, du kan styre hejsning på.

Erklære variabler inde i funktioner

Deklarer variabler inde i de funktioner, der vil få adgang til dem. Du vil ikke altid være i stand til at gøre dette, da du muligvis har brug for en global variabel, som du kan få adgang til inden for flere funktioner. Så sørg for, at du kun erklærer variabler globalt, hvis du virkelig har brug for det.

Angiv variabler Med let eller const

Du bør altid bruge let og const søgeord i stedet for var nøgleord, når du deklarerer variable. Denne praksis er fordelagtig, når du erklærer lokale variabler i en funktion. At kende de rigtige måder at erklære variabler i JavaScript reducerer chancerne for fejl forårsaget af hejsning i din kode.

Erklær variabler øverst i deres omfang

Erklær alle dine variabler øverst i deres respektive omfang, før andre udsagn. Hvis du gør det, sikrer du, at JavaScript-kompileren ikke behøver at hejse disse variabler for at få adgang til dem.

Brug af streng tilstand

Strict mode er en JavaScript-tilstand der regulerer dårlig syntaks, optimerer køretiden for din kode og forbyder misbrug af JavaScripts løst indtastede syntaks ved at smide fejl på kompileringstidspunktet.

For eksempel, i "sjusket tilstand" på grund af hejsning, kan du få adgang til en variabel uden for den initialiserede funktion, selvom den ikke blev erklæret:

minFunktion();
konsol.log (foo); // 20
fungereminFunktion() {
 foo = 20; 
}

I kodeblokken ovenfor erklærer JavaScript automatisk foo og hejser det til toppen af ​​det globale scope og ignorerer det scope, du initialiserede det i.

Du kan bruge streng tilstand til at rette op på denne adfærd og give en fejl, hvis du prøver at få adgang til variablen uden for dens funktionsområde.

Strenge tilstand stopper ikke helt med at hejse. I stedet forhindrer det de mest forvirrende og fejltilbøjelige former for hejsning. Det er stadig vigtigt at forstå det generelle koncept og reglerne bag hejsning, selv når du bruger det strenge sikkerhedsnet.

For at vælge streng tilstand på globalt niveau skal du angive syntaksen øverst i din scriptfil:

"brugstreng"; // eller 'brugstreng'

For at tilvælge streng tilstand på et funktionsniveau skal du erklære syntaksen øverst i en funktions krop før eventuelle udsagn:

fungeremyStrictFunction() {
 "brugstreng";
}

Hvis du erklærer streng tilstand på et funktionsniveau, vil indstillingen kun gælde for udsagn inde i den funktion.

Erklæring af streng tilstand på globalt niveau forhindrer variabler i at blive tilgået uden for deres respektive omfang:

"brugstreng";
minFunktion();
konsol.log (foo); // ReferenceError: foo er ikke defineret
fungereminFunktion() {
 foo = 20; 
}

Med streng tilstand slået til, vil JavaScript-kompileren hejse myFunction() til toppen af ​​sit omfang uden den ikke-deklarerede variabel.

Forstå, hvad der påvirker hejsning

Hejsning er ret unikt for JavaScript og kan være en meget forvirrende adfærd at vikle dit hoved om. Det kan påvirke variabler og funktioner, men der er måder at forhindre det på, hvis du har brug for det.

Flere faktorer kan påvirke hejsning, så det er bedst at undgå enhver forekomst af variabel eller funktionel hejsning i din kode.