Puščične funkcije vs. Navadne funkcije v JavaScriptu

Kot skoraj vsak sodoben programski jezik tudi JavaScript ponuja načine za ustvarjanje funkcij, ki omogočajo ponovno uporabo kode. Za tiste, ki jezika ne poznate, obstajata dva različna načina za deklaracijo funkcije v JavaScriptu.

Prvotno, funkcijo uporabljena ključna beseda, pozneje pa je bila ustvarjena sintaksa puščice. Čeprav se razlikujeta po dostopnosti obsega, tako ključna beseda funkcije kot sintaksa puščice ustvarita podobne rezultate.

Nezmožnost razlikovanja med obema lahko povzroči težave in povzroči nepravilno uporabo. Za sodobnega razvijalca JS je nujno, da razume, kako vsaka deklaracija funkcije vpliva na obseg in vidnost.

Kaj so puščične funkcije JavaScripta?

Puščične funkcije JavaScripta so alternativni način za definiranje funkcij, ki ne uporabljajo privzetih vrednosti funkcijo ključna beseda:

funkcijologMessage(sporočilo) {
konzola.log (sporočilo);
}
konst logMessage = (sporočilo) => {
konzola.log (sporočilo);
}
konst logMessage = sporočilo =>konzola.log (sporočilo);

Zgoraj lahko vidite isto sporočilo, napisano na tri različne načine. Prvi uporablja metodo deklaracije običajne funkcije. Naslednja dva prikazujeta dva načina uporabe puščičnih funkcij ES6.

JavaScript je prvič sprejel sintakso puščične funkcije z izdajo standardov ECMAScript 2015. Puščične funkcije so ponujale čist in jedrnat način za hitro ustvarjanje funkcij ter zanimivo rešitev za več dolgotrajnih težav z obsegom v JavaScriptu.

Zaradi teh funkcij so funkcije puščic hitro postale hit med številnimi razvijalci. Programerji, ki iščejo sodobno kodno zbirko JavaScript, bodo prav tako verjetno našli puščične funkcije kot običajne funkcije.

Kako se puščične funkcije razlikujejo od navadnih funkcij v JavaScriptu?

Na prvi pogled se zdi, da se puščične funkcije ne razlikujejo veliko od funkcij, deklariranih s ključno besedo function. Zunaj sintakse oba zajemata nabor dejanj za večkratno uporabo, ki jih je mogoče priklicati od drugod v kodi.

Kljub podobnosti med obema pa obstajajo nekatere razlike, ki se jih morajo razvijalci zavedati.

Razlika v obsegu

Kadarkoli je v JavaScriptu deklarirana navadna funkcija, to funkcija deluje kot zaključek, ki ustvari lasten obseg. To lahko povzroči težave pri uporabi določenih specializiranih funkcij, kot je setTimeout in setInterval.

Pred ES6 je obstajalo precejšnje število rešitev, ki bi elemente dvignile na višje ravni obsega za uporabo pri povratnih klicih. Ti vdori so delovali, vendar jih je bilo pogosto težko razumeti in so lahko povzročili težave s prepisovanjem določenih spremenljivk.

Puščične funkcije so obe težavi rešile na preprost in eleganten način. Ko se puščična funkcija uporablja kot del povratnega klica, ima dostop do istega obsega kot funkcija, iz katere je bila klicana.

To je omogočilo uporabo funkcij kot povratnih klicev brez izgube dostopa do konteksta, v katerem je bil prvotni dogodek poklican. Kot preprost preizkus za prikaz tega načela v akciji lahko nastavite funkcijo zakasnjenega sporočanja, kot je ta spodaj:

funkcijodelayedMessage(sporočilo, zamuda) {

 setTimeout(funkcijo(sporočilo) {
konzola.log (sporočilo);
 }, zamuda);
}
delayedMessage("Pozdravljen, svet", 1000);

Funkcija je preprosta, sprejemljiva sporočilo in zamuda v milisekundah. Po preteku zakasnitve bi moralo sporočilo zabeležiti v konzolo. Ko pa se koda izvede, nedoločeno bo prijavljen v konzolo namesto sporočila, ki je bilo posredovano.

Ko se izvede funkcija povratnega klica, se obseg spremeni in izvirno sporočilo ni več dostopno. Uporaba sporočila znotraj zaprtja zahteva, da se sporočilo dvigne v globalno spremenljivko, zaradi česar bi lahko bilo prepisano pred povratnim klicem.

Funkcija puščice je prava rešitev za to težavo. Če zamenjate prvi argument za setTimeout, je mogoče ohraniti obseg in funkcija bo imela dostop do posredovanega sporočila delayedMessage.

funkcijodelayedMessage(sporočilo, zamuda) {

 setTimeout(() => {
konzola.log (sporočilo);
 }, zamuda);
}
delayedMessage("Pozdravljen, svet", 1000);

Zdaj, ko je izveden, delayedMessage funkcija bo zabeležila sporočilo. Poleg tega to omogoča, da se več sporočil postavi v čakalno vrsto z različnimi zakasnitvami, vsa pa se bodo še vedno pojavila ob pravem času.

To je posledica dejstva, da vsakič delayedMessage uporablja, generira lasten obseg s svojo kopijo notranje puščične funkcije.

Berljivost kode

Čeprav so puščične funkcije uporabne kot povratni klic, se uporabljajo tudi za ohranjanje čiste in jedrnate kode. V zgornjem razdelku lahko vidite, da je z uporabo funkcije puščice jasno, kaj se bo zgodilo, ko bo delayedMessage se imenuje funkcija.

Ko postanejo funkcije bolj zapletene, lahko z malo jasnosti postane koda veliko bolj berljiva. Pri sestavljanju predmetov lahko to poenostavi kodo pri dodajanju kratkih funkcij:

razredštevec{
 _štetje = 0;
 prirast = () => {
to._count += 1;
 }
 dekrement = () => {
to._štetje -= 1;
 }
 štetje = () => {
vrnitevto._count;
 }
}
pustiti ct = novo števec();

Vloga v objektno usmerjenem programiranju

Čeprav so puščične funkcije JavaScripta sestavni del funkcionalnega programiranja, imajo tudi svoje mesto v njem objektno orientirano programiranje. Puščične funkcije se lahko uporabljajo znotraj deklaracij razreda:

razredorderLineItem{
 _LineItemID = 0;
 _Izdelek = {};
 _kol = 1;
konstruktor(izdelek) {
to._LineItemID = crypto.randomUUID();
to._Izdelek = izdelek
 }
 changeLineItemQuantity = (newQty) => {
to._Kot = novoKot;
 }
}

Uporaba puščične funkcije za deklariranje metod znotraj deklaracije razreda ne spremeni obnašanja funkcije znotraj razreda. Zunaj razreda pa izpostavi funkcijo, kar omogoča, da jo uporabljajo drugi razredi.

Do navadnih funkcij ni mogoče dostopati zunaj deklaracije razreda, ne da bi jih poklicali. To pomeni, da medtem ko lahko druge deklaracije razredov podedujejo te funkcije, do njih ni mogoče dostopati neposredno za sestavljanje drugih razredov.

Kdaj naj uporabite puščične funkcije JavaScripta?

Puščične funkcije JavaScripta so neverjetno zmogljiva funkcija, ki razvijalcem omogoča veliko več nadzora nad obsegom, do katerega ima funkcija dostop. Vedeti, kdaj naj ima povratni klic dostop do nadrejenega obsega in kdaj ne, lahko razvijalcu pomaga določiti, katero vrsto deklaracije uporabiti.

Puščične funkcije omogočajo programerjem jasen in jedrnat način pisanja povratnih klicev, ne da bi razkrili dele obsega, ki bi morali biti skriti. Omogočajo tudi ustvarjanje čistih in enostavnih kompozicij, kar dodatno omogoča funkcionalno programiranje v JavaScriptu.

Razvijalci JS se morajo zavedati razlik med obema skladnjama in biti pozorni na to, katera sintaksa je primerna, ko deklarirajo njihove funkcije.