6 razlika između funkcija strelica i regularnih funkcija u JavaScriptu

Funkcije su bitan dio JavaScripta koji trebate koristiti za pisanje koda za višekratnu upotrebu. Dvije glavne vrste funkcija su obične i strelice, a postoji mnogo načina za njihovo definiranje.

Iako ispunjavaju slične potrebe, imaju nekoliko kritičnih razlika koje mogu bitno utjecati na to kako ih koristite u svom kodu. Saznajte sve o nekoliko razlika između funkcija strelica i uobičajenih funkcija.

1. Sintaktičke razlike

Sintaksa koju odaberete kada razvijate JavaScript funkcije ima velik utjecaj na to koliko je jednostavno čitati i razumjeti vaš kod. Sintaksa uobičajenih funkcija i funkcija strelica značajno se razlikuje, što utječe na način na koji ih pišete i upotrebljavate.

JavaScript funkcije strelica koristiti manju jezičnu strukturu koja je razumljivija. Možete ih koristiti za stvaranje funkcija kombiniranjem u jedan izraz ili izjavu.

konst dodati = (a, b) => a + b;

U ovom primjeru, dodati

funkcija prihvaća dva ulaza, a i b, i vraća njihov ukupni iznos. The => znak definira ovo kao funkciju strelice.

S druge strane, definiranje regularne funkcije zahtijeva korištenje funkcija ključna riječ, s detaljnijom sintaksom, kao što je prikazano u ovom primjeru:

funkcijadodati(a, b) {
povratak a + b;
}

U ovom primjeru, funkcija ključna riječ definira regularnu funkciju koja također koristi vitičaste zagrade i povratak izjava.

Uobičajene funkcije su korisnije za složenu sintaksu koja zahtijeva više izjava ili izraza. Nasuprot tome, funkcije strelica koriste koncizniju sintaksu koja može vaš kod učiniti lakšim za čitanje i razumijevanje.

2. Razlike u opsegu

Izraz "opseg" opisuje kako su unutarnje varijable i funkcije funkcije dostupne. U JavaScriptu definirate i pristupate varijablama i funkcijama u svom kodu korištenjem opsega. Njihova posebna opseg može značajno utjecati na to kako pišete i koristite JavaScript strelice i regularne funkcije.

U opsegu, kako funkcije strelica obrađuju ovaj ključna riječ značajno se razlikuje od normalnih funkcija. Redovne funkcije definiraju ovaj ključne riječi sami; stoga se može promijeniti ovisno o kontekstu u kojem pozivate funkciju.

S druge strane, jer ne specificiraju ovaj ključna riječ, funkcije strelica koriste isto ovaj kao statički opseg koji ih okružuje.

Da biste vidjeli razliku, pogledajte sljedeći primjer. Recimo da imate osoba objekt s a Ime svojstvo i metoda tzv reciName() koji bilježi ime osobe koristeći regularnu funkciju:

konst osoba = {
 Ime: 'Ivan,'
 reciName: funkcija() {
konzola.log(ovaj.Ime);
 }
};
person.sayName(); // zapisuje 'Ivan'

Ovdje je uobičajena funkcija sayName() metoda objekta osobe i ovaj ključna riječ unutar te funkcije odnosi se na taj objekt osobe.

Pokušajmo sada istu stvar s funkcijom strelice:

konst osoba = {
 Ime: 'Ivan',
 reciName: () => {
konzola.log(ovaj.Ime);
 }
};
person.sayName(); // zapisnici nedefinirani

Budući da se funkcija strelice koristi u reciName() metoda ne definira vlastitu ovaj ključna riječ, koristi se ovaj statičkog opsega koji ga okružuje. U ovom slučaju, to je globalni opseg instance.

Kao rezultat toga, kada nazovete person.sayName(), dobivate nedefiniran rađe nego "Ivan." To može značajno utjecati na to kako pišete i koristite funkcije u svom kodu.

3. Slučajevi korištenja i najbolje prakse

Uobičajene funkcije bolje su prilagođene funkcijama koje zahtijevaju vlastite ovaj ključne riječi, kao što su metode u objektu.

Funkcije strelica su prikladnije za funkcionalno programiranje i povratne pozive koji ne zahtijevaju ovaj ključna riječ.

4. Razlike vezanja funkcija

Funkcijsko povezivanje je izraz koji se koristi za opisivanje odnosa između ovaj ključne riječi i funkcije u vašem kodu. Varijacije u povezivanju funkcija između funkcija strelica i normalnih funkcija mogu snažno utjecati na način na koji konstruirate i koristite funkcije strelica.

Koristiti ovaj ključna riječ čini je jedinstvenom u uobičajenim funkcijama i povezuje se s različitim objektima na temelju metode koja se koristi za pozivanje funkcije. Vezanje funkcija jedna je od najvažnijih razlika između običnih i strelicastih funkcija.

Nasuprot tome, funkcije strelica nemaju ovaj ključna riječ; nego ga dobivaju iz okolnih opsega.

Pogledajmo primjer kako bismo bolje razumjeli ovu razliku. Pretpostavimo da imate a osoba objekt s a Ime polje i metoda tzv reciName() koji koristi regularnu funkciju za snimanje imena osobe:

konst osoba = {
 Ime: 'Ivan',
 reciName: funkcija() {
konzola.log(ovaj.Ime);
 }
};
konst otherPerson = {
 Ime: 'Jane'
};
person.sayName.call (onetherPerson); // zapisuje 'Jane'

U ovom primjeru osobu nazivate objektom reciName() metoda s vrijednošću druga osoba koristiti poziv() metoda. Zbog toga, reciName() metoda, ovaj, ključna riječ vezana je za druga osoba objekt i zapisuje "Jane" rađe nego "Ivan."

Upotrijebimo sada istu stvar s funkcijom strelice:

konst osoba = {
 Ime: 'Ivan',
 reciName: () => {
konzola.log(ovaj.Ime);
 }
};
konst otherPerson = {
 Ime: 'Jane'
};
person.sayName.call (onetherPerson); // zapisnici nedefinirani

Budući da je reciName() tehnika nema vlastitu ključnu riječ, u ovom primjeru koristite funkciju strelice unutar nje. U ovom slučaju, funkcija strelice nasljeđuje svojstva okolnog opsega, što je globalni opseg.

To znači da kada trčite person.sayName.call (onetherPerson), funkcija strelice ovaj ključna riječ ostaje globalni objekt i nedefiniran zauzima mjesto Jane u dnevniku.

Ako trebate vezati funkciju za određenu ovaj vrijednost, obična funkcija može biti poželjnija. Međutim, ako ne trebate vezati funkciju za određenu ovaj vrijednost, funkcija strelice može biti kraća i lakša za razumijevanje.

5. Implicitni povratak

Funkcija strelica ima značajku implicitnog vraćanja. Ako se tijelo funkcije sastoji od jednog jedinog izraza, funkcija vraća taj izraz.

Kao primjer:

konst dvostruko = (x) => x * 2;

Ova funkcija strelice vraća duplo iz parametra. Ne morate koristiti eksplicitno povratak jer tijelo funkcije ima samo jedan izraz.

6. Kompatibilne razlike

Razlike u kompatibilnosti odnose se na ECMAScript 6 dodane funkcije strelica, koje možda neće raditi sa starijim preglednicima ili okruženjima. S druge strane, regularne funkcije postoje od početka JavaScripta i naširoko su podržane.

Ovdje je ilustracija funkcije strelice koja možda neće raditi u ustaljenim uvjetima:

konst dodati = (a, b) => a + b;

Sljedeća je usporediva regularna funkcija koja bi trebala raditi u većini situacija:

funkcijadodati(a, b) {
povratak a + b;
}

Koristite uobičajene funkcije umjesto funkcija strelica kada ciljate starija okruženja kako biste osigurali kompatibilnost. Međutim, funkcije strelica mogu pružiti sintaksu koja je lakša za razumijevanje i sažetija pri radu s modernim preglednicima i okruženjima.

Odabir između funkcija strelica i regularnih funkcija u JavaScriptu

U JavaScriptu funkcije strelice i regularne funkcije imaju različite značajke i primjene. Funkcije strelica imaju jednostavnu sintaksu, nasljeđujući ovaj pojam ključne riječi iz konteksta njihove uporabe, dok su regularne funkcije prilagodljivije i mogu se nositi sa složenijim situacijama.

Ključno je znati po čemu se razlikuju i kako ih koristiti prema zahtjevima koda. Prilikom odabira koju ćete vrstu funkcije koristiti, također biste trebali uzeti u obzir razlike u kompatibilnosti.

U konačnici, JavaScriptova strelica i regularne funkcije moćni su alati koji vam pomažu da pišete čišći i učinkovitiji kod.