Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion.
Hoisting on JavaScript-mekanismi, jonka avulla voit käyttää muuttujia ja toimintoja ennen niiden alustamista. Tällaisen julistuksen nostaminen nostaa sen tehokkaasti soveltamisalansa huipulle.
Opi kaikki siitä, kuinka nosto toimii JavaScriptissä ja miten voit hallita sitä parhaiten välttääksesi virheitä koodissasi.
Nostomuuttujat Var, let ja const
Nosto on mahdollista, koska JavaScript käyttää JIT (Just-in-Time) -käännösjärjestelmää, joka skannaa koodisi tunnistaakseen kaikki muuttujat omissa laajuuksissaan.
JIT-kääntäjä nostaa sitten kaikki muuttujamäärittelyjen esiintymät niiden soveltamisalan huipulle kääntämisen yhteydessä. JavaScript nostaa vain muuttujien ilmoitukset, ei niiden alustuksia.
Muuttujien käyttäytyminen nostettaessa riippuu avainsanasta, jolla ne ilmoittaa, koska jokainen avainsana käyttäytyy eri tavalla.
var
Käynnistetään alustamaton muuttuja, joka on ilmoitettu komennolla var avainsana palaa määrittelemätön. Esimerkiksi:
konsoli.log (foo); // määrittelemätön
var foo = 2;
Yllä oleva koodi kirjautuu määrittelemätön koska se kutsuu console.log ennen kuin se alustaa muuttujan.
JavaScript-kääntäjä näyttää edellisen koodilohkon seuraavasti:
var foo;
konsoli.log (foo); // määrittelemätön
foo = 2;
Noston aikana muuttujat noudattavat JavaScriptin laajuuden säännöt. Javascript nostaa muuttujan vain sen laajuuden yläosaan, jossa sen ilmoitit. Jos muuttujan arvoa yritetään kirjata sen ilmoitetun soveltamisalan ulkopuolelle, tuloksena on a ReferenceError. Jos esimerkiksi määrität muuttujan funktion sisällä, se ei näy tämän laajuuden ulkopuolella:
toimintomyFunction() {
konsoli.log (foo); // määrittelemätön
var foo = 10;
}
myFunction();
konsoli.log (foo); // ReferenceError: foo ei ole määritelty
Jos yritetään käyttää muuttujaa sen soveltamisalan ulkopuolella, tuloksena on a ReferenceError.
anna ja const
Mukaan MDN dokumentaatio päällä antaa ja konst nosto, JavaScript nostaa myös muuttujat, jotka on ilmoitettu antaa ja konst avainsanoja. Kuitenkin, toisin kuin muuttujat, jotka on ilmoitettu koodilla var avainsana, niitä ei ole alustettu an määrittelemätön arvo.
Esimerkiksi:
toimintomyFunction() {
konsoli.log (foo); // määrittelemätön
konsoli.log (palkki); // ReferenceError: Ei voi käyttää palkkia ennen alustusta
konsoli.log (baz); // ReferenceError: "baz" ei voi käyttää ennen alustustavar foo = 5;
antaa baari = 10;
konst baz = 15;
}
myFunction();
Et voi käyttää muuttujia, jotka on ilmoitettu avainsanoilla let ja const, ennen kuin ne on alustettu arvolla.
Nostotoiminnot
JavaScript-nostimet toimivat samalla tavalla kuin muuttujat. Kuten muuttujienkin kohdalla, se riippuu siitä, kuinka ne ilmoittaa. Esimerkiksi JavaScript nostaa funktiomääritykset eri tavalla kuin funktiolausekkeet.
Funktioilmoitus on funktio, joka on ilmoitettu nimellä, kun taas funktiolauseke on funktio, jonka nimen voit jättää pois. Esimerkiksi:
toimintofoo() {
// funktion ilmoitus
}
konst palkki = () => {
// funktiolauseke
}
JavaScript nostaa funktiomääritykset, mutta ei funktiolausekkeita. Esimerkiksi:
foo(); // 5
baari(); // TypeError: bar() ei ole funktio// Toimintoilmoitus
toimintofoo() {
konsoli.Hirsi(5);
}
// Funktiolauseke
var baari = toimintoilmaisu() {
konsoli.Hirsi(10);
};
Tämä koodi kutsuu foo ennen sen ilmoittamista ja alustamista funktiona, mutta se silti kirjautuu lokiin 5 konsoliin. Yritetään kuitenkin soittaa baari tuloksena a Tyyppivirhe.
Noston hallinta
Kun olet tietoinen nostosta ja mahdollisista virheistä, joita voi ilmetä väärin hoidettuna, voit säästää pitkiä tunteja virheenkorjauksesta. Tässä on joitain tapoja hallita nostoa.
Ilmoita muuttujat funktioiden sisällä
Ilmoita muuttujat funktioissa, jotka käyttävät niitä. Et voi aina tehdä tätä, koska saatat tarvita globaalin muuttujan, jota voit käyttää useissa funktioissa. Varmista siis, että ilmoitat muuttujat maailmanlaajuisesti vain, jos todella tarvitset.
Ilmoita muuttujat komennolla let tai const
Sinun tulee aina käyttää let ja const avainsanoja sanan tilalle var avainsanaa muuttujien ilmoittamisessa. Tämä käytäntö on hyödyllinen, kun paikalliset muuttujat ilmoitetaan funktion sisällä. Tietäen oikeat tavat ilmoittaa muuttujat JavaScriptissä vähentää koodissasi tapahtuvan nousun aiheuttamien virheiden mahdollisuuksia.
Ilmoita muuttujat niiden laajuuden huipulla
Ilmoita kaikki muuttujasi niiden laajuuksien yläosassa ennen muita lausekkeita. Näin varmistetaan, että JavaScript-kääntäjän ei tarvitse nostaa näitä muuttujia käyttääkseen niitä.
Tiukan tilan käyttö
Tiukka tila on JavaScript-tila joka säätelee huonoa syntaksia, optimoi koodisi suoritusajan ja estää JavaScriptin löyhästi kirjoitetun syntaksin väärinkäytön aiheuttamalla virheitä käännösvaiheessa.
Esimerkiksi "huolissa tilassa" nostamisen vuoksi voit käyttää muuttujaa alustetun funktion ulkopuolella, vaikka sitä ei ole ilmoitettu:
myFunction();
konsoli.log (foo); // 20
toimintomyFunction() {
foo = 20;
}
Yllä olevassa koodilohkossa JavaScript ilmoittaa automaattisesti foo ja nostaa sen globaalin kaukoputken huipulle jättäen huomioimatta laajuuden, johon sen alustit.
Voit korjata tämän käyttäytymisen käyttämällä tiukkaa tilaa ja antaa virheilmoituksen, jos yrität käyttää muuttujaa sen toimintoalueen ulkopuolella.
Tiukka tila ei lopeta nostoa kokonaan. Sen sijaan se estää hämmentävämmät ja virhealttiimmat nostomuodot. On silti tärkeää ymmärtää nostamisen yleinen käsite ja säännöt, myös tiukan tilan turvaverkkoa käytettäessä.
Jos haluat ottaa tiukan tilan käyttöön maailmanlaajuisella tasolla, ilmoita syntaksi komentosarjatiedoston yläosassa:
"käyttäätiukka"; // tai 'käyttäätiukka'
Jos haluat ottaa tiukan tilan käyttöön funktiotasolla, ilmoita syntaksi funktion rungon yläosassa ennen lauseita:
toimintomyStrictFunction() {
"käyttäätiukka";
}
Jos määrität tiukan tilan funktiotasolla, asetus koskee vain kyseisen funktion sisältämiä lausekkeita.
Tiukan tilan ilmoittaminen globaalilla tasolla estää muuttujien pääsyn niiden vastaavien soveltamisalan ulkopuolelle:
"käyttäätiukka";
myFunction();
konsoli.log (foo); // ReferenceError: foo ei ole määritelty
toimintomyFunction() {
foo = 20;
}
Kun tiukka tila on käytössä, JavaScript-kääntäjä toimii myFunction() laajuuden huipulle ilman ilmoittamatonta muuttujaa.
Ymmärrä, mikä vaikuttaa nostoon
Nosto on varsin ainutlaatuinen JavaScriptille, ja se voi olla hyvin hämmentävää toimintaa kietoa päätäsi. Se voi vaikuttaa muuttujiin ja funktioihin, mutta on olemassa tapoja estää se tarvittaessa.
Useat tekijät voivat vaikuttaa nostoon, joten on parasta välttää muuttujien tai toimintojen nostoa koodissasi.
