Mikor (és miért) érdemes használni az ES6 nyílfüggvényeket - és mikor nem

A nyílfüggvények (más néven „zsírnyílfüggvények”) kétségtelenül az ES6 egyik legnépszerűbb jellemzője. Bevezették a tömör funkciók megírásának új módját.

Itt van egy ES5 szintaxissal írt függvény:

function timesTwo(params) { return params * 2}function timesTwo(params) { return params * 2 } timesTwo(4); // 8

Most itt van ugyanaz a függvény, amelyet nyílfüggvényként fejezünk ki:

var timesTwo = params => params * 2 timesTwo(4); // 8

Sokkal rövidebb! Az implicit visszatérések miatt el tudjuk hagyni a göndör zárójeleket és a return utasítást (de csak akkor, ha nincs blokk - erről bővebben alább).

Fontos megérteni, hogy a nyíl függvény hogyan viselkedik másként, mint a szokásos ES5 funkciók.

Változatok

Az egyik dolog, amit gyorsan észrevesz, az a nyílfunkciókban elérhető szintaxisok sokfélesége. Futtassuk át a közöseket:

1. Nincsenek paraméterek

Ha nincsenek paraméterek, akkor üres zárójeleket helyezhet el a =&gt; elé .

() => 42

Valójában nincs is szükség zárójelre!

_ => 42

2. Egy paraméter

Ezekkel a függvényekkel a zárójel nem kötelező:

x => 42 || (x) => 42

3. Több paraméter

Zárójelek szükségesek ezekhez a funkciókhoz:

(x, y) => 42

4. Nyilatkozatok (szemben a kifejezésekkel)

A legalapvetőbb formájában a függvénykifejezés értéket állít elő, míg a függvény utasítás műveletet hajt végre.

A nyíl funkcióval fontos megjegyezni, hogy az állításoknak göndör zárójelekkel kell rendelkezniük. Amint a göndör zárójel megvan, mindig írnia kellreturnis.

Íme egy példa az if utasításhoz használt nyílfüggvényre:

var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } }

5. „Blokk test”

Ha a funkciója blokkban van, akkor az explicit returnutasítást is használnia kell :

var addValues = (x, y) => { return x + y }

6. Tárgy literálok

Ha egy tárgy betűjét adja vissza, azt zárójelbe kell csomagolni. Ez arra kényszeríti az értelmezőt, hogy értékelje, mi van a zárójelben, és az objektum literál visszatér.

x =>({ y: x })

Szintaktikailag névtelen

Fontos megjegyezni, hogy a nyílfüggvények névtelenek, ami azt jelenti, hogy nem nevezik meg őket.

Ez a névtelenség néhány problémát vet fel:

1. Nehezebb hibakeresés

Ha hibát kap, akkor nem tudja nyomon követni a függvény nevét vagy a pontos sorszámot, ahol történt.

2. Nincs önreferencia

Ha a funkciójának bármikor rendelkeznie kell önreferenciával (pl. Rekurzió, eseménykezelő, amelynek ki kell kapcsolódnia), akkor nem fog működni.

Fő előny: Nincs kötelező érvényű

A klasszikus függvénykifejezésekben a thiskulcsszó különböző értékekhez van kötve a kontextus alapján , amelyben hívják. Nyíllal funkciók azonban thisnem lexikailag kötve . Ez azt jelenti, hogy thisa nyílfüggvényt tartalmazó kódból használja .

Nézze meg például az setTimeoutalábbi függvényt:

// ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } };

Az ES5 példában arra .bind(this)van szükség, hogy segítsen átadni a thiskontextust a függvénynek. Ellenkező esetben alapértelmezés thisszerint nincs meghatározva.

// ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } };

Az ES6 nyílfüggvények nem köthetők thiskulcsszavakhoz, ezért lexikálisan felmennek egy hatókörbe, és annak értékét használják fel thisabban a körben, amelyben meghatározták.

Amikor nem szabad használni a nyílfüggvényeket

Miután többet megtudtam a nyílfüggvényekről, remélem, megértette, hogy ezek nem helyettesítik a szokásos függvényeket.

Íme néhány olyan eset, amikor valószínűleg nem szeretné használni őket:

1. Objektum módszerek

Híváskor cat.jumpsaz életek száma nem csökken. Azért van, mert thisnem kötődik semmihez, és örökölni fogja annak értékét thisa szülői hatóköréből.

var cat = { lives: 9, jumps: () => { this.lives--; } }

2. Visszahívási funkciók dinamikus kontextusban

Ha a kontextusnak dinamikusnak kell lennie, a nyílfüggvények nem a megfelelő választás. Vessen egy pillantást az alábbi eseménykezelőre:

var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });

Ha rákattintunk a gombra, akkor egy TypeError-t kapunk. Azért van, mert thisnem a gombhoz van kötve, hanem a szülő hatóköréhez.

3. Amikor ez kevésbé olvashatóvá teszi a kódot

Érdemes figyelembe venni a korábban ismertetett szintaxis változatosságát. Rendszeres funkcióival az emberek tudják, mire számíthatnak. A nyíl funkciókkal nehéz lehet megfejteni azt, amit azonnal néz.

Mikor érdemes használni őket

A nyílfüggvények a legjobban ragyognak, amihez thismeg kell kötni a kontextust, és nem magával a funkcióval.

Annak ellenére, hogy névtelenek, én is szívesen használom őket olyan módszerekkel, mint a mapés reduce, mert úgy gondolom, hogy ez könnyebben olvashatóvá teszi a kódomat. Számomra a profik meghaladják a hátrányokat.

Köszönjük, hogy elolvasta a cikkemet, és ossza meg, ha tetszett! Nézze meg a többi cikkemet, például a Hogyan építettem fel a Pomodoro Clock alkalmazást, és az általam tanult tanulságokat, valamint a Demystify a JavaScript 'új' kulcsszavát.