Kodėl turėtumėte būti atsargūs naudodami rodyklių funkcijas „JavaScript“.

Rodyklės funkcijos sintaksė atsirado išleidus ECMAScript 2015, dar žinomą kaip ES6. Šiandien rodyklių funkcijos tapo mėgstamiausia daugelio „JavaScript“ programuotojų funkcija. Ši meilė rodyklės funkcijoms atsiranda dėl glaustos „šio“ raktinio žodžio sintaksės ir paprasto elgesio.

Tačiau rodyklės funkcijos turi tam tikrų trūkumų. Sužinokite apie pagrindinius rodyklės ir įprastų funkcijų skirtumus ir sužinokite, kodėl daugeliu atvejų geriau laikytis įprastų funkcijų.

1. Prieš naudodami rodyklės funkciją, turite ją apibrėžti

Negalite pakelti rodyklės funkcijos. „JavaScript“ numatytosios kėlimo taisyklės leidžia iškviesti funkciją prieš ją apibrėžiant, bet tai netaikoma rodyklių funkcijoms. Jei turite „JavaScript“ failą su funkcijomis, tai reikš, kad visas svarbus kodas bus failo apačioje.

Apsvarstykite, pavyzdžiui, šį JavaScript kodą:

konst





instagram viewer
 doubleNumbers = (skaičiai) { 
 numbers.map(n => n* 2)
}
konst halfNumbers = (skaičiai) { 
 numbers.map(n => n / 2)
}
konst sumSkaičiai = (skaičiai) { 
 numbers.reduce((suma, n) => { 
grąžinti suma + n; 
 }, 0)
}
konst skaičiai = [1, 20, 300, 700, 1500]
konst padvigubintas = doubleSkaičiai (skaičiai)
konsolė.log (halveNumbers (dvigubai))
konsolė.log (sumnumeriai (skaičiai))

Aukščiau pateiktame kodų bloke svarbus kodas yra apačioje. Visos pagalbinės funkcijos yra apibrėžtos prieš vykdymo tašką. Turintis sukurti savo JavaScript funkcijas failo viršuje gali būti nepatogu, nes turėsite slinkti žemyn, kad pamatytumėte tikrąjį kodą, kuris atlieka darbą.

Jei pagalbines funkcijas perkėlėte į apačią, o tikrąjį kodą - į viršų, gausite nuorodos klaidą. Vykdymo laikas funkciją traktuoja kaip kintamąjį. Taigi, prieš pasiekdami arba iškviesdami, pirmiausia turite jį apibrėžti. Bet jei visas rodyklių funkcijas konvertavote į įprastas funkcijas (su funkcija raktinį žodį), tada jūsų kodas veiktų gerai. Tuo pačiu metu svarbus kodas lieka viršuje, kur galite jį rasti.

Tai viena didžiausių problemų naudojant rodyklių funkcijas. Jie nerodo jokio prieglobos elgesio. Kitaip tariant, turite juos apibrėžti prieš faktinę vietą, kurioje juos naudosite. Kita vertus, galite pakelti įprastas funkcijas.

2. Rodyklės funkcijos kai kuriems žmonėms gali būti klaidinančios

Kita priežastis, kodėl reikia naudoti įprastas funkcijas, o ne rodyklių funkcijas, yra skaitomumas. Įprastas funkcijas lengviau skaityti, nes jos aiškiai naudoja funkcija raktažodį. Šis raktinis žodis identifikuoja, kad aptariamas kodas yra funkcija.

Kita vertus, kintamiesiems priskiriate rodyklių funkcijas. Jei esate naujokas, tai gali suklaidinti jus ir manyti, kad kodas yra kintamasis, o ne funkcija.

Palyginkite šias dvi funkcijas:

konst halfSkaičiai = (numeriai) => {
grąžinti numbers.map(n => n / 2)
}
funkcijahalfSumers(numeriai) { 
grąžinti numbers.map(n => n / 2)
}

Iš pirmo žvilgsnio galite lengvai suprasti, kad antroji kodo dalis yra funkcija. Sintaksė aiškiai parodo, kad kodas yra funkcija. Tačiau pirmasis yra dviprasmiškas – galite nesunkiai atskirti, ar tai kintamasis, ar funkcija.

3. Negalite naudoti rodyklių funkcijų kaip metodų

Kai naudojate rodyklės funkciją, tai raktinis žodis atitinka tai, kas yra už daikto, kuriame esame viduje, ribų. Daugeliu atvejų tai yra lango objektas.

Apsvarstykite šį objektą:

konst asmuo = {
 Pirmas vardas: "Kailas",
 pavardė: "virti",
 printName: () => {
konsolė.log(`${tai.Pirmas vardas}``${tai.pavardė}` )
 }
}
asmuo.printName()

Jei paleisite kodą, pastebėsite, kad naršyklė spausdina neapibrėžtas tiek vardui, tiek pavardei. Kadangi naudojame rodyklės funkciją, tai raktinis žodis atitinka lango objektą. Be to, nėra Pirmas vardas arba pavardė ten apibrėžtas turtas.

Norėdami išspręsti šią problemą, turite naudoti įprastą funkciją:

konst asmuo = {
 Pirmas vardas: "Kailas",
 pavardė: "virti",
 printName: funkcija() {
konsolė.log(`${tai.Pirmas vardas}``${tai.pavardė}` )
 }
}
asmuo.printName()

Tai veiks gerai, nes tai nurodo asmuo objektas. Jei ketinate daug daryti tokiu objektu orientuotu programavimu, turėsite įsitikinti, kad naudojate įprastas funkcijas. Rodyklės funkcijos neveiks.

Kada naudoti rodyklių funkcijas

Rodyklių funkcijas naudokite daugiausia tose vietose, kur reikia anoniminės funkcijos. Tokio scenarijaus pavyzdys yra atgalinio skambinimo funkcija. Rašant atgalinį skambutį geriau naudoti rodyklės funkciją, nes sintaksė yra daug paprastesnė nei visos funkcijos rašymas.

Palyginkite šiuos du dalykus ir nuspręskite, kuris yra aiškesnis:

funkcijahalfSumers(numeriai) {
grąžinti numbers.map(n => n / 2)
}
funkcijahalfSumers(numeriai) {
grąžinti numbers.map(funkcija(n) {
grąžinti n / 2
 })
}

Abu atvejai perduoda atgalinio ryšio funkciją map() metodui. Tačiau pirmasis atgalinis skambutis yra rodyklės funkcija, o antrasis - visa funkcija. Galite pamatyti, kaip pirmoji funkcija užima mažiau kodo eilučių nei antroji funkcija: trys vs. penkios.

Kitas laikas naudoti rodyklių funkcijas yra tada, kai norite susidoroti su konkrečia „šia“ sintaksė. „Šis“ objektas pasikeis priklausomai nuo to, ar tam tikriems dalykams naudosite įprastas funkcijas, ar rodyklių funkcijas.

Šis kodo blokas užregistruoja du „paspaudimo“ įvykių klausytojus dokumento objekte. Pirmuoju atveju kaip atgalinio skambinimo funkcija naudojama įprasta funkcija, o antrajame – rodyklės funkcija. Abiejuose atgaliniuose skambučiuose kodas registruoja vykdymo objektą (tai) ir įvykio tikslą:

dokumentas.addEventListener("spausti", funkcija(e) {
konsolė.log("FUNKCIJA", tai, e.target)
})
dokumentas.addEventListener("spausti", (e) => {
konsolė.log("RODYLĖ", tai, e.target)
})

Jei paleistumėte šį scenarijų, pastebėtumėte, kad „šios“ nuoroda abiem atvejais skiriasi. Įprastai funkcijai ši ypatybė nurodo dokumentą, kuris yra toks pat kaip ir e.taikinys nuosavybė. Tačiau rodyklės funkcijai tai nurodo lango objektą.

Kai kaip atgalinį skambutį naudojate įprastą funkciją, tai bus nuoroda į elementą, kuriame suaktyviname įvykį. Bet kai naudojate rodyklės funkciją, šis raktinis žodis pagal nutylėjimą yra lango objektas.

Sužinokite daugiau apie rodyklės funkcijas ir įprastas funkcijas

Yra keletas kitų subtilių skirtumų tarp įprastų funkcijų ir rodyklių funkcijų. Abiejų tipų funkcijų įvaldymas yra esminis JavaScript įvaldymo pagrindas. Sužinokite, kada naudoti vieną, o kada kitą; tada suprasite įprastos funkcijos arba rodyklės funkcijos naudojimo „JavaScript“ pasekmes.