Pilfunktionerna är mer kompakta, men visste du att det finns en mängd andra skillnader de introducerar?
Funktioner är en viktig del av JavaScript som du behöver använda för att skriva återanvändbar kod. De två huvudtyperna av funktioner är vanliga funktioner och pilfunktioner, och det finns många sätt att definiera dem.
Även om de fyller liknande behov, har de några kritiska skillnader som i grunden kan påverka hur du använder dem i din kod. Lär dig allt om flera skillnader mellan pilfunktioner och vanliga funktioner.
1. Syntaxskillnader
Syntaxen du väljer när du utvecklar JavaScript-funktioner har stor inverkan på hur enkelt det är att läsa och förstå din kod. Syntaxen för vanliga funktioner och pilfunktioner skiljer sig avsevärt, vilket påverkar hur du skriver och använder dem.
JavaScript-pilfunktioner använda en mindre språkstruktur som är mer begriplig. Du kan använda dem för att skapa funktioner genom att kombinera dem till ett enda uttryck eller uttalande.
konst lägg till = (a, b) => a + b;I det här exemplet är Lägg till funktionen accepterar två ingångar, a och b,och returnerar deras totala summa. De => tecken definierar detta som en pilfunktion.
Å andra sidan, för att definiera en vanlig funktion kräver användningen av fungera nyckelord, med en mer utförlig syntax, som visas i det här exemplet:
fungeraLägg till(a, b) {
lämna tillbaka a + b;
}I det här exemplet är fungera nyckelordet definierar en vanlig funktion som också använder lockiga hängslen och lämna tillbaka påstående.
Reguljära funktioner är mer användbara för komplex syntax som kräver flera satser eller uttryck. Däremot använder pilfunktioner en mer koncis syntax som kan göra din kod lättare att läsa och förstå.
2. Omfattningsskillnader
Termen "omfattning" beskriver hur en funktions interna variabler och funktioner är tillgängliga. I JavaScript definierar och får du tillgång till variabler och funktioner i hela din kod med hjälp av omfattning. Deras distinkta scoping kan avsevärt påverka hur du skriver och använder JavaScript pil och vanliga funktioner.
I scoping, hur pilfunktioner hanterar detta nyckelord skiljer sig avsevärt från hur vanliga funktioner gör. Vanliga funktioner definierar detta sökord själva; därför kan det ändras beroende på i vilket sammanhang du anropar funktionen.
Å andra sidan, eftersom de inte anger detta nyckelord, pilfunktioner använder samma detta som det statiska omfånget som omger dem.
För att se skillnaden, kolla in följande exempel. Låt oss säga att du har en person föremål med en namn egenskap och en metod som kallas sayName() som loggar personens namn med en vanlig funktion:
konst person = {
namn: "John,"säg Namn: fungera() {
trösta.logga(detta.namn);
}
};
person.sayName(); // loggar "John"
Här är den vanliga sayName()-funktionen en metod för personobjektet och detta nyckelord i den funktionen hänvisar till det personobjektet.
Låt oss nu prova samma sak med en pilfunktion:
konst person = {
namn: 'John',säg Namn: () => {
trösta.logga(detta.namn);
}
};
person.sayName(); // loggar odefinierade
Eftersom pilfunktionen som används i sayName() Metoden definierar inte sin egen detta nyckelordet använder den detta av det statiska omfånget som omger den. I det här fallet är det instansens globala omfattning.
Som ett resultat, när du ringer person.sayName(), du får odefinierad hellre än "John." Detta kan avsevärt påverka hur du skriver och använder funktioner i din kod.
3. Användningsfall och bästa praxis
Vanliga funktioner lämpar sig bättre för funktioner som kräver sina egna detta nyckelord, såsom metoder i ett objekt.
Pilfunktioner är bättre lämpade för funktionell programmering och återuppringningar som inte kräver detta nyckelord.
4. Funktionsbindningsskillnader
Funktionsbindning är den term som används för att beskriva förhållandet mellan detta nyckelord och funktioner i din kod. Variationerna i funktionsbindning mellan pilfunktioner och normala funktioner kan starkt påverka hur du konstruerar och använder pilfunktioner.
Använda detta nyckelordet gör det unikt i vanliga funktioner och associerar med olika objekt baserat på den metod som används för att anropa funktionen. Funktionsbindning är en av de viktigaste distinktionerna mellan vanliga och pilfunktioner.
Däremot har inte pilfunktioner detta nyckelord; snarare får de det från de omgivande scopen.
Låt oss titta på ett exempel för att förstå mer om denna skillnad. Antag att du har en person föremål med en namn fält och en metod som kallas sayName() som använder en vanlig funktion för att registrera personens namn:
konst person = {
namn: 'John',säg Namn: fungera() {
trösta.logga(detta.namn);
}
};konst anotherPerson = {
namn: "Jane"
};
person.sayName.call (annanPerson); // loggar "Jane"
I det här exemplet anropar du personens objekt sayName() metod med värdet en annan person använda ring upp() metod. På grund av detta har sayName() metod, detta, är nyckelordet bundet till en annan person objekt, och det loggar "Jane" hellre än "John."
Låt oss nu använda samma sak med en pilfunktion:
konst person = {
namn: 'John',säg Namn: () => {
trösta.logga(detta.namn);
}
};konst anotherPerson = {
namn: "Jane"
};
person.sayName.call (annanPerson); // loggar odefinierade
Sedan sayName() tekniken har inte ett eget nyckelord, du använder en pilfunktion i det i det här exemplet. I det här fallet ärver pilfunktionen egenskaperna hos det omgivande skopet, vilket är det globala räckviddet.
Det betyder att när du springer person.sayName.call (annanPerson), pilfunktionens detta nyckelordet förblir det globala objektet, och odefinierad tar platsen för Jane i loggen.
Om du behöver binda en funktion till en specifik detta värde kan en vanlig funktion vara att föredra. Men om du inte behöver binda en funktion till en specifik detta värde kan en pilfunktion vara kortare och lättare att förstå.
5. Implicit retur
Pilfunktionen har en implicit returfunktion. Om funktionskroppen består av ett enda uttryck returnerar funktionerna det uttrycket.
Som ett exempel:
konst dubbel = (x) => x * 2;Denna pilfunktion returnerar en dubbel från en parameter. Du behöver inte använda en explicit lämna tillbaka nyckelord eftersom funktionskroppen bara har ett uttryck.
6. Kompatibilitetsskillnader
Skillnader i kompatibilitet hänvisar till de ECMAScript 6-tillagda pilfunktionerna, som kanske inte fungerar med äldre webbläsare eller miljöer. Å andra sidan har vanliga funktioner funnits sedan början av JavaScript och stöds brett.
Här är en illustration av en pilfunktion som kanske inte fungerar under mer etablerade förhållanden:
konst lägg till = (a, b) => a + b;Följande är en jämförbar vanlig funktion som borde fungera i de flesta situationer:
fungeraLägg till(a, b) {
lämna tillbaka a + b;
}Använd vanliga funktioner snarare än pilfunktioner när du riktar in dig på äldre miljöer för att säkerställa kompatibilitet. Däremot kan pilfunktioner ge en syntax som är lättare att förstå och mer förtätad när man arbetar med moderna webbläsare och miljöer.
Välja mellan pilfunktioner och vanliga funktioner i JavaScript
I JavaScript har pil- och vanliga funktioner distinkta funktioner och applikationer. Pilfunktioner har en enkel syntax, ärvning detta nyckelord från sammanhanget för deras användning medan vanliga funktioner är mer anpassningsbara och kan hantera mer komplexa situationer.
Det är viktigt att veta hur de skiljer sig och hur man använder dem enligt kodens krav. När du väljer vilken typ av funktion som ska användas bör du också överväga kompatibilitetsskillnader.
I slutändan är JavaScripts pil och vanliga funktioner kraftfulla verktyg som hjälper dig att skriva renare och effektivare kod.