Kāpēc jums vajadzētu būt uzmanīgiem, izmantojot JavaScript bultiņu funkcijas

Bultiņu funkcijas sintakse parādījās, izlaižot ECMAScript 2015, kas pazīstams arī kā ES6. Mūsdienās bultiņu funkcijas ir kļuvušas par daudzu JavaScript programmētāju iecienītāko funkciju. Šī mīlestība pret bultiņu funkcijām ir saistīta ar atslēgvārda "šis" kodolīgo sintakse un tiešo uzvedību.

Taču bultiņu funkcijām ir daži trūkumi. Uzziniet par galvenajām atšķirībām starp bultiņu funkcijām un parastajām funkcijām un uzziniet, kāpēc vairumā gadījumu jums ir labāk pieturēties pie parastajām funkcijām.

1. Pirms lietošanas ir jādefinē bultiņas funkcija

Jūs nevarat pacelt bultiņas funkciju. JavaScript noklusējuma pacelšanas noteikumi ļauj izsaukt funkciju pirms tās definēšanas, taču tas neattiecas uz bultiņu funkcijām. Ja jums ir JavaScript fails ar funkcijām, tas nozīmētu, ka viss svarīgais kods atradīsies faila apakšā.

Apsveriet, piemēram, šādu JavaScript kodu:

konst doubleNumbers = (skaitļi) { 
 numbers.map(n => n* 2)
}
konst halfNumbers = (skaitļi) { 
 numbers.map(n => n/ 2)
}
konst summaNumbers = (skaitļi) { 
 numbers.reduce((summa, n) => { 
atgriezties summa + n; 
 }, 0)
}
konst cipari = [1, 20, 300, 700, 1500]
konst dubultots = dubults Skaitļi (skaitļi)
konsole.log (halveNumbers (dubults))
konsole.log (sumNumbers (skaitļi))

Iepriekš minētajā koda blokā svarīgais kods atrodas apakšā. Visas palīgfunkcijas ir definētas pirms izpildes punkta. Vajag izveidot savas JavaScript funkcijas faila augšdaļā var būt neērti, jo jums būs jāritina uz leju, lai redzētu faktisko kodu, kas veic darbu.

Ja pārvietosit palīgfunkcijas uz leju un faktisko kodu uz augšu, tiks parādīta atsauces kļūda. Izpildlaiks funkciju apstrādā kā mainīgo. Tādējādi pirms piekļūšanas vai izsaukšanas tas vispirms ir jādefinē. Bet, ja visas bultiņu funkcijas konvertējāt uz parastajām funkcijām (ar funkciju atslēgvārds), tad jūsu kods darbosies labi. Tajā pašā laikā svarīgais kods paliek augšpusē, kur varat to atrast.

Šī ir viena no lielākajām problēmām, izmantojot bultiņu funkcijas. Viņiem nav nekādas mitināšanas darbības. Citiem vārdiem sakot, jums tie ir jādefinē pirms faktiskās vietas, kur tos izmantotu. No otras puses, jūs varat veikt parastās funkcijas.

2. Bultiņu funkcijas dažiem cilvēkiem var radīt neskaidrības

Vēl viens iemesls, lai izmantotu parastās funkcijas, nevis bultiņas, ir lasāmība. Parastās funkcijas ir vieglāk lasāmas, jo tās skaidri izmanto funkciju atslēgvārds. Šis atslēgvārds norāda, ka attiecīgais kods ir funkcija.

No otras puses, jūs piešķirat mainīgajiem lielumiem bultiņu funkcijas. Ja esat iesācējs, tas var mulsināt jūs, domājot, ka kods ir mainīgs, nevis funkcija.

Salīdziniet divas tālāk norādītās funkcijas.

konst halfNumbers = (cipariem) => {
atgriezties numbers.map(n => n/ 2)
}
funkcijuhalfNumbers(cipariem) { 
atgriezties numbers.map(n => n/ 2)
}

No pirmā acu uzmetiena jūs varat viegli saprast, ka otrā koda daļa ir funkcija. Sintakse skaidri parāda, ka kods ir funkcija. Tomēr pirmais ir neskaidrs — iespējams, nav viegli noteikt, vai tas ir mainīgais vai funkcija.

3. Jūs nevarat izmantot bultiņu funkcijas kā metodes

Kad izmantojat bultiņas funkciju, šis atslēgvārds atbilst visam, kas atrodas ārpus lietas, kurā mēs atrodamies. Vairumā gadījumu tas ir loga objekts.

Apsveriet šādu objektu:

konst persona = {
 vārds: "Kails",
 uzvārds: "Pavārs",
 printName: () => {
konsole.log(`${šis.vārds}``${šis.uzvārds}` )
 }
}
person.printName()

Ja palaižat kodu, pamanīsit, ka pārlūkprogramma drukā nenoteikts gan vārdam, gan uzvārdam. Tā kā mēs izmantojam bultiņas funkciju, šis atslēgvārds atbilst loga objektam. Tāpat nav vārds vai uzvārds tur definēts īpašums.

Lai atrisinātu šo problēmu, tā vietā ir jāizmanto parasta funkcija:

konst persona = {
 vārds: "Kails",
 uzvārds: "Pavārs",
 printName: funkciju() {
konsole.log(`${šis.vārds}``${šis.uzvārds}` )
 }
}
person.printName()

Tas darbosies labi, jo šis attiecas uz persona objektu. Ja jūs bieži nodarbosities ar šāda veida objektorientētu programmēšanu, jums būs jāpārliecinās, ka izmantojat parastās funkcijas. Bultiņu funkcijas nedarbosies.

Kad lietot bultiņu funkcijas

Izmantojiet bultiņu funkcijas galvenokārt vietās, kur nepieciešama anonīma funkcija. Šāda scenārija piemērs ir atzvanīšanas funkcija. Rakstot atzvanīšanu, labāk ir izmantot bultiņas funkciju, jo sintakse ir daudz vienkāršāka nekā pilnas funkcijas rakstīšana.

Salīdziniet šos divus un izlemiet, kurš ir vienkāršāks:

funkcijuhalfNumbers(cipariem) {
atgriezties numbers.map(n => n/ 2)
}
funkcijuhalfNumbers(cipariem) {
atgriezties numbers.map(funkciju(n) {
atgriezties n/ 2
 })
}

Abi gadījumi nodod atzvanīšanas funkciju map() metodei. Bet pirmā atzvanīšana ir bultiņas funkcija, bet otrā ir pilna funkcija. Varat redzēt, kā pirmā funkcija aizņem mazāk koda rindiņu nekā otrā funkcija: trīs vs. pieci.

Citu reizi bultiņu funkcijas var izmantot ikreiz, kad vēlaties izmantot noteiktu "šo" sintaksi. Objekts "šis" mainīsies atkarībā no tā, vai konkrētām lietām izmantojat parastās funkcijas vai bultiņu funkcijas.

Šis koda bloks reģistrē divus "klikšķa" notikumu klausītājus dokumenta objektā. Pirmajā instancē kā atzvanīšanas funkcija tiek izmantota parasta funkcija, bet otrajā tiek izmantota bultiņas funkcija. Abos atzvanīšanas gadījumos kods reģistrē izpildes objektu (šo) un notikuma mērķi:

dokumentu.addEventListener("klikšķis", funkciju(e) {
konsole.log("FUNKCIJA", šis, e.target)
})
dokumentu.addEventListener("klikšķis", (e) => {
konsole.log("BULTIŅA", šis, e.target)
})

Ja palaist šo skriptu, pamanīsit, ka “šī” atsauce abiem ir atšķirīga. Parastajai funkcijai šis rekvizīts atsaucas uz dokumentu, kas ir tāds pats kā e.mērķis īpašums. Bet bultiņas funkcijai tas attiecas uz loga objektu.

Ja kā atzvanīšanu izmantojat parasto funkciju, tas attieksies uz elementu, kurā mēs aktivizējam notikumu. Bet, ja izmantojat bultiņas funkciju, šis atslēgvārds pēc noklusējuma ir loga objekts.

Uzziniet vairāk par bultiņu funkcijām salīdzinājumā ar parastajām funkcijām

Pastāv vairākas citas smalkas atšķirības starp parastajām funkcijām un bultiņu funkcijām. Abu veidu funkciju apgūšana ir pamats JavaScript apguvei. Uzziniet, kad lietot vienu un kad lietot otru; tad jūs sapratīsit parastās funkcijas vai bultiņas funkcijas izmantošanas sekas savā JavaScript.