6 forskjeller mellom pilfunksjoner og vanlige funksjoner i JavaScript

Funksjoner er en viktig del av JavaScript som du må bruke for å skrive gjenbrukbar kode. De to hovedtypene funksjoner er vanlige funksjoner og pilfunksjoner, og det er mange måter å definere dem på.

Selv om de fyller lignende behov, har de noen få kritiske forskjeller som fundamentalt kan påvirke hvordan du bruker dem i koden din. Lær alt om flere forskjeller mellom pilfunksjoner og vanlige funksjoner.

1. Syntaksforskjeller

Syntaksen du velger når du utvikler JavaScript-funksjoner har stor innvirkning på hvor enkelt det er å lese og forstå koden din. Syntaksen til vanlige funksjoner og pilfunksjoner varierer betydelig, noe som påvirker hvordan du skriver og bruker dem.

JavaScript-pilfunksjoner bruke en mindre språkstruktur som er mer forståelig. Du kan bruke dem til å lage funksjoner ved å kombinere dem til et enkelt uttrykk eller setning.

konst legg til = (a, b) => a + b;

I dette eksemplet er

Legg til funksjonen aksepterer to innganger, en og b,og returnerer totalen deres. De => tegn definerer dette som en pilfunksjon.

På den annen side krever å definere en vanlig funksjon bruk av funksjon nøkkelord, med en mer detaljert syntaks, som vist i dette eksemplet:

funksjonLegg til(a, b) {
komme tilbake a + b;
}

I dette eksemplet er funksjon nøkkelord definerer en vanlig funksjon som også bruker krøllete tannregulering og komme tilbake uttalelse.

Vanlige funksjoner er mer nyttige for kompleks syntaks som krever flere setninger eller uttrykk. Derimot bruker pilfunksjoner en mer kortfattet syntaks som kan gjøre koden din enklere å lese og forstå.

2. Omfangsforskjeller

Begrepet "omfang" beskriver hvordan en funksjons interne variabler og funksjoner er tilgjengelige. I JavaScript definerer og får du tilgang til variabler og funksjoner gjennom koden din ved hjelp av scoping. Deres distinkte scoping kan ha stor innvirkning på hvordan du skriver og bruker JavaScript pil og vanlige funksjoner.

I scoping, hvordan pilfunksjoner håndterer dette nøkkelordet skiller seg betydelig fra hvordan vanlige funksjoner gjør. Vanlige funksjoner definerer dette søkeord selv; derfor kan den endres avhengig av konteksten du starter funksjonen i.

På den annen side, fordi de ikke spesifiserer dette nøkkelord, pilfunksjoner bruker det samme dette som det statiske omfanget rundt dem.

For å se forskjellen, sjekk ut følgende eksempel. La oss si at du har en person gjenstand med en Navn egenskap og en metode kalt siNavn() som logger personens navn ved hjelp av en vanlig funksjon:

konst person = {
 Navn: 'John,'
 siNavn: funksjon() {
konsoll.Logg(dette.Navn);
 }
};
person.siNavn(); // logger 'John'

Her er den vanlige sayName()-funksjonen en metode for personobjektet og dette nøkkelord i denne funksjonen refererer til det personen objektet.

La oss nå prøve det samme med en pilfunksjon:

konst person = {
 Navn: 'John',
 siNavn: () => {
konsoll.Logg(dette.Navn);
 }
};
person.siNavn(); // logger udefinert

Fordi pilfunksjonen som brukes i siNavn() metoden definerer ikke sin egen dette nøkkelord, bruker den dette av det statiske omfanget som omgir den. I dette tilfellet er det det globale omfanget av forekomsten.

Som et resultat, når du ringer person.sayName(), du får udefinert heller enn "John." Dette kan ha stor innvirkning på hvordan du skriver og bruker funksjoner i koden din.

3. Brukstilfeller og beste fremgangsmåter

Vanlige funksjoner egner seg bedre for funksjoner som krever sine egne dette nøkkelord, for eksempel metoder i et objekt.

Pilfunksjoner er bedre egnet for funksjonell programmering og tilbakeringinger som ikke krever dette nøkkelord.

4. Funksjonsbindingsforskjeller

Funksjonsbinding er begrepet som brukes for å beskrive forholdet mellom dette nøkkelord og funksjoner i koden din. Variasjonene i funksjonsbinding mellom pilfunksjoner og normale funksjoner kan ha stor innvirkning på hvordan du konstruerer og bruker pilfunksjoner.

Bruker dette nøkkelord gjør det unikt i vanlige funksjoner og assosieres med ulike objekter basert på metoden som brukes for å kalle funksjonen. Funksjonsbinding er et av de viktigste skillene mellom vanlige og pilfunksjoner.

Derimot har ikke pilfunksjoner dette nøkkelord; snarere får de det fra de omkringliggende skopene.

La oss se på et eksempel for å forstå mer om denne forskjellen. Anta at du har en person gjenstand med en Navn felt og en metode kalt siNavn() som bruker en vanlig funksjon for å registrere personens navn:

konst person = {
 Navn: 'John',
 siNavn: funksjon() {
konsoll.Logg(dette.Navn);
 }
};
konst en annenPerson = {
 Navn: 'Jane'
};
person.sayName.call (en annenPerson); // logger 'Jane'

I dette eksemplet kaller du personens objekt siNavn() metode med verdien en annen person bruker anrop() metode. På grunn av dette er siNavn() metode, dette, er nøkkelordet bundet til en annen person objekt, og det logger "Jane" heller enn "John."

La oss nå bruke det samme med en pilfunksjon:

konst person = {
 Navn: 'John',
 siNavn: () => {
konsoll.Logg(dette.Navn);
 }
};
konst en annenPerson = {
 Navn: 'Jane'
};
person.sayName.call (en annenPerson); // logger udefinert

Siden siNavn() teknikk har ikke sitt eget nøkkelord, du bruker en pilfunksjon i det i dette eksemplet. I dette tilfellet arver pilfunksjonen egenskapene til det omkringliggende omfanget, som er det globale omfanget.

Dette betyr at når du løper person.sayName.call (en annenPerson), pilfunksjonens dette nøkkelordet forblir det globale objektet, og udefinert tar plassen til Jane i loggen.

Hvis du trenger å binde en funksjon til en bestemt dette verdi, kan en ordinær funksjon være å foretrekke. Men hvis du ikke trenger å binde en funksjon til en bestemt dette verdi, kan en pilfunksjon være kortere og lettere å forstå.

5. Implisitt retur

Pilfunksjonen har en implisitt returfunksjon. Hvis funksjonskroppen består av ett enkelt uttrykk, returnerer funksjonene det uttrykket.

Som et eksempel:

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

Denne pilfunksjonen returnerer en dobbel fra en parameter. Du trenger ikke å bruke en eksplisitt komme tilbake nøkkelord fordi funksjonskroppen bare har ett uttrykk.

6. Kompatibilitetsforskjeller

Kompatibilitetsforskjeller refererer til ECMAScript 6-tillagte pilfunksjoner, som kanskje ikke fungerer med eldre nettlesere eller miljøer. På den annen side har vanlige funksjoner eksistert siden begynnelsen av JavaScript og støttes bredt.

Her er en illustrasjon av en pilfunksjon som kanskje ikke fungerer under mer etablerte forhold:

konst legg til = (a, b) => a + b;

Følgende er en sammenlignbar vanlig funksjon som burde fungere i de fleste situasjoner:

funksjonLegg til(a, b) {
komme tilbake a + b;
}

Bruk vanlige funksjoner i stedet for pilfunksjoner når du målretter mot eldre miljøer for å sikre kompatibilitet. Pilfunksjoner kan imidlertid gi en syntaks som er lettere å forstå og mer komprimert når du arbeider med moderne nettlesere og miljøer.

Velge mellom pilfunksjoner og vanlige funksjoner i JavaScript

I JavaScript har pil- og vanlige funksjoner distinkte funksjoner og applikasjoner. Pilfunksjoner har en enkel syntaks som arver dette nøkkelord fra konteksten av bruken deres, mens vanlige funksjoner er mer tilpasningsdyktige og kan håndtere mer komplekse situasjoner.

Det er viktig å vite hvordan de er forskjellige og hvordan du bruker dem i henhold til kodens krav. Når du velger hvilken type funksjon du skal bruke, bør du også vurdere kompatibilitetsforskjeller.

Til syvende og sist er JavaScripts pil og vanlige funksjoner kraftige verktøy som hjelper deg med å skrive renere og mer effektiv kode.