6 különbség a JavaScript nyílfüggvényei és reguláris függvényei között

A függvények a JavaScript elengedhetetlen részei, amelyeket újrafelhasználható kód írásához kell használni. A függvények két fő típusa a szabályos és a nyílfüggvény, és sokféleképpen lehet meghatározni őket.

Annak ellenére, hogy hasonló igényeket elégítenek ki, van néhány kritikus különbségük, amelyek alapvetően befolyásolhatják, hogyan használja őket a kódban. Tudjon meg mindent a nyílfüggvények és a normál függvények közötti különbségekről.

1. Szintaxis különbségek

A JavaScript-függvények fejlesztése során választott szintaxis nagy hatással van arra, hogy mennyire egyszerű a kód olvasása és megértése. A normál és a nyíl függvények szintaxisa jelentősen eltér, ami befolyásolja az írási és használati módokat.

JavaScript nyíl függvények kisebb, érthetőbb nyelvi szerkezetet használjon. Használhatja függvények létrehozására, ha egyetlen kifejezésben vagy utasításban egyesíti őket.

const add = (a, b) => a + b;

Ebben a példában a

add hozzá a funkció két bemenetet fogad, a és b, és visszaadja a teljes összeget. A => jel ezt nyílfüggvényként határozza meg.

Másrészt egy szabályos függvény definiálásához a funkció kulcsszó, részletesebb szintaxissal, amint az ebben a példában látható:

funkcióadd hozzá(a, b) {
Visszatérés a + b;
}

Ebben a példában a funkció kulcsszó egy szabályos függvényt definiál, amely göndör kapcsos zárójeleket és a Visszatérés nyilatkozat.

A reguláris függvények hasznosabbak összetett szintaxis esetén, amely több utasítást vagy kifejezést igényel. Ezzel szemben a nyílfüggvények tömörebb szintaxist használnak, amely megkönnyíti a kód olvashatóságát és megértését.

2. Hatásköri különbségek

A „hatókör” kifejezés azt írja le, hogy egy függvény belső változói és függvényei hogyan érhetők el. A JavaScriptben hatókör segítségével határozhatja meg és érheti el a kódjában szereplő változókat és függvényeket. Különlegességük a hatókör jelentősen befolyásolhatja a JavaScript írását és használatát nyíl és szabályos függvények.

A hatókör meghatározásakor hogyan kezelik a nyílfüggvények a ez kulcsszó jelentősen eltér a normál funkcióktól. A reguláris függvények határozzák meg a ez maguk a kulcsszavak; ezért változhat attól függően, hogy milyen kontextusban hívja meg a függvényt.

Másrészt, mert nem határozzák meg a ez kulcsszó, nyíl függvények ugyanazt használják ez mint az őket körülvevő statikus kör.

A különbség megtekintéséhez nézze meg a következő példát. Tegyük fel, hogy van egy személy tárgyat a név tulajdonság és az úgynevezett metódus monddName() amely egy normál függvény segítségével naplózza a személy nevét:

const személy = {
 név: 'János,'
 monddName: funkció() {
konzol.log(ez.név);
 }
};
person.sayName(); // naplózza "John"

Itt a szokásos sayName() függvény a személy objektum és a ez a függvényen belüli kulcsszó az adott személy objektumra utal.

Most próbáljuk meg ugyanezt egy nyílfüggvénnyel:

const személy = {
 név: 'János',
 monddName: () => {
konzol.log(ez.név);
 }
};
person.sayName(); // naplók undefined

Mivel a nyíl függvény a monddName() módszer nem határozza meg a sajátját ez kulcsszót használja, a ez az őt körülvevő statikus hatókörről. Ebben az esetben ez a példány globális hatóköre.

Ennek eredményeként, amikor hív person.sayName(), kapsz határozatlan inkább mint "János." Ez jelentősen befolyásolhatja azt, hogyan ír és hogyan használ függvényeket a kódban.

3. Használati esetek és bevált gyakorlatok

A normál funkciók jobban megfelelnek a sajátjukat igénylő funkcióknak ez kulcsszó, például metódusok egy objektumban.

A nyíl funkciók alkalmasabbak erre funkcionális programozás és visszahívások, amelyek nem igényelnek ez kulcsszó.

4. Funkciókötési különbségek

A függvénykötés a közötti kapcsolat leírására használt kifejezés ez kulcsszót és függvényeket a kódban. A nyílfüggvények és a normál függvények közötti függvény-összerendelés eltérései erősen befolyásolhatják a nyílfüggvények létrehozását és használatát.

Használni a ez A kulcsszó egyedivé teszi a szokványos függvényekben, és a függvény meghívásának módszere alapján különféle objektumokhoz kapcsolódik. A függvénykötés az egyik legfontosabb különbségtétel a szabályos és a nyílfüggvények között.

Ezzel szemben a nyílfüggvények nem rendelkeznek ez kulcsszó; hanem a környező távcsövekből kapják.

Nézzünk egy példát, hogy jobban megértsük ezt a különbséget. Tegyük fel, hogy van a személy tárgyat a név mezőt és egy ún monddName() amely egy normál függvényt használ a személy nevének rögzítésére:

const személy = {
 név: 'János',
 monddName: funkció() {
konzol.log(ez.név);
 }
};
const otherPerson = {
 név: "Jane"
};
person.sayName.call (egy másik személy); // naplózza "Jane"

Ebben a példában a személy objektumot hívja meg monddName() módszer az értékkel egy másik személy használni a hívás() módszer. Emiatt a monddName() módszer, ez, a kulcsszó a egy másik személy objektum, és naplózza "Jane" inkább mint "János."

Használjuk most ugyanezt egy nyílfüggvénnyel:

const személy = {
 név: 'János',
 monddName: () => {
konzol.log(ez.név);
 }
};
const otherPerson = {
 név: "Jane"
};
person.sayName.call (egy másik személy); // naplók undefined

Mivel a monddName() technikának nincs saját kulcsszava, ebben a példában egy nyíl függvényt használsz. Ebben az esetben a nyíl függvény örökli a környező hatókör tulajdonságait, ami a globális hatókör.

Ez azt jelenti, hogy amikor futsz person.sayName.call (egy másik személy), a nyíl függvény ez kulcsszó továbbra is a globális objektum, és határozatlan helyét veszi át Jane a naplóban.

Ha egy függvényt egy adotthoz kell kötni ez érték, egy közönséges függvény előnyösebb lehet. Ha azonban nem kell egy függvényt konkréthoz kötni ez érték esetén a nyílfüggvény rövidebb és könnyebben érthető lehet.

5. Implicit Return

A nyíl függvénynek van implicit visszatérési funkciója. Ha a függvénytörzs egyetlen kifejezésből áll, a függvények ezt a kifejezést adják vissza.

Mint például:

const dupla = (x) => x * 2;

Ez a nyílfüggvény egy paraméter dupláját adja vissza. Nem szükséges kifejezett kifejezést használnia Visszatérés kulcsszó, mert a függvénytörzsnek csak egy kifejezése van.

6. Kompatibilitási különbségek

A kompatibilitási különbségek az ECMAScript 6 hozzáadott nyílfunkcióira utalnak, amelyek nem biztos, hogy működnek régebbi böngészőkkel vagy környezetekkel. Másrészt a normál funkciók a JavaScript kezdete óta léteznek, és széles körben támogatottak.

Íme egy nyílfüggvény illusztrációja, amely nem biztos, hogy működik jobban bevált körülmények között:

const add = (a, b) => a + b;

A következő egy összehasonlítható szabályos függvény, amelynek a legtöbb helyzetben működnie kell:

funkcióadd hozzá(a, b) {
Visszatérés a + b;
}

Ha régebbi környezeteket céloz meg, a kompatibilitás biztosítása érdekében használjon normál függvényeket a nyíl függvények helyett. A nyílfüggvények azonban könnyebben érthető és tömörebb szintaxist biztosíthatnak, ha modern böngészőkkel és környezetekkel dolgozik.

Választás a nyílfüggvények és a reguláris függvények között a JavaScriptben

A JavaScriptben a nyíl és a reguláris függvények külön jellemzőkkel és alkalmazásokkal rendelkeznek. A nyílfüggvények szintaxisa egyszerű, öröklődik ez kulcsszó kifejezés használatuk kontextusából, míg a normál függvények jobban alkalmazkodnak, és bonyolultabb helyzeteket is képesek kezelni.

Nagyon fontos tudni, hogy miben különböznek egymástól, és hogyan kell használni őket a kód követelményei szerint. A használni kívánt funkció kiválasztásakor vegye figyelembe a kompatibilitási különbségeket is.

Végső soron a JavaScript nyila és a normál függvények hatékony eszközök, amelyek segítségével tisztább és hatékonyabb kódokat írhat.