Hoisting on JavaScriptin oletuskäyttäytyminen, kun ilmoitukset siirretään kohteeseen alkuun.
JavaScriptissä muuttuja voidaan ilmoittaa sen käytön jälkeen.
Toisin sanoen; muuttujaa voidaan käyttää ennen kuin se on ilmoitettu.
Esimerkki 1 antaa saman tuloksen kuin Esimerkki 2:
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
Kokeile itse →
<!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>
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
Kokeile itse →
<!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>
Tämän ymmärtämiseksi sinun on ymmärrettävä termi "nostaminen".
Hoisting on JavaScriptin oletustoiminto siirtää kaikki ilmoitukset kohteeseen nykyisen laajuuden yläosaan (nykyisen komentosarjan tai nykyisen funktion alkuun).
let
- ja const
-muuttujat nostetaan ylös lohkosta, mutta ei alustettu.<p>Merkitys: Koodilohko on tietoinen muuttuja, mutta sitä ei voi käyttää ennen kuin se on ilmoitettu. <p>let
-muuttujan käyttäminen ennen sen ilmoittamista johtaa ReferenceError
.
Muuttuja on alusta alkaen "ajallisessa kuolleessa vyöhykkeessä". lohkosta, kunnes se on ilmoitettu:
carName = "Volvo";
let carName;
Kokeile itse →
<!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>
const
-muuttujan käyttäminen ennen sen ilmoittamista on syntaksivirhe, joten koodi ei yksinkertaisesti toimi.
Tämä koodi ei toimi.
carName = "Volvo";
const carName;
Kokeile itse →
<!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>
Lue lisää letistä ja constista JS Let/Const.
JavaScript nostaa vain ilmoituksia, ei alustuksia.
Esimerkki 1 ei anna samaa tulosta kuin Esimerkki 2:
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
Kokeile itse →
<!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>
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
Kokeile itse →
<!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>
Onko järkevää, että y on määrittelemätön viimeisessä esimerkissä?
Tämä johtuu siitä, että vain ilmoitus (muut y), ei alustus (=7) nostetaan ylös.
Nostamisen vuoksi y on ilmoitettu ennen sen käyttöä, mutta koska alustuksia ei nosteta, y:n arvo on määrittelemätön.
Esimerkki 2 on sama kuin kirjoittaminen:
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
Kokeile itse →
<!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>
Nosto on (monille kehittäjille) tuntematon tai huomiotta jäänyt käyttäytyminen JavaScript.
Jos kehittäjä ei ymmärrä nostoa, ohjelmat voivat sisältää bugeja (virheitä).<p> Virheiden välttämiseksi ilmoittaa kaikki muuttujat aina muuttujan alussa jokainen kaukosäädin.<p> Koska JavaScript tulkitsee näin koodi, se on aina hyvä sääntö.
JavaScript tiukassa tilassa ei salli muuttujien käyttöä, jos ne ovat ei ilmoitettu.
Tutki "käytä tiukkaa" seuraavassa luvussa.