JavaScriptin nosto


Sisällysluettelo

    Näytä sisällysluettelo


Hoisting on JavaScriptin oletuskäyttäytyminen, kun ilmoitukset siirretään kohteeseen alkuun.


JavaScript-ilmoitukset nostetaan ylös

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:

Esimerkki 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

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> 

Esimerkki 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

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 and const Avainsanat

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:

Esimerkki

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.

Esimerkki

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-alustuksia ei nosteta

JavaScript nostaa vain ilmoituksia, ei alustuksia.

Esimerkki 1 ei anna samaa tulosta kuin Esimerkki 2:

Esimerkki 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

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> 

Esimerkki 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

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:

Esimerkki

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> 

Ilmoita muuttujasi yläreunassa!

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.