Zašto biste trebali biti oprezni s korištenjem funkcija strelica u JavaScriptu

Sintaksa funkcije strelice stigla je s izdanjem ECMAScripta 2015, također poznatog kao ES6. Danas su funkcije strelica postale omiljena značajka mnogih JavaScript programera. Ova ljubav prema funkcijama strelica je zbog jezgrovite sintakse i jednostavnog ponašanja ključne riječi "this".

Ali funkcije strelica imaju neke nedostatke. Saznajte o ključnim razlikama između funkcija strelica i uobičajenih funkcija te saznajte zašto je u većini slučajeva bolje da se držite uobičajenih funkcija.

1. Prije upotrebe morate definirati funkciju strelice

Ne možete podići funkciju strelice. Zadana pravila podizanja JavaScripta omogućuju vam da pozovete funkciju prije nego što je definirate, ali to nije slučaj s funkcijama strelica. Ako imate JavaScript datoteku s funkcijama, to bi značilo da će sav važan kod biti dolje na dnu datoteke.

Razmotrite na primjer sljedeći JavaScript kôd:

konst dvostrukiBrojevi = (brojevi) { 
 brojevi.map(n => n * 2)
}
konst prepolovitiBrojeve = (brojevi) { 
 brojevi.map(n => n / 2)
}
konst zbrojBrojeva = (brojevi) { 
 brojevi.smanjiti((zbroj, n) => { 
povratak zbroj + n; 
 }, 0)
}
konst brojevi = [1, 20, 300, 700, 1500]
konst udvostručeno = dvostruki brojevi (brojevi)
konzola.log (polovni brojevi (udvostručeni))
konzola.log (zbrojBrojevi (brojevi))

U gornjem bloku koda, važan kod je dolje na dnu. Sve pomoćne funkcije su definirane prije točke izvršenja. Morati izradite svoje JavaScript funkcije na vrhu datoteke može biti nezgodno jer ćete se morati pomaknuti prema dolje da biste vidjeli stvarni kod koji radi.

Ako ste pomoćne funkcije premjestili na dno, a stvarni kod na vrh, dobit ćete referentnu pogrešku. Runtime tretira funkciju kao varijablu. Stoga ga prvo morate definirati prije nego što mu pristupite ili ga pozovete. Ali ako ste pretvorili sve funkcije strelica u redovne funkcije (s funkcija ključna riječ), tada bi vaš kod dobro funkcionirao. U isto vrijeme, važan kod ostaje na vrhu gdje ga možete locirati.

Ovo je jedan od najvećih problema s korištenjem funkcija strelica. Ne pokazuju nikakvo hosting ponašanje. Drugim riječima, morate ih definirati prije stvarnog mjesta na kojem ćete ih koristiti. S druge strane, možete podići redovite funkcije.

2. Funkcije strelica bi neke ljude mogle zbuniti

Drugi razlog za korištenje uobičajenih funkcija umjesto funkcija strelica je čitljivost. Redovne funkcije lakše je čitati jer eksplicitno koriste funkcija ključna riječ. Ova ključna riječ identificira da je dotični kod funkcija.

S druge strane, varijablama dodjeljujete funkcije strelica. Kao početnika, ovo bi vas moglo zbuniti da mislite da je kôd varijabla, a ne funkcija.

Usporedite dvije funkcije u nastavku:

konst prepolovitiBrojeve = (brojevima) => {
povratak brojevi.map(n => n / 2)
}
funkcijaprepolovitiBrojeve(brojevima) { 
povratak brojevi.map(n => n / 2)
}

Na prvi pogled možete lako reći da je drugi dio koda funkcija. Sintaksa jasno pokazuje da je kod funkcija. Međutim, prvi je dvosmislen - možda nećete lako reći radi li se o varijabli ili funkciji.

3. Ne možete koristiti funkcije strelica kao metode

Kada koristite funkciju strelice, ovaj ključna riječ odgovara onome što je izvan stvari u kojoj smo. U većini slučajeva to je prozorski objekt.

Razmotrite sljedeći objekt:

konst osoba = {
 ime: "Kyle",
 prezime: "Kuhati",
 Naziv ispisa: () => {
konzola.log(`${ovaj.ime}``${ovaj.prezime}` )
 }
}
person.printName()

Ako pokrenete kod, primijetit ćete da preglednik ispisuje nedefiniran i za ime i za prezime. Budući da koristimo funkciju strelice, ovaj ključna riječ odgovara objektu prozora. Također, ne postoji ime ili prezime vlasništvo definirano tamo.

Da biste riješili ovaj problem, morate umjesto toga upotrijebiti običnu funkciju:

konst osoba = {
 ime: "Kyle",
 prezime: "Kuhati",
 Naziv ispisa: funkcija() {
konzola.log(`${ovaj.ime}``${ovaj.prezime}` )
 }
}
person.printName()

Ovo će dobro funkcionirati jer ovaj odnosi se na osoba objekt. Ako ćete se često baviti ovom vrstom objektno orijentiranog programiranja, tada ćete morati biti sigurni da koristite uobičajene funkcije. Funkcije strelica neće raditi.

Kada koristiti funkcije strelica

Koristite funkcije strelica uglavnom na mjestima gdje vam je potrebna anonimna funkcija. Primjer takvog scenarija je rad s funkcijom povratnog poziva. Bolje je koristiti funkciju strelice kada pišete povratni poziv jer je sintaksa puno jednostavnija od pisanja cijele funkcije.

Usporedite ovo dvoje i odlučite što je jednostavnije:

funkcijaprepolovitiBrojeve(brojevima) {
povratak brojevi.map(n => n / 2)
}
funkcijaprepolovitiBrojeve(brojevima) {
povratak brojevi.map(funkcija(n) {
povratak n / 2
 })
}

Oba slučaja prosljeđuju funkciju povratnog poziva metodi map(). Ali prvi povratni poziv je funkcija strelice, dok je drugi puna funkcija. Možete vidjeti kako prva funkcija zauzima manje redaka koda od druge funkcije: tri vs. pet.

Drugi put za korištenje funkcija strelica je svaki put kada se želite baviti određenom "ovom" sintaksom. Objekt "ovaj" promijenit će se ovisno o tome koristite li obične funkcije ili funkcije strelica za određene stvari.

Sljedeći blok koda registrira dva slušatelja događaja "klik" na objekt dokumenta. Prva instanca koristi regularnu funkciju kao povratni poziv, dok druga koristi funkciju strelice. Unutar oba povratna poziva, kod bilježi objekt izvršenja (ovo) i cilj događaja:

dokument.addEventListener("klik", funkcija(e) {
konzola.log("FUNKCIJA", ovaj, e.target)
})
dokument.addEventListener("klik", (e) => {
konzola.log("STRIJELA", ovaj, e.target)
})

Ako biste pokrenuli ovu skriptu, primijetit ćete da je "ova" referenca različita za obje. Za uobičajenu funkciju, ovo svojstvo upućuje na dokument, koji je isti kao i e.cilj vlasništvo. Ali za funkciju strelice, ovo upućuje na objekt prozora.

Kada koristite običnu funkciju kao povratni poziv, to će se odnositi na element u kojem pokrećemo događaj. Ali kada koristite funkciju strelice, tada je ova ključna riječ zadana za objekt prozora.

Saznajte više o funkcijama strelica naspram uobičajenih funkcija

Postoji nekoliko drugih suptilnih razlika između uobičajenih funkcija i funkcija strelica. Savladavanje obje vrste funkcija temelj je za stjecanje znanja o JavaScriptu. Naučite kada koristiti jedno, a kada drugo; tada ćete razumjeti implikacije korištenja obične funkcije ili funkcije strelice u svom JavaScriptu.