Zakaj bi morali biti previdni pri uporabi puščičnih funkcij v JavaScriptu

Sintaksa puščične funkcije je prispela z izdajo ECMAScript 2015, znanega tudi kot ES6. Danes so puščične funkcije postale najljubša funkcija mnogih programerjev JavaScript. Ta ljubezen do puščičnih funkcij je posledica jedrnate sintakse in preprostega obnašanja ključne besede "ta".

Toda puščične funkcije imajo nekaj slabosti. Spoznajte ključne razlike med puščičnimi in običajnimi funkcijami ter ugotovite, zakaj je v večini primerov bolje, da se držite navadnih funkcij.

1. Preden uporabite puščično funkcijo, jo morate določiti

Ne morete dvigniti funkcije puščice. Privzeta pravila dvigovanja JavaScripta omogočajo, da pokličete funkcijo, preden jo definirate, vendar to ne velja za puščične funkcije. Če imate datoteko JavaScript s funkcijami, bi to pomenilo, da bo vsa pomembna koda na dnu datoteke.

Razmislite o naslednji kodi JavaScript na primer:

konst dvojnaŠtevilka = (številke) { 
 numbers.map(n => n * 2)
}
konst halveNumbers = (številke) { 
 numbers.map(n => n / 2)
}
konst sumNumbers = (števila) { 
 numbers.reduce((vsota, n) => { 
vrnitev vsota + n; 
 }, 0)
}
konst številke = [1, 20, 300, 700, 1500]
konst podvojeno = dvojnaŠtevilka (številke)
konzola.log (polovična števila (podvojena))
konzola.log (sumŠtevilke (številke))

V zgornjem kodnem bloku je pomembna koda na dnu. Vse pomožne funkcije so definirane pred točko izvajanja. Morati ustvarite svoje funkcije JavaScript na vrhu datoteke je lahko neprijetno, ker se boste morali pomakniti navzdol, da vidite dejansko kodo, ki opravlja delo.

Če ste pomožne funkcije premaknili na dno in dejansko kodo na vrh, boste prejeli referenčno napako. Izvajalno okolje obravnava funkcijo kot spremenljivko. Zato ga morate najprej definirati, preden dostopate do njega ali ga prikličete. Če pa ste pretvorili vse puščične funkcije v navadne funkcije (z funkcijo ključna beseda), potem bi vaša koda dobro delovala. Hkrati pa pomembna koda ostane na vrhu, kjer jo lahko najdete.

To je ena največjih težav pri uporabi puščičnih funkcij. Ne kažejo vedenja gostovanja. Z drugimi besedami, definirati jih morate pred dejanskim mestom, kjer jih boste uporabili. Po drugi strani pa lahko dvignete redne funkcije.

2. Funkcije puščic so lahko za nekatere ljudi zmedene

Drug razlog za uporabo navadnih funkcij namesto puščičnih funkcij je berljivost. Navadne funkcije je lažje brati, ker izrecno uporabljajo funkcijo ključna beseda. Ta ključna beseda označuje, da je zadevna koda funkcija.

Po drugi strani pa spremenljivkam dodelite puščične funkcije. Kot novinca bi vas to lahko zmedlo, da bi mislili, da je koda spremenljivka in ne funkcija.

Primerjajte spodnji funkciji:

konst razpolovnaŠtevilka = (številke) => {
vrnitev numbers.map(n => n / 2)
}
funkcijoprepolovitiŠtevilke(številke) { 
vrnitev numbers.map(n => n / 2)
}

Na prvi pogled lahko preprosto ugotovite, da je drugi del kode funkcija. Sintaksa jasno pove, da je koda funkcija. Vendar je prvi dvoumen - morda ne boste zlahka ugotovili, ali gre za spremenljivko ali funkcijo.

3. Puščičnih funkcij ne morete uporabljati kot metode

Ko uporabite puščično funkcijo, se to ključna beseda ustreza vsemu, kar je zunaj stvari, v kateri smo. V večini primerov je to okenski objekt.

Razmislite o naslednjem predmetu:

konst oseba = {
 ime: "Kyle",
 priimek: "kuharica",
 printName: () => {
konzola.log(`${to.ime}``${to.priimek}` )
 }
}
person.printName()

Če zaženete kodo, boste opazili, da brskalnik natisne nedoločeno za ime in priimek. Ker uporabljamo puščično funkcijo, to ključna beseda ustreza objektu okna. Prav tako ni ime oz priimek tam opredeljena lastnina.

Če želite rešiti to težavo, morate namesto tega uporabiti običajno funkcijo:

konst oseba = {
 ime: "Kyle",
 priimek: "kuharica",
 printName: funkcijo() {
konzola.log(`${to.ime}``${to.priimek}` )
 }
}
person.printName()

To bo dobro delovalo, ker to se nanaša na oseba predmet. Če se boste veliko ukvarjali s tovrstnim objektno usmerjenim programiranjem, se morate prepričati, da uporabljate običajne funkcije. Puščične funkcije ne bodo delovale.

Kdaj uporabiti puščične funkcije

Puščične funkcije uporabljajte predvsem tam, kjer potrebujete anonimno funkcijo. Primer takega scenarija je obravnavanje funkcije povratnega klica. Pri pisanju povratnega klica je bolje uporabiti puščično funkcijo, ker je sintaksa veliko enostavnejša kot pisanje celotne funkcije.

Primerjajte ta dva in se odločite, kateri je bolj preprost:

funkcijoprepolovitiŠtevilke(številke) {
vrnitev numbers.map(n => n / 2)
}
funkcijoprepolovitiŠtevilke(številke) {
vrnitev numbers.map(funkcijo(n) {
vrnitev n / 2
 })
}

Oba primera posredujeta funkcijo povratnega klica metodi map(). Toda prvi povratni klic je puščična funkcija, medtem ko je drugi polna funkcija. Vidite lahko, kako prva funkcija zavzame manj vrstic kode kot druga funkcija: tri vs. pet.

Drug čas za uporabo puščičnih funkcij je kadarkoli želite obravnavati določeno sintakso "ta". Predmet »ta« se bo spremenil glede na to, ali za določene stvari uporabljate običajne funkcije ali puščične funkcije.

Naslednji blok kode registrira dva poslušalca dogodka »klik« na objekt dokumenta. Prvi primer uporablja običajno funkcijo kot povratni klic, medtem ko drugi uporablja puščično funkcijo. Znotraj obeh povratnih klicev koda beleži objekt izvajanja (this) in cilj dogodka:

dokument.addEventListener("klik", funkcijo(e) {
konzola.log("FUNKCIJA", to, e.target)
})
dokument.addEventListener("klik", (e) => {
konzola.log("PUŠČICA", to, e.target)
})

Če bi zagnali ta skript, boste opazili, da je "ta" referenca različna za oba. Za običajno funkcijo se ta lastnost sklicuje na dokument, ki je enak kot e.target premoženje. Toda za puščično funkcijo se to sklicuje na okenski objekt.

Ko uporabljate običajno funkcijo kot povratni klic, se bo to nanašalo na element, kjer sprožimo dogodek. Ko pa uporabite puščično funkcijo, je ta ključna beseda privzeto nastavljena na okenski objekt.

Izvedite več o puščičnih funkcijah v primerjavi z navadnimi funkcijami

Obstaja več drugih subtilnih razlik med običajnimi funkcijami in puščičnimi funkcijami. Obvladovanje obeh vrst funkcij je temelj za obvladovanje JavaScripta. Naučite se, kdaj uporabiti enega in kdaj drugega; potem boste razumeli posledice uporabe navadne funkcije ali puščične funkcije v vašem JavaScriptu.