JavaScript Hoisting

Lyftande (Hoisting) är JavaScripts standardbeteende att flytta deklarationer till toppen.

JavaScript deklarationer lyfts upp

I JavaScript kan man deklarera en variabel efter att den har använts.

Detta innebär att man kan använda variabeln innan den deklarerats.

Exempel 1 medExempel 2 Resultaten är desamma:

Exempel 1

x = 5; // Tilldela 5 till x
elem = document.getElementById("demo"); // Sök element
elem.innerHTML = x;                     // Visa x i elementet
var x; // Deklarera x

Prova själv

Exempel 2

var x; // Deklarera x
x = 5; // Tilldela 5 till x
elem = document.getElementById("demo"); // Sök element
elem.innerHTML = x;                     // Visa x i elementet

Prova själv

För att förstå detta måste du förstå termen "hoisting".

Hoisting är JavaScripts standardbeteende att lyfta alla deklarationer till toppen av den aktuella kontexten (upp till toppen av det aktuella skriptet eller den aktuella funktionen).

led och konst nyckelord

med let eller konst Deklarerade variabler och konstanter lyfts inte upp!

Vänligen JS Let / Konst Läs mer om let och const här.

JavaScript initialiseringar lyfts inte upp

JavaScript lyfter endast deklarationer, inte initialiseringar.

Exempel 1 medExempel 2 Resultaten är olika:

Exempel 1

var x = 5; // Initialisera x
var y = 7; // Initialisera y
elem = document.getElementById("demo"); // Sök element
elem.innerHTML = x + " " + y;           // Visa x och y

Prova själv

Exempel 2

var x = 5; // Initialisera x
elem = document.getElementById("demo"); // Sök element
elem.innerHTML = x + " " + y;           // Visa x och y
var y = 7; // Initialisera y

Prova själv

Finns det något konstigt med att y fortfarande är odefinierad i det sista exemplet?

Detta beror på att endast deklarationen (var y) och inte initialiseringen (=7) lyfts upp till toppen.

Tack vare hoisting har y redan deklarerats innan den används, men eftersom initieringen inte har lyfts upp, är värdet för y fortfarande inte definierat.

Exempel 2 är också samma:

Exempel

var x = 5; // Initialisera x
var y;     // Deklarera y
elem = document.getElementById("demo"); // Sök element
elem.innerHTML = x + " " + y;           // Visa x och y
y = 7;    // Tilldela 7 till y

Prova själv

Deklarera dina variabler i toppen!

Hoisting (för många utvecklare) är ett okänt eller glömt beteende i JavaScript.

Om utvecklaren inte förstår hoisting, kan programmet innehålla fel (fel).

För att undvika fel, deklarera alltid alla variabler vid början av varje omfattning.

Eftersom detta är sättet JavaScript tolkar kod på, behåll denna goda vana.

Strängsammanhållning i JavaScript tillåter inte användning av variabler som inte har deklarerats.

Lär dig mer i nästa kapitel:use strict”。