Zvednutí JavaScriptu

Obsah

Zvednutí je výchozí chování JavaScriptu při přesouvání deklarací do horní.

Prohlášení JavaScriptu jsou zvednuta

V JavaScriptu lze proměnnou deklarovat poté, co byla použita.

Jinými slovy; proměnná může být použita předtím, než byla deklarována.

Příklad 1 dává stejný výsledek jako Příklad 2:

Příklad 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

Zkuste to sami →

<!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>

Příklad 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

Zkuste to sami →

<!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>

Abyste tomu porozuměli, musíte rozumět pojmu „zvedání“.

Zvednutí je výchozí chování JavaScriptu při přesouvání všech deklarací do na začátek aktuálního rozsahu (na začátek aktuálního skriptu nebo aktuální funkce).

Klíčová slova let a const

Proměnné definované pomocí let a const jsou vytaženy nahoru bloku, ale není inicializován.<p>Význam: Blok kódu si je vědom proměnnou, ale nelze ji použít, dokud nebude deklarována. <p>Použití proměnné let před jejím deklarováním povede k ReferenceError.

Proměnná je od začátku v "časové mrtvé zóně". bloku, dokud není deklarováno:

Příklad

carName = "Volvo";
let carName;

Zkuste to sami →

<!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>

Použití proměnné const před jejím deklarováním je syntaktická chyba, takže kód se prostě nespustí.

Příklad

Tento kód se nespustí.

carName = "Volvo";
const carName;

Zkuste to sami →

<!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>

Přečtěte si více o let a const v JS Let/Const.

Inicializace JavaScriptu nejsou zvednuty

JavaScript shromažďuje pouze deklarace, nikoli inicializace.

Příklad 1 neposkytne stejný výsledek jako Příklad 2:

Příklad 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

Zkuste to sami →

<!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>

Příklad 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

Zkuste to sami →

<!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>

Dává smysl, že y není v posledním příkladu definováno?

Je tomu tak proto, že nahoru je vytažena pouze deklarace (var y), nikoli inicializace (=7).

Kvůli zvedání bylo y deklarováno před jeho použitím, ale protože inicializace nejsou zvednuty, hodnota y není definována.

Příklad 2 je stejný jako psaní:

Příklad

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

Zkuste to sami →

<!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>

Uveďte své proměnné nahoře!

Zvedání je (pro mnoho vývojářů) neznámé nebo přehlížené chování JavaScript.

Pokud vývojář nerozumí zvedání, programy mohou obsahovat chyby (chyby).<p> Abyste se vyhnuli chybám, vždy deklarujte všechny proměnné na začátku každý rozsah.<p> Protože takto JavaScript interpretuje kód, je to vždy dobré pravidlo.

JavaScript v přísném režimu neumožňuje použití proměnných, pokud jsou není deklarováno.
Prostudujte si „použít přísné“ v další kapitole.