Paikalliset ja globaalit muuttujat JavaScript-funktion sisällä

Olen opiskelemassa JavaScriptin globaaleja ja paikallisia muuttujia, mutta olen hämmentynyt tästä tietystä funktiosta.

var text = "top";
function print() {
    return (text);
}
print();
// Returns 'top'

Ymmärrän, miksi se palauttaa topin. var text on globaali muuttuja. print()-funktiolla on pääsy siihen ja se palauttaa text-muuttujan, jolloin palautuu 'top'.

var text = "top";
function print() {
    return (text);
    var text = "bottom";
}
print();
// Returns undefined

Minulla on perustiedot globaaleista ja paikallisista muuttujista (tai niin luulin). Tiedän, että funktiolla print on pääsy omiin paikallisiin sekä globaaleihin muuttujiinsa.

En ymmärrä, miksi tämä palauttaa undefined. Ymmärtääkseni rivi return text; hakee globaalia muuttujaa text, johon sillä on pääsy (kuten ensimmäinen koodilohko osoittaa). Palautettuaan text='top', se myös ilmoittaa oman paikallisen muuttujansa samalla nimellä, mutta eri arvolla, 'bottom'. Paikallinen muuttuja bottom, tietääkseni, pitäisi olla siinä, koska sitä ei kutsuttu aiemmin.

Miksi se ei näyttänyt top (tai edes näyttää bottom), vaan näyttää undefined?

Vastaus #1

JavaScript nostaa muuttujasi deklaroinnin siten, että koodisi on toiminnallisesti seuraava:

var text = "top";
function print() {
    var text;
    return (text);
    // Unreachable code below
    text = "bottom";
}
print();
// Returns undefined

Koska text, kuten on määritelty funktiossasi, ei ole vielä määritelty, kun saavut return(text)-kohtaan, ja text="bottom" on saavuttamaton, print() palauttaa undefined.

Katso Mitkä ovat muuttujien näkyvyysalueet JavaScriptissä? saadaksesi lisätietoja. Tämä kysymys liittyy tapaukseen 7.

Vastaus #2

Tämä liittyy muuttujien nostamiseen

Koodisi toisessa esimerkissä suoritetaan tässä järjestyksessä:

1. Määritä globaali muuttuja text
2. Aseta globaalin muuttujan text arvo "top"
3. Määrittele funktio print
4. Kutsu funktio print
5. Määritä paikallinen muuttuja text (johtuen nostosta)
6. Paikallisen muuttujan text paluuarvo (undefined tässä vaiheessa)
7. Aseta paikallisen muuttujan text arvoksi "bottom"

Se suoritetaan ikään kuin se olisi kirjoitettu näin:

var text = "top";
function print() {
    var text;
    return (text);
    text = "bottom";
}
print();

Kuten näet, text-arvo palautetaan ennen kuin se itse asiassa määritellään, ja siksi se on undefined.