Miksi sinun tulee olla varovainen nuolifunktioiden käyttämisessä JavaScriptissä

Nuolifunktion syntaksi saapui ECMAScript 2015:n, joka tunnetaan myös nimellä ES6, julkaisun myötä. Nykyään nuolifunktioista on tullut monien JavaScript-ohjelmoijien suosikkiominaisuus. Tämä rakkaus nuolifunktioita kohtaan johtuu "tämä"-avainsanan ytimekkäästä syntaksista ja suoraviivaisesta käyttäytymisestä.

Mutta nuolitoiminnoilla on joitain haittoja. Opi tärkeimmistä eroista nuolitoimintojen ja tavallisten toimintojen välillä ja selvitä, miksi useimmissa tapauksissa sinun on parempi pysyä tavallisissa toiminnoissa.

1. Sinun on määritettävä nuolitoiminto ennen sen käyttöä

Et voi nostaa nuolitoimintoa. JavaScriptin oletusarvoiset nostosäännöt voit kutsua funktiota ennen sen määrittämistä, mutta näin ei ole nuolifunktioiden kohdalla. Jos sinulla on JavaScript-tiedosto, jossa on toimintoja, tämä tarkoittaisi, että kaikki tärkeä koodi on alhaalla tiedoston alaosassa.

Harkitse esimerkiksi seuraavaa JavaScript-koodia:

konst doubleNumbers = (numerot) { 
 numbers.map(n => n * 2)
}
konst halfNumbers = (numerot) { 
 numbers.map(n => n / 2)
}
konst summaNumbers = (numerot) { 
 numbers.reduce((summa, n) => { 
palata summa + n; 
 }, 0)
}
konst numerot = [1, 20, 300, 700, 1500]
konst tuplattu = doubleNumbers (numerot)
konsoli.log (halveNumbers (kaksinkertainen))
konsoli.log (sumNumbers (numerot))

Yllä olevassa koodilohkossa tärkeä koodi on alhaalla. Kaikki aputoiminnot määritellään ennen suorituspistettä. Täytyy luo JavaScript-funktiot tiedoston yläosassa voi olla hankalaa, koska sinun on vieritettävä alaspäin nähdäksesi todellisen koodin, joka toimii.

Jos siirsit aputoiminnot alas ja varsinaisen koodin yläosaan, saat viitevirheen. Suoritusaika käsittelee funktiota muuttujana. Siksi sinun on ensin määritettävä se ennen sen käyttämistä tai kutsumista. Mutta jos muunsit kaikki nuolifunktiot tavallisiksi funktioiksi ( toiminto avainsana), niin koodisi toimisi hyvin. Samalla tärkeä koodi pysyy yläosassa, josta voit paikantaa sen.

Tämä on yksi suurimmista ongelmista nuolitoimintojen käytössä. He eivät osoita isännöintikäyttäytymistä. Toisin sanoen sinun on määriteltävä ne ennen todellista paikkaa, jossa niitä käytetään. Toisaalta voit nostaa tavallisia toimintoja.

2. Nuolitoiminnot voivat olla hämmentäviä joillekin ihmisille

Toinen syy käyttää tavallisia toimintoja nuolifunktioiden sijaan on luettavuus. Tavallisia toimintoja on helpompi lukea, koska ne käyttävät nimenomaisesti toiminto avainsana. Tämä avainsana identifioi, että kyseinen koodi on funktio.

Toisaalta nuolifunktiot määritetään muuttujille. Aloittelijana tämä saattaa hämmentää sinut ajattelemaan, että koodi on muuttuja funktion sijaan.

Vertaa kahta alla olevaa toimintoa:

konst halfNumbers = (numeroita) => {
palata numbers.map(n => n / 2)
}
toimintopuolinumerot(numeroita) { 
palata numbers.map(n => n / 2)
}

Ensi silmäyksellä voit helposti todeta, että koodin toinen osa on funktio. Syntaksi tekee selväksi, että koodi on funktio. Ensimmäinen on kuitenkin moniselitteinen – et ehkä helposti tiedä, onko se muuttuja vai funktio.

3. Et voi käyttää nuolifunktioita menetelminä

Kun käytät nuolitoimintoa, Tämä avainsana vastaa kaikkea, mikä on sisällämme olevan asian ulkopuolella. Useimmissa tapauksissa se on ikkunaobjekti.

Harkitse seuraavaa objektia:

konst henkilö = {
 etunimi: "Kyle",
 sukunimi: "Kokki",
 printName: () => {
konsoli.Hirsi(`${Tämä.etunimi}``${Tämä.sukunimi}` )
 }
}
person.printName()

Jos suoritat koodin, huomaat, että selain tulostaa määrittelemätön sekä etu- että sukunimelle. Koska käytämme nuolifunktiota, Tämä avainsana vastaa ikkunaobjektia. Lisäksi ei ole etunimi tai sukunimi siellä määritelty omaisuus.

Tämän ongelman ratkaisemiseksi sinun on käytettävä tavallista funktiota sen sijaan:

konst henkilö = {
 etunimi: "Kyle",
 sukunimi: "Kokki",
 printName: toiminto() {
konsoli.Hirsi(`${Tämä.etunimi}``${Tämä.sukunimi}` )
 }
}
person.printName()

Tämä tulee toimimaan hyvin, koska Tämä viittaa henkilö esine. Jos aiot tehdä tällaista olio-ohjelmointia paljon, sinun on varmistettava, että käytät tavallisia toimintoja. Nuolitoiminnot eivät toimi.

Milloin nuolifunktioita käytetään

Käytä nuolitoimintoja pääasiassa paikoissa, joissa tarvitset anonyymiä toimintoa. Esimerkki tällaisesta skenaariosta on takaisinsoittotoiminnon käsitteleminen. On parempi käyttää nuolitoimintoa kirjoitettaessa takaisinsoittoa, koska syntaksi on paljon yksinkertaisempaa kuin täyden funktion kirjoittaminen.

Vertaa näitä kahta ja päätä kumpi on yksinkertaisempi:

toimintopuolinumerot(numeroita) {
palata numbers.map(n => n / 2)
}
toimintopuolinumerot(numeroita) {
palata numbers.map(toiminto(n) {
palata n / 2
 })
}

Molemmat tapaukset välittävät takaisinsoittofunktion map()-metodille. Mutta ensimmäinen takaisinsoitto on nuolitoiminto, kun taas toinen on täysi toiminto. Voit nähdä, kuinka ensimmäinen funktio vie vähemmän koodirivejä kuin toinen funktio: kolme vs. viisi.

Toinen aika nuolifunktioiden käyttämiseen on aina, kun haluat käsitellä tiettyä "tätä" syntaksia. "Tämä"-objekti muuttuu sen mukaan, käytätkö tavallisia toimintoja vai nuolifunktioita tietyille asioille.

Seuraava koodilohko rekisteröi kaksi "napsautus"-tapahtuman kuuntelijaa dokumenttiobjektiin. Ensimmäinen esiintymä käyttää tavallista toimintoa takaisinsoittona, kun taas toinen käyttää nuolitoimintoa. Molempien takaisinkutsujen sisällä koodi kirjaa suoritusobjektin (tämän) ja tapahtumakohteen:

asiakirja.addEventListener("klikkaus", toiminto(e) {
konsoli.Hirsi("FUNCTION", Tämä, e.target)
})
asiakirja.addEventListener("klikkaus", (e) => {
konsoli.Hirsi("NUOLI", Tämä, e.target)
})

Jos suoritat tämän skriptin, huomaat, että "tämä" viittaus on erilainen molemmille. Tavallisessa funktiossa tämä ominaisuus viittaa asiakirjaan, joka on sama kuin e.target omaisuutta. Mutta nuolifunktiossa tämä viittaa ikkunaobjektiin.

Kun käytät tavallista funktiota takaisinkutsuna, tämä viittaa elementtiin, jossa käynnistämme tapahtuman. Mutta kun käytät nuolifunktiota, tämä avainsana on oletusarvoisesti ikkunaobjekti.

Lue lisää nuolifunktioista vs. tavallisista funktioista

Tavallisten toimintojen ja nuolitoimintojen välillä on useita muita hienovaraisia ​​eroja. Molempien toimintotyyppien hallitseminen on JavaScriptin hallitsemisen perusta. Opi käyttämään yhtä ja milloin toista; ymmärrät sitten vaikutukset joko tavallisen funktion tai nuolifunktion käyttämiseen JavaScriptissä.