Det finns ytterligare skillnader mellan de två förutom syntaxen.

Som nästan alla moderna programmeringsspråk erbjuder JavaScript sätt att skapa funktioner för att möjliggöra återanvändning av kod. För den som inte är bekant med språket finns det två olika sätt att deklarera en funktion i JavaScript.

Ursprungligen fungera nyckelordet användes och senare skapades pilsyntaxen. Även om de skiljer sig åt vad gäller tillgänglighet skapar både funktionsnyckelordet och pilsyntaxen liknande resultat.

Oförmågan att skilja mellan de två kan orsaka problem och leda till felaktig användning. Det är en nödvändighet för den moderna JS-utvecklaren att förstå hur varje funktionsdeklaration påverkar omfattning och synlighet.

Vad är JavaScripts pilfunktioner?

JavaScripts pilfunktioner är ett alternativt sätt att definiera funktioner som inte använder standard fungera nyckelord:

fungeralogMessage(meddelande) {
trösta.log (meddelande);
}
konst logMessage = (meddelande) => {
trösta.log (meddelande);
}
konst logMessage = meddelande =>trösta.log (meddelande);
instagram viewer

Ovan kan du se samma meddelande skrivet på tre olika sätt. Den första använder den vanliga funktionsdeklarationsmetoden. De följande två visar de två sätten att använda ES6:s pilfunktioner.

JavaScript antog först pilfunktionssyntaxen med lanseringen av ECMAScript 2015-standarderna. Arrow-funktioner erbjöd ett rent och koncist sätt att snabbt skapa funktioner och en intressant lösning på flera långvariga scope-problem inom JavaScript.

Dessa funktioner gjorde snabbt pilfunktioner till en hit bland många utvecklare. Programmerare som tittar på en modern JavaScript-kodbas är lika benägna att hitta pilfunktioner som vanliga funktioner.

Hur skiljer sig pilfunktioner från vanliga funktioner i JavaScript?

Vid första anblicken verkar pilfunktioner inte skilja sig mycket från funktioner som deklareras med funktionsnyckelordet. Utanför syntaxen kapslar båda in en återanvändbar uppsättning åtgärder som kan anropas från någon annanstans i koden.

Trots likheterna mellan de två finns det dock vissa skillnader som utvecklare måste vara medvetna om.

Skillnad i omfattning

Närhelst en vanlig funktion deklareras i JavaScript, det funktion fungerar som en stängning som skapar sin egen räckvidd. Detta kan orsaka problem när du använder vissa specialiserade funktioner som setTimeout och setInterval.

Före ES6 fanns det ett betydande antal lösningar som skulle lyfta föremål till högre nivåer för användning i callbacks. Dessa hack fungerade, men de var ofta svåra att förstå och kunde orsaka problem med att vissa variabler skrevs över.

Pilfunktioner löste båda problemen på ett enkelt och elegant sätt. När en pilfunktion används som en del av en återuppringning har den åtkomst till samma omfång som funktionen från vilken den anropades.

Detta gjorde det möjligt för funktioner att användas som återuppringningar utan att förlora åtkomst till sammanhanget där den ursprungliga händelsen anropades. Som ett enkelt test för att visa denna princip i praktiken kan du ställa in en fördröjd meddelandefunktion som den nedan:

fungeradelayedMessage(meddelande, fördröjning) {

 setTimeout(fungera(meddelande) {
trösta.log (meddelande);
 }, fördröjning);
}
delayedMessage("Hej världen", 1000);

Funktionen är enkel, accepterande meddelande och dröjsmål i millisekunder. När fördröjningen har passerat bör den logga meddelandet till konsolen. Men när koden exekveras, odefinierad kommer att loggas till konsolen istället för meddelandet som skickades in.

När återuppringningsfunktionen exekveras ändras omfattningen och det ursprungliga meddelandet är inte längre tillgängligt. Att använda meddelandet inifrån stängningen kräver att meddelandet hissas till en global variabel, vilket kan resultera i att det skrivs över innan återuppringningen.

En pilfunktion är en korrekt lösning för detta problem. Om du ersätter det första argumentet för setTimeout, omfattningen kan bibehållas och funktionen kommer att ha tillgång till meddelandet som skickas till delayedMessage.

fungeradelayedMessage(meddelande, fördröjning) {

 setTimeout(() => {
trösta.log (meddelande);
 }, fördröjning);
}
delayedMessage("Hej världen", 1000);

Nu, när den avrättades, delayedMessage funktionen loggar meddelandet. Dessutom gör detta att flera meddelanden kan ställas i kö med olika fördröjningar, och de kommer alla fortfarande att inträffa vid rätt tidpunkt.

Detta beror på det faktum att varje gång delayedMessage används, genererar den ett eget scope med en egen kopia av den interna pilfunktionen.

Kodläsbarhet

Medan pilfunktioner är användbara som återuppringningar, används de också för att hålla koden ren och koncis. I avsnittet ovan kan du se att användning av en pilfunktion gör det lätt uppenbart vad som kommer att hända när delayedMessage funktionen kallas.

När funktionerna blir mer komplexa kan lite tydlighet göra koden mycket mer läsbar. När du komponerar objekt kan detta göra koden enklare när du lägger till korta funktioner:

klassdisken{
 _count = 0;
 ökning = () => {
detta._count += 1;
 }
 minska = () => {
detta._count -= 1;
 }
 räkna = () => {
lämna tillbakadetta._räkna;
 }
}
låta ct = ny disken();

Roll i objektorienterad programmering

Även om JavaScripts pilfunktioner är en integrerad del av funktionell programmering, har de också en plats i objektorienterad programmering. Pilfunktioner kan användas i klassdeklarationer:

klassorderLadItem{
 _LineItemID = 0;
 _Produkt = {};
 _Antal = 1;
konstruktör(produkt) {
detta._LineItemID = crypto.randomUUID();
detta._Produkt = produkt
 }
 changeLineItemQuantity = (nyAntal) => {
detta._Antal = nyAntal;
 }
}

Att använda en pilfunktion för att deklarera metoder i en klassdeklaration ändrar inte funktionens beteende inom klassen. Utanför klassen exponerar den dock funktionen, vilket gör att den kan användas av andra klasser.

Reguljära funktioner kan inte nås utanför klassdeklarationen utan att anropas. Detta innebär att medan andra klassdeklarationer kan ärva dessa funktioner, kan de inte nås direkt för att skapa andra klasser.

När ska du använda JavaScripts pilfunktioner?

JavaScripts pilfunktioner är en otroligt kraftfull funktion som ger utvecklare mycket mer kontroll över vilken omfattning en funktion har tillgång till. Att veta när en återuppringning ska ha tillgång till sin överordnade omfattning, och när den inte borde, kan hjälpa en utvecklare att avgöra vilken typ av deklaration som ska användas.

Pilfunktioner ger programmerare ett tydligt och kortfattat sätt att skriva återuppringningar utan att exponera delar av räckvidden som bör döljas. De möjliggör också skapandet av rena och enkla kompositioner, vilket ytterligare möjliggör funktionell programmering i JavaScript.

JS-utvecklare måste vara medvetna om skillnaderna mellan de två syntaxerna och vara uppmärksamma på vilken syntax som är lämplig när de deklarerar deras funktioner.