A szintaxison kívül további különbségek is vannak a kettő között.
Mint szinte minden modern programozási nyelv, a JavaScript is kínál olyan funkciók létrehozását, amelyek lehetővé teszik a kód újrafelhasználását. Azok számára, akik nem ismerik a nyelvet, kétféle módon deklarálhatnak egy függvényt JavaScriptben.
Eredetileg a funkció kulcsszót használták, majd később létrehozták a nyíl szintaxisát. Bár a hatókör hozzáférhetősége eltérő, a függvény kulcsszó és a nyíl szintaxisa is hasonló eredményeket hoz létre.
A kettő közötti különbségtétel képtelensége problémákat okozhat, és helytelen használathoz vezethet. A modern JS fejlesztő számára elengedhetetlen, hogy megértse, hogyan befolyásolják az egyes függvények deklarációi a hatókört és a láthatóságot.
Mik a JavaScript nyíl funkciói?
A JavaScript nyíl funkciói alternatív módja az alapértelmezettet nem használó függvények meghatározásának funkció kulcsszó:
funkciólogMessage(üzenet) {
konzol.log (üzenet);
}const logMessage = (üzenet) => {
konzol.log (üzenet);
}
const logMessage = üzenet =>konzol.log (üzenet);
Fent ugyanazt az üzenetet láthatja három különböző módon megírva. Az első a normál függvény deklarációs módszert használja. A következő kettő az ES6 nyílfunkcióinak használatának két módját mutatja be.
A JavaScript először az ECMAScript 2015 szabvány kiadásával vette át a nyíl függvény szintaxisát. Az Arrow függvények letisztult és tömör módot kínáltak a függvények gyors létrehozására, és érdekes megoldást kínáltak számos, régóta fennálló hatókör-problémára a JavaScripten belül.
Ezek a funkciók gyorsan sikeressé tették a nyílfunkciókat sok fejlesztő körében. Azok a programozók, akik egy modern JavaScript kódbázist keresnek, ugyanolyan valószínű, hogy nyílfüggvényeket találnak, mint a hagyományos függvényeket.
Miben különböznek a nyílfüggvények a JavaScript normál függvényeitől?
Első pillantásra úgy tűnik, hogy a nyílfüggvények nem sokban különböznek a függvény kulcsszóval deklarált függvényektől. A szintaxison kívül mindkettő egy újrafelhasználható műveletkészletet foglal magában, amelyek a kód más helyeiről hívhatók meg.
A kettő közötti hasonlóságok ellenére azonban van néhány különbség, amellyel a fejlesztőknek tisztában kell lenniük.
Különbség a hatókörben
Amikor egy szabályos függvény deklarálva van JavaScriptben, az funkció zárásként működik, amely létrehozza a saját hatókörét. Ez problémákat okozhat bizonyos speciális funkciók használatakor, mint pl setTimeout és setInterval.
Az ES6 előtt jelentős számú megkerülő megoldás létezett, amelyek az elemeket magasabb hatókörbe emelték a visszahívásokhoz. Ezek a feltörések működtek, de gyakran nehezen érthetők voltak, és problémákat okozhattak bizonyos változók felülírásával.
A nyílfüggvények mindkét problémát egyszerű és elegáns módon oldották meg. Ha egy nyílfüggvényt a visszahívás részeként használnak, akkor ugyanahhoz a hatókörhöz fér hozzá, mint annak a függvénynek, amelyből meghívták.
Ez lehetővé tette a függvények visszahívásként történő használatát anélkül, hogy elveszítették volna a hozzáférést ahhoz a kontextushoz, amelyben az eredeti eseményt meghívták. Ennek az alapelvnek a működésének bemutatására szolgáló egyszerű tesztként beállíthat egy késleltetett üzenetküldési funkciót, mint például az alábbi:
funkciókésleltetett üzenet(üzenet, késleltetés) {
setTimeout(funkció(üzenet) {
konzol.log (üzenet);
}, késés);}
késleltetett üzenet("Helló Világ", 1000);
A funkció egyszerű, elfogadó üzenet és késleltetés ezredmásodpercben. A késleltetés lejárta után naplózza az üzenetet a konzolra. Amikor azonban a kód végrehajtódik, határozatlan A rendszer bejelentkezik a konzolra az átadott üzenet helyett.
A visszahívási funkció végrehajtásakor a hatókör megváltozik, és az eredeti üzenet már nem érhető el. Az üzenet lezáráson belüli használata megköveteli, hogy az üzenetet egy globális változóba emeljék, ami azt eredményezheti, hogy a visszahívás előtt felülírható.
Egy nyíl funkció megfelelő megoldás erre a problémára. Ha lecseréli az első argumentumot arra setTimeout, a hatókör fenntartható, és a funkció hozzáfér a címzett üzenethez késleltetett üzenet.
funkciókésleltetett üzenet(üzenet, késleltetés) {
setTimeout(() => {
konzol.log (üzenet);
}, késés);}
késleltetett üzenet("Helló Világ", 1000);
Most, amikor végrehajtották, a késleltetett üzenet funkció naplózza az üzenetet. Ezenkívül ez lehetővé teszi több üzenet sorba állítását különböző késleltetésekkel, és mindegyik a megfelelő időben fog megjelenni.
Ez annak a ténynek köszönhető, hogy minden alkalommal késleltetett üzenet használják, saját hatókört generál a belső nyíl függvény saját másolatával.
Kód olvashatóság
Bár a nyíl függvények hasznosak visszahívásként, a kód tiszta és tömör megőrzésére is szolgálnak. A fenti részben láthatja, hogy a nyílfüggvény használatával nyilvánvalóvá válik, hogy mi fog történni, ha a késleltetett üzenet függvényt hívják.
Ahogy a funkciók összetettebbé válnak, egy kis áttekinthetőséggel a kód sokkal olvashatóbbá válik. Objektumok összeállításakor ez egyszerűbbé teheti a kódot rövid függvények hozzáadásakor:
osztályszámláló{
_count = 0;
növekmény = () => {
ez._count += 1;
}
csökkenés = () => {
ez._count -= 1;
}
szám = () => {
Visszatérésez._számol;
}
}
hagyja ct = új számláló();
Szerep az objektum-orientált programozásban
Bár a JavaScript nyílfüggvényei a funkcionális programozás szerves részét képezik, helyük van objektumorientált programozás. A nyílfüggvények használhatók az osztálydeklarációkban:
osztályorderLineItem{
_LineItemID = 0;
_Termék = {};
_mennyiség = 1;konstruktőr(termék) {
ez._LineItemID = crypto.randomUUID();
ez._Termék = termék
}
changeLineItemQuantity = (newQty) => {
ez._Qty = newQty;
}
}
Egy nyílfüggvény használata metódusok deklarálására az osztálydeklaráción belül nem változtatja meg a függvény viselkedését az osztályon belül. Az osztályon kívül azonban felfedi a függvényt, lehetővé téve, hogy más osztályok is használják.
A reguláris függvények nem érhetők el az osztálydeklaráción kívül hívás nélkül. Ez azt jelenti, hogy míg más osztálydeklarációk örökölhetik ezeket a függvényeket, nem érhetők el közvetlenül más osztályok összeállításához.
Mikor érdemes használni a JavaScript nyílfüggvényeit?
A JavaScript nyílfüggvényei egy hihetetlenül hatékony funkció, amellyel a fejlesztők sokkal jobban szabályozhatják, hogy egy függvény milyen hatókörhöz férhet hozzá. Ha tudja, hogy a visszahívásnak mikor kell hozzáférnie a szülő hatóköréhez, és mikor nem, segíthet a fejlesztőnek eldönteni, hogy milyen típusú deklarációt kell használnia.
A nyílfüggvények világos és tömör módot adnak a programozóknak a visszahívások írására anélkül, hogy felfednék a hatókör elrejtendő részeit. Lehetővé teszik tiszta és egyszerű kompozíciók létrehozását is, lehetővé téve a funkcionális programozást JavaScriptben.
A JS-fejlesztőknek tisztában kell lenniük a két szintaxis közötti különbségekkel, és ügyelniük kell arra, hogy funkcióik deklarálásakor melyik szintaxis a megfelelő.
