6 eroa nuolifunktioiden ja säännöllisten funktioiden välillä JavaScriptissä

Funktiot ovat olennainen osa JavaScriptiä, joita sinun on käytettävä uudelleenkäytettävän koodin kirjoittamiseen. Toimintojen kaksi päätyyppiä ovat tavalliset ja nuolifunktiot, ja niitä voidaan määrittää monella tavalla.

Vaikka ne täyttävät samanlaiset tarpeet, niillä on muutamia tärkeitä eroja, jotka voivat vaikuttaa olennaisesti siihen, miten käytät niitä koodissasi. Opi kaikki nuolitoimintojen ja tavallisten toimintojen välisistä eroista.

1. Syntaksierot

JavaScript-funktioita kehitettäessä valitsemasi syntaksilla on suuri vaikutus siihen, kuinka helppoa koodisi on lukea ja ymmärtää. Tavallisten ja nuolifunktioiden syntaksi eroaa huomattavasti, mikä vaikuttaa niiden kirjoittamiseen ja käyttöön.

JavaScript-nuolitoiminnot käytä pienempää kielirakennetta, joka on ymmärrettävämpi. Voit käyttää niitä funktioiden luomiseen yhdistämällä ne yhdeksi lausekkeeksi tai lauseeksi.

konst lisää = (a, b) => a + b;

Tässä esimerkissä

lisätä toiminto hyväksyy kaksi tuloa, a ja b, ja palauttaa niiden kokonaismäärän. The => merkki määrittelee tämän nuolifunktioksi.

Toisaalta säännöllisen funktion määrittäminen edellyttää toiminto avainsana, jossa on monisanaisempi syntaksi, kuten tässä esimerkissä näkyy:

toimintolisätä(a, b) {
palata a + b;
}

Tässä esimerkissä toiminto avainsana määrittelee säännöllisen funktion, joka käyttää myös kiharoita ja palata lausunto.

Säännölliset funktiot ovat hyödyllisempiä monimutkaisessa syntaksissa, joka vaatii useita lausekkeita tai lausekkeita. Sitä vastoin nuolifunktiot käyttävät tiiviimpää syntaksia, joka voi helpottaa koodin lukemista ja ymmärtämistä.

2. Laajuuserot

Termi "scoping" kuvaa, kuinka funktion sisäiset muuttujat ja funktiot ovat käytettävissä. JavaScriptissä määrität ja käytät muuttujia ja toimintoja koko koodissasi laajuuden avulla. Niiden erottuva laajuus voi vaikuttaa merkittävästi siihen, miten kirjoitat ja käytät JavaScriptiä nuoli ja säännölliset toiminnot.

Laajuuden määrittämisessä kuinka nuolifunktiot käsittelevät Tämä avainsana eroaa merkittävästi tavallisista funktioista. Säännölliset toiminnot määrittelevät Tämä avainsana itse; siksi se voi muuttua kontekstin mukaan, jossa kutsut funktion.

Toisaalta, koska he eivät määrittele Tämä avainsana, nuolifunktiot käyttävät samaa Tämä kuin niitä ympäröivä staattinen alue.

Jos haluat nähdä eron, katso seuraava esimerkki. Oletetaan, että sinulla on a henkilö esine, jossa on a nimi ominaisuus ja menetelmä nimeltä sano nimi() joka kirjaa henkilön nimen tavallisella funktiolla:

konst henkilö = {
 nimi: 'John'
 sayName: toiminto() {
konsoli.Hirsi(Tämä.nimi);
 }
};
henkilö.sayName(); // kirjaa 'John'

Tässä tavallinen sayName()-funktio on menetelmä henkilö-objektista ja Tämä funktion sisällä oleva avainsana viittaa kyseiseen henkilöobjektiin.

Kokeillaan nyt samaa nuolifunktiolla:

konst henkilö = {
 nimi: "John",
 sayName: () => {
konsoli.Hirsi(Tämä.nimi);
 }
};
henkilö.sayName(); // lokit määrittelemättömät

Koska nuolitoimintoa käytetään sano nimi() menetelmä ei määrittele omaansa Tämä avainsanaa, se käyttää Tämä sitä ympäröivästä staattisesta laajuudesta. Tässä tapauksessa se on ilmentymän globaali laajuus.

Tämän seurauksena, kun soitat henkilö.sayName(), saat määrittelemätön mielummin kuin "John." Tämä voi vaikuttaa merkittävästi siihen, miten kirjoitat ja käytät toimintoja koodissasi.

3. Käyttötapaukset ja parhaat käytännöt

Tavalliset toiminnot sopivat paremmin toimintoihin, jotka vaativat omat Tämä avainsana, kuten menetelmät objektissa.

Nuolitoiminnot sopivat paremmin toiminnallinen ohjelmointi ja takaisinsoittoja, jotka eivät vaadi Tämä avainsana.

4. Toimintojen sidontaerot

Funktiosidonta on termi, jota käytetään kuvaamaan välistä suhdetta Tämä avainsanat ja funktiot koodissasi. Nuolifunktioiden ja normaalien funktioiden väliset funktioiden sitomisen vaihtelut voivat vaikuttaa voimakkaasti nuolifunktioiden rakentamiseen ja käyttöön.

Käyttämällä Tämä avainsana tekee siitä ainutlaatuisen tavallisissa funktioissa ja liittyy erilaisiin objekteihin funktion kutsumiseen käytetyn menetelmän perusteella. Funktioiden sidonta on yksi tärkeimmistä eroista tavallisten ja nuolifunktioiden välillä.

Sitä vastoin nuolitoiminnoilla ei ole Tämä avainsana; pikemminkin he saavat sen ympäröivistä kaukoputkista.

Katsotaanpa esimerkkiä ymmärtääksemme enemmän tästä erosta. Oletetaan, että sinulla on a henkilö esine, jossa on a nimi kenttä ja menetelmä nimeltä sano nimi() joka käyttää tavallista funktiota henkilön nimen tallentamiseen:

konst henkilö = {
 nimi: "John",
 sayName: toiminto() {
konsoli.Hirsi(Tämä.nimi);
 }
};
konst otherPerson = {
 nimi: "Jane"
};
person.sayName.call (toinenPerson); // lokit "Jane"

Tässä esimerkissä kutsut henkilöobjektia sano nimi() menetelmä arvon kanssa toinen henkilö käyttämällä puhelu() menetelmä. Tämän vuoksi sano nimi() menetelmä, Tämä, avainsana on sidottu toinen henkilö objekti, ja se kirjautuu "Jane" mielummin kuin "John."

Käytetään nyt samaa nuolifunktion kanssa:

konst henkilö = {
 nimi: "John",
 sayName: () => {
konsoli.Hirsi(Tämä.nimi);
 }
};
konst otherPerson = {
 nimi: "Jane"
};
person.sayName.call (toinenPerson); // lokit määrittelemättömät

Koska sano nimi() tekniikalla ei ole omaa avainsanaa, käytät sen sisällä tässä esimerkissä nuolifunktiota. Tässä tapauksessa nuolifunktio perii ympäröivän laajuuden, joka on globaali laajuus, ominaisuudet.

Tämä tarkoittaa, että kun juokset person.sayName.call (toinenPerson), nuolitoiminto Tämä avainsana pysyy globaalina objektina ja määrittelemätön ottaa tilalle Jane lokissa.

Jos haluat sitoa funktion tiettyyn Tämä arvo, tavallinen funktio voi olla parempi. Kuitenkin, jos sinun ei tarvitse sitoa funktiota tiettyyn Tämä arvo, nuolifunktio saattaa olla lyhyempi ja helpompi ymmärtää.

5. Implisiittinen paluu

Nuolifunktiolla on implisiittinen palautusominaisuus. Jos funktion runko koostuu yhdestä lausekkeesta, funktiot palauttavat kyseisen lausekkeen.

Esimerkiksi:

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

Tämä nuolifunktio palauttaa parametrin tuplaarvon. Sinun ei tarvitse käyttää eksplisiittiä palata avainsana, koska funktion rungossa on vain yksi lauseke.

6. Yhteensopivuuserot

Yhteensopivuuserot viittaavat ECMAScript 6:n lisättyihin nuolitoimintoihin, jotka eivät välttämättä toimi vanhemmissa selaimissa tai ympäristöissä. Toisaalta tavalliset toiminnot ovat olleet käytössä JavaScriptin alusta lähtien ja niitä tuetaan laajasti.

Tässä on esimerkki nuolitoiminnosta, joka ei välttämättä toimi vakiintuneemmissa olosuhteissa:

konst lisää = (a, b) => a + b;

Seuraava on vertailukelpoinen tavallinen toiminto, jonka pitäisi toimia useimmissa tilanteissa:

toimintolisätä(a, b) {
palata a + b;
}

Käytä tavallisia toimintoja nuolitoimintojen sijaan, kun kohdistat vanhoihin ympäristöihin yhteensopivuuden varmistamiseksi. Nuolifunktiot voivat kuitenkin tarjota syntaksin, joka on helpompi ymmärtää ja tiivistetty nykyaikaisten selaimien ja ympäristöjen kanssa työskennellessä.

Nuolifunktioiden ja säännöllisten funktioiden valinta JavaScriptissä

JavaScriptissä nuolella ja tavallisilla funktioilla on erilliset ominaisuudet ja sovellukset. Nuolifunktioilla on yksinkertainen syntaksi, periytyvä Tämä avainsanatermi niiden käytön kontekstista, kun taas tavalliset toiminnot ovat mukautuvampia ja voivat käsitellä monimutkaisempia tilanteita.

On tärkeää tietää, miten ne eroavat toisistaan ​​ja miten niitä käytetään koodisi vaatimusten mukaisesti. Kun valitset käytettävää toimintoa, sinun tulee ottaa huomioon myös yhteensopivuuserot.

Viime kädessä JavaScriptin nuoli ja tavalliset toiminnot ovat tehokkaita työkaluja, jotka auttavat sinua kirjoittamaan selkeämpää ja tehokkaampaa koodia.