Naast de syntaxis zijn er nog meer verschillen tussen de twee.

Zoals bijna elke moderne programmeertaal, biedt JavaScript manieren om functies te creëren die herbruikbaarheid van code mogelijk maken. Voor degenen die niet bekend zijn met de taal, zijn er twee verschillende manieren om een ​​functie in JavaScript te declareren.

Oorspronkelijk, de functie trefwoord werd gebruikt en later werd de pijlsyntaxis gemaakt. Hoewel ze qua toegankelijkheid verschillen, leveren zowel het functietrefwoord als de pijlsyntaxis vergelijkbare resultaten op.

Het onvermogen om onderscheid te maken tussen de twee kan problemen veroorzaken en leiden tot onjuist gebruik. Het is een noodzaak voor de moderne JS-ontwikkelaar om te begrijpen hoe elke functiedeclaratie het bereik en de zichtbaarheid beïnvloedt.

Wat zijn de pijlfuncties van JavaScript?

De pijlfuncties van JavaScript zijn een alternatieve manier om functies te definiëren die de standaard niet gebruiken functie trefwoord:

functielogMessage(bericht) {
troosten.log (bericht);
}

const logMessage = (bericht) => {
troosten.log (bericht);
}

instagram viewer

const logMessage = bericht =>troosten.log (bericht);

Hierboven ziet u hetzelfde bericht op drie verschillende manieren geschreven. De eerste maakt gebruik van de reguliere functiedeclaratiemethode. De volgende twee tonen de twee manieren om de pijlfuncties van ES6 te gebruiken.

JavaScript nam voor het eerst de syntaxis van de pijlfunctie over met de release van de ECMAScript 2015-standaarden. Pijlfuncties boden een schone en beknopte manier om snel functies te creëren en een interessante oplossing voor verschillende langlopende bereikproblemen binnen JavaScript.

Deze functies maakten pijlfuncties al snel een hit bij veel ontwikkelaars. Programmeurs die een moderne JavaScript-codebase onderzoeken, vinden net zo goed pijlfuncties als gewone functies.

Hoe verschillen pijlfuncties van reguliere functies in JavaScript?

Op het eerste gezicht lijken pijlfuncties niet veel te verschillen van functies die zijn gedeclareerd met behulp van het trefwoord function. Buiten de syntaxis bevatten beide een herbruikbare reeks acties die ergens anders in de code kunnen worden aangeroepen.

Ondanks de overeenkomsten tussen de twee zijn er echter enkele verschillen waar ontwikkelaars zich bewust van moeten zijn.

Verschil in reikwijdte

Telkens wanneer een reguliere functie wordt gedeclareerd in JavaScript, is dat functie werkt als een afsluiting die zijn eigen bereik creëert. Dit kan een probleem veroorzaken bij het gebruik van bepaalde gespecialiseerde functies zoals setTimeout En setInterval.

Voorafgaand aan ES6 waren er een aanzienlijk aantal tijdelijke oplossingen die items naar een hoger bereik zouden tillen voor gebruik in callbacks. Deze hacks werkten, maar waren vaak moeilijk te begrijpen en konden problemen veroorzaken doordat bepaalde variabelen werden overschreven.

Pijlfuncties hebben beide problemen op een eenvoudige en elegante manier opgelost. Wanneer een pijlfunctie wordt gebruikt als onderdeel van een callback, heeft deze toegang tot hetzelfde bereik als de functie van waaruit deze is aangeroepen.

Hierdoor konden functies worden gebruikt als callbacks zonder de toegang te verliezen tot de context waarin de oorspronkelijke gebeurtenis werd aangeroepen. Als een eenvoudige test om dit principe in actie te laten zien, kunt u een functie voor vertraagde berichten instellen, zoals hieronder:

functievertraagd bericht(bericht, vertraging) {

setTimeout(functie(bericht) {
troosten.log (bericht);
}, vertraging);

}

vertraagd bericht("Hallo Wereld", 1000);

De functie is eenvoudig, accepterend bericht En vertraging in milliseconden. Nadat de vertraging is verstreken, moet het bericht naar de console worden gelogd. Wanneer de code echter wordt uitgevoerd, ongedefinieerd wordt aangemeld bij de console in plaats van het bericht dat is doorgegeven.

Wanneer de callback-functie wordt uitgevoerd, verandert het bereik en is het oorspronkelijke bericht niet meer toegankelijk. Het gebruik van het bericht vanuit de afsluiting vereist dat het bericht naar een globale variabele wordt gehesen, wat ertoe kan leiden dat het wordt overschreven voordat het wordt teruggebeld.

Een pijlfunctie is een goede oplossing voor dit probleem. Als u het eerste argument vervangt door setTimeout, kan het bereik worden gehandhaafd en heeft de functie toegang tot het bericht waaraan wordt doorgegeven vertraagd bericht.

functievertraagd bericht(bericht, vertraging) {

setTimeout(() => {
troosten.log (bericht);
}, vertraging);

}

vertraagd bericht("Hallo Wereld", 1000);

Nu, wanneer uitgevoerd, de vertraagd bericht functie logt het bericht. Bovendien kunnen hierdoor meerdere berichten in de wachtrij worden geplaatst met verschillende vertragingen, en ze zullen allemaal nog steeds op het juiste moment verschijnen.

Dit is te wijten aan het feit dat elke keer vertraagd bericht wordt gebruikt, genereert het zijn eigen bereik met zijn eigen kopie van de interne pijlfunctie.

Codeleesbaarheid

Hoewel pijlfuncties nuttig zijn als callbacks, worden ze ook gebruikt om code schoon en beknopt te houden. In het bovenstaande gedeelte kunt u zien dat het gebruik van een pijlfunctie het direct duidelijk maakt wat er zal gebeuren wanneer de vertraagd bericht functie wordt genoemd.

Naarmate functies complexer worden, kan een beetje duidelijkheid de code veel leesbaarder maken. Bij het samenstellen van objecten kan dit code eenvoudiger maken bij het toevoegen van korte functies:

klasbalie{
_count = 0;
verhoging = () => {
dit._count += 1;
}
verlagen = () => {
dit._count -= 1;
}
tel = () => {
opbrengstdit._graaf;
}
}

laten ct= nieuw balie();

Rol in objectgeoriënteerd programmeren

Hoewel de pijlfuncties van JavaScript een integraal onderdeel zijn van functioneel programmeren, hebben ze ook een plaats in object georiënteerd programmeren. Pijlfuncties kunnen worden gebruikt binnen klassedeclaraties:

klasorderLineItem{
_LineItemID = 0;
_Product = {};
_Aantal = 1;

constructeur(Product) {
dit._LineItemID = crypto.randomUUID();
dit._Product = product
}

changeLineItemQuantity = (nieuwAantal) => {
dit._Qty = nieuweQty;
}
}

Het gebruik van een pijlfunctie om methoden te declareren binnen een klassedeclaratie verandert niets aan het gedrag van de functie binnen de klasse. Buiten de klasse wordt de functie echter wel weergegeven, zodat deze door andere klassen kan worden gebruikt.

Reguliere functies zijn niet toegankelijk buiten de klassedeclaratie zonder te worden aangeroepen. Dit betekent dat hoewel andere klassendeclaraties deze functies kunnen erven, ze niet rechtstreeks toegankelijk zijn om andere klassen samen te stellen.

Wanneer moet u de pijlfuncties van JavaScript gebruiken?

De pijlfuncties van JavaScript zijn een ongelooflijk krachtige functie die ontwikkelaars veel meer controle geeft over het bereik waartoe een functie toegang heeft. Als een ontwikkelaar weet wanneer een callback toegang moet hebben tot het bereik van zijn ouder en wanneer niet, kan een ontwikkelaar bepalen welk type declaratie hij moet gebruiken.

Pijlfuncties geven programmeurs een duidelijke en beknopte manier om callbacks te schrijven zonder delen van de scope bloot te leggen die verborgen zouden moeten zijn. Ze maken het ook mogelijk om schone en eenvoudige composities te maken, waardoor functioneel programmeren in JavaScript verder mogelijk wordt.

JS-ontwikkelaars moeten zich bewust zijn van de verschillen tussen de twee syntaxis en zich bewust zijn van welke syntaxis geschikt is bij het declareren van hun functies.