6 razlik med puščičnimi funkcijami in navadnimi funkcijami v JavaScriptu

Funkcije so bistveni del JavaScripta, ki ga morate uporabiti za pisanje kode za večkratno uporabo. Dve glavni vrsti funkcij sta navadne in puščične funkcije in obstaja veliko načinov za njihovo definiranje.

Čeprav izpolnjujejo podobne potrebe, imajo nekaj kritičnih razlik, ki lahko bistveno vplivajo na to, kako jih uporabljate v kodi. Izvedite vse o več razlikah med puščičnimi funkcijami in navadnimi funkcijami.

1. Razlike v sintaksi

Sintaksa, ki jo izberete pri razvoju funkcij JavaScript, močno vpliva na to, kako preprosto je brati in razumeti vašo kodo. Sintaksa navadnih in puščičnih funkcij se bistveno razlikuje, kar vpliva na to, kako jih pišete in uporabljate.

Puščične funkcije JavaScript uporabite manjšo jezikovno strukturo, ki je bolj razumljiva. Uporabite jih lahko za ustvarjanje funkcij tako, da jih združite v en izraz ali stavek.

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

V tem primeru je dodati funkcija sprejme dva vhoda,

a in b, in vrne njihovo skupno vrednost. The => znak to definira kot funkcijo puščice.

Po drugi strani pa definiranje redne funkcije zahteva uporabo funkcijo ključno besedo z bolj podrobno sintakso, kot je prikazano v tem primeru:

funkcijododati(a, b) {
vrnitev a + b;
}

V tem primeru je funkcijo ključna beseda definira običajno funkcijo, ki uporablja tudi zavite oklepaje in vrnitev izjava.

Navadne funkcije so bolj uporabne za kompleksno sintakso, ki zahteva več stavkov ali izrazov. V nasprotju s tem puščične funkcije uporabljajo bolj jedrnato sintakso, ki lahko olajša branje in razumevanje vaše kode.

2. Razlike v obsegu

Izraz "obseg" opisuje, kako so notranje spremenljivke in funkcije funkcije dostopne. V JavaScriptu definirate in dostopate do spremenljivk in funkcij v vaši kodi z uporabo obsega. Njihovo različno določanje obsega lahko bistveno vpliva na to, kako pišete in uporabljate JavaScript puščične in redne funkcije.

Pri določanju obsega, kako funkcije puščic obravnavajo to ključna beseda bistveno razlikuje od normalnih funkcij. Redne funkcije določajo to ključne besede sami; zato se lahko spremeni glede na kontekst, v katerem prikličete funkcijo.

Po drugi strani pa zato, ker ne določajo to ključna beseda, puščične funkcije uporabljajo isto to kot statično območje, ki jih obdaja.

Če želite videti razliko, si oglejte naslednji primer. Recimo, da imate oseba objekt z a ime lastnost in imenovana metoda reciName() ki beleži ime osebe z običajno funkcijo:

konst oseba = {
 ime: 'Janez,'
 reciName: funkcijo() {
konzola.log(to.ime);
 }
};
person.sayName(); // beleži 'Janez'

Tukaj je običajna funkcija sayName() metoda objekta osebe in to ključna beseda znotraj te funkcije se nanaša na predmet osebe.

Poskusimo zdaj isto stvar s puščično funkcijo:

konst oseba = {
 ime: 'Janez',
 reciName: () => {
konzola.log(to.ime);
 }
};
person.sayName(); // beleži nedefinirano

Ker je funkcija puščice, uporabljena v reciName() metoda ne opredeljuje lastne to ključna beseda, uporablja to statičnega obsega, ki ga obdaja. V tem primeru je to globalni obseg primerka.

Kot rezultat, ko pokličete person.sayName(), dobiš nedoločeno raje kot "Janez." To lahko bistveno vpliva na pisanje in uporabo funkcij v kodi.

3. Primeri uporabe in najboljše prakse

Navadne funkcije so bolj primerne za funkcije, ki zahtevajo svoje to ključne besede, kot so metode v objektu.

Puščične funkcije so bolj primerne za funkcionalno programiranje in povratne klice, ki ne zahtevajo to ključna beseda.

4. Razlike v vezavi funkcij

Funkcijska vezava je izraz, ki se uporablja za opis razmerja med to ključno besedo in funkcije v vaši kodi. Različice v povezovanju funkcij med puščičnimi in običajnimi funkcijami lahko močno vplivajo na to, kako konstruirate in uporabljate puščične funkcije.

Uporabljati to ključna beseda je edinstvena v običajnih funkcijah in se povezuje z različnimi predmeti glede na metodo, uporabljeno za klic funkcije. Vezava funkcij je ena najpomembnejših razlik med običajnimi in puščičnimi funkcijami.

V nasprotju s tem funkcije puščic nimajo to ključna beseda; raje ga dobijo iz okolice.

Oglejmo si primer, da bomo bolje razumeli to razliko. Predpostavimo, da imate a oseba objekt z a ime polje in metoda, imenovana reciName() ki uporablja običajno funkcijo za zapis imena osebe:

konst oseba = {
 ime: 'Janez',
 reciName: funkcijo() {
konzola.log(to.ime);
 }
};
konst otherPerson = {
 ime: 'Jane'
};
person.sayName.call (drugaOseba); // beleži 'Jane'

V tem primeru osebo imenujete objekt reciName() metoda z vrednostjo druga oseba uporabljati klic() metoda. Zaradi tega je reciName() metoda, to, ključna beseda je vezana na druga oseba objekt in beleži "Jane" raje kot "Janez."

Uporabimo zdaj isto stvar s puščično funkcijo:

konst oseba = {
 ime: 'Janez',
 reciName: () => {
konzola.log(to.ime);
 }
};
konst otherPerson = {
 ime: 'Jane'
};
person.sayName.call (drugaOseba); // beleži nedefinirano

Odkar je reciName() tehnika nima lastne ključne besede, v tem primeru znotraj nje uporabljate puščično funkcijo. V tem primeru puščična funkcija podeduje lastnosti okoliškega obsega, ki je globalni obseg.

To pomeni, da ko tečete person.sayName.call (druga oseba), puščične funkcije to ključna beseda ostane globalni objekt in nedoločeno prevzame mesto Jane v dnevniku.

Če morate funkcijo povezati z določeno to vrednost, je morda boljša običajna funkcija. Vendar, če vam ni treba povezati funkcije z določeno to vrednost, je lahko puščična funkcija krajša in lažje razumljiva.

5. Implicitna vrnitev

Puščična funkcija ima funkcijo implicitnega vračanja. Če je telo funkcije sestavljeno iz enega samega izraza, funkcija vrne ta izraz.

Kot primer:

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

Ta puščična funkcija vrne dvojnik iz parametra. Ni vam treba uporabiti eksplicitnega vrnitev ker ima telo funkcije samo en izraz.

6. Razlike v združljivosti

Razlike v združljivosti se nanašajo na dodane puščične funkcije ECMAScript 6, ki morda ne bodo delovale s starejšimi brskalniki ali okolji. Po drugi strani pa običajne funkcije obstajajo že od začetka JavaScripta in so široko podprte.

Tukaj je ilustracija funkcije puščice, ki morda ne bo delovala v bolj ustaljenih pogojih:

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

Sledi primerljiva redna funkcija, ki bi morala delovati v večini primerov:

funkcijododati(a, b) {
vrnitev a + b;
}

Pri ciljanju na starejša okolja raje uporabljajte običajne funkcije kot puščične funkcije, da zagotovite združljivost. Vendar lahko puščične funkcije zagotovijo sintakso, ki je lažje razumljiva in bolj zgoščena pri delu s sodobnimi brskalniki in okolji.

Izbira med puščičnimi funkcijami in navadnimi funkcijami v JavaScriptu

V JavaScriptu imajo puščične in navadne funkcije različne funkcije in aplikacije. Puščične funkcije imajo preprosto sintakso, dedovanje to ključni izraz iz konteksta njihove uporabe, medtem ko so redne funkcije bolj prilagodljive in lahko obravnavajo bolj zapletene situacije.

Ključnega pomena je vedeti, v čem se razlikujejo in kako jih uporabiti glede na zahteve kode. Ko izbirate, katero vrsto funkcije boste uporabili, morate upoštevati tudi razlike v združljivosti.

Navsezadnje so puščice in običajne funkcije JavaScripta zmogljiva orodja, ki vam pomagajo napisati čistejšo in učinkovitejšo kodo.