Nyílfunkciók használata a JavaScriptben – CloudSavvy IT

A nyílfüggvény a JavaScript-ben egy hagyományos alternatívája a hagyományos függvénynek. A szintaxis lehetővé teszi az inline névtelen függvények gyors létrehozását.

A nyílfüggvényeket 2015-ben adták hozzá az ES6-hoz. Most vannak mindenki támogatta főbb böngészők. Használhatja őket régebbi böngészőkkel, például az Internet Explorer programmal, például egy olyan transzpiler segítségével Bábel.

Nyílfunkciók létrehozása

A nyílfüggvények fő előnye, hogy tömören elkészítik a kódot.

Itt egy hagyományos funkció:

function square(x) {
    return (x * x);
}

Itt van ugyanaz a kód, amelyet átírtak egy nyílfüggvényként:

const square = x => (x * x);

„Nyílfunkcióknak” hívják őket a nyílszerű „=>”Szintaxisa.

A nyíl funkciók különösen hasznosak, ha visszahívásokkal dolgoznak.

Íme a hagyományos változat:

function getNonEmptyStrings(arr) {
    return arr.filter(function (i) {
        return (i.length > 0);
    });
}

És itt van a belső funkció, mint nyílfüggvény:

function getNonEmptyStrings(arr) {
    return arr.filter(i => (i.length > 0));
}

A nyílfüggvények sokkal rövidebbek, mint a hagyományos társaik. Kihagyhatja a function előtag. Lehetővé teszik a tiszta egysoros utasításokat, és implicitek return nyilatkozat.

Érvek kezelése

A nyílfüggvények elfogadják az argumentumok néhány különböző formáját:

const noArgs = () => alert("I've no arguments");
 
const oneArg = arg => alert(`My arg is ${arg}`);
 
const multipleArgs = (arg1, arg2) => alert(`Args: ${arg1} ${arg2}`);

Egyetlen argumentum használatakor nincs szükség zárójelre. Ha több argumentum van, akkor zárójeleket és vesszőket használjon ugyanabban a stílusban, mint egy klasszikus függvénydeklarációt. Azok a nyílfüggvények, amelyek nem fogadnak el argumentumokat, üres zárójelet igényelnek, így a szintaxis érvényes.

Dolgozás tárgyi irodalmakkal

Az objektum literálokat visszaadhatja az inline nyílfüggvényekből, de zárójelbe kell csomagolni őket. Ez az elemző követelménye.

const func = () => ({foo: "bar"});

Az objektum literálját argumentumokká bonthatja ugyanazon zárójelbe csomagolt forma segítségével:

const func = ({foo}) => foo;
// func({foo: "bar"}) returns "bar"

A zárójelek elhagyása mindkét esetben szintaktikai hibát okoz.

Visszatérő értékek

Eddig minden példánk egyvonalas függvény volt, implicit módon return nyilatkozat.

Írhat nyílfüggvényeket, amelyek több sort is átfognak:

function getNonEmptyStrings(arr) {
    return arr.filter(i => {
        const trimmed = i.trim();
        const replaced = trimmed.replace(/[^A-Za-z]/g, "");
        return (replaced.length > 0);
    });
}

Többsoros nyílfüggvény írásakor tekerje zárójelbe zárójelét ugyanúgy, mint egy hagyományos függvényt. Nem lehet implicit visszatérést használni; vissza kell térnie a return nyilatkozat.

Lexikai kötés

A szintaxistól eltekintve a lexikális kötés az egyik legnagyobb különbség a nyílfüggvények és a klasszikus függvénykifejezések között.

Egy hagyományos funkciónak megvan this köteles önmagára hivatkozni. A nyílfüggvények mindig névtelenek. this azonos értékhez van kötve, mint a this a nyílfüggvényt meghatározó blokkon belül.

class Example {
 
    constructor() {
        this.demo = "foobar";
    }
 
    classic(arr) {
        return arr.filter(function (a) {
            return (a === this.demo);
        });
    }
 
    arrow(arr) {
        return arr.filter(a => (a === this.demo));
    }
 
}
 
const ex = new Example();
 
// no matches
ex.classic(["foobar"]);
 
// matches
ex.arrow(["foobar"]);

A nyílfüggvények képessége a this a szülő hatóköréből azt jelenti, hogy nem kell használnia bind() amikor osztályokban használják őket. A terzerszintaxissal kombinálva ez a nyíl funkciók ideális formája a visszahívások írásakor. Legjobbak azokban az eldobható esetekben, ahol a külső kontextus fontosabb, mint a funkció saját identitása.

A lexikai kötés következtében a nyílfüggvényeket nem szabad használni a call, apply és bind funkciókat. Ezeket a függvényeket egy adott hatókörön belüli funkció végrehajtására használják. Nem relevánsak a nyílfunkciók szempontjából this mindig annak a hatókörnek lesz beállítva, amelyben a kifejezés definiálva van.

Jellemzők

A nyílfüggvényeknek van egy kevés más különbség kifejezetten meghatározottakhoz képest function kifejezések.

A nyílfüggvényeknek nincs constructor így nem hozhat létre példányokat róluk a new kulcsszó. Nekik sincs prototípusuk – a prototype ingatlan lesz undefined.

A szokásos funkcióktól eltérően nem használhatja a arguments helyi változó. Lesz undefined. Az argumentumok értékeihez közvetlenül név szerint kell hozzáférnie.

A nyíl funkció használata a generátor nem támogatott. Megpróbálja használni a yield egy nyíl függvény testén belüli kulcsszó hibát fog felvetni.

Utolsó dolog, amire figyelni kell, az az elemzési sorrend. A nyílfüggvények egyedi kezelést kapnak a feltételes kifejezéseken belül, ezért vegye figyelembe a kimenetet a következő esetekben:

const value = false;
 
// Traditional function; all OK
let result = (value || function () {});
 
// Arrow function - throws a `SyntaxError`
let result = (value || () => null);
 
// Arrow function; all OK
let result = (value || (() => null));

Amikor egy nyílfüggvényt feltételes kifejezésben hoz létre, tekerje zárójelbe annak biztosítása érdekében, hogy helyesen értékeljék. Az operátor elsőbbségének egyes szabályait felülbírálják, amint azt a második példa is szemlélteti.

Következtetés

A nyílfüggvények használatával tömörebbé teszi a kódot és csökkenti a kazántáblát. Attribútumaik, beleértve az anonimitást és a lexikális kötést, jelentősen leegyszerűsítik az olyan forgatókönyveket, mint a visszahívások. Ugyanezek az attribútumok egyidejűleg azt jelentik, hogy nem helyettesítik minden hagyományos funkciót.

Korlátozásaik mellett néhány JavaScript-fejlesztő úgy ítéli meg, hogy a nyílfüggvények a kódot kevésbé olvashatóvá és trükkösebbé tehetik. A kulcsszavak teljes hiánya, mint pl function és return, lehetővé teszi, hogy figyelmen kívül hagyják jelenlétüket a kód lefedése közben. A szintaxis átláthatatlanabb az új fejlesztők előtt, akik nem biztos, hogy teljesen tisztában vannak sajátosságaikkal.

Ezért jó ötlet elgondolkodni arról, hogy miként fogják használni a nyílfüggvényeket a kódalapjában. Gyakran ez azt jelenti, hogy visszahívásokat írnak nyíl formában, miközben ragaszkodnak a legfontosabb legfelső szintű funkciók alternatív szintaxisához.