Milloin (ja miksi) sinun tulisi käyttää ES6-nuolitoimintoja - ja milloin ei

Nuolitoiminnot (joita kutsutaan myös nimellä "rasvanuolitoiminnot") ovat epäilemättä yksi ES6: n suosituimmista ominaisuuksista. He esittivät uuden tavan kirjoittaa lyhyitä toimintoja.

Tässä on funktio, joka on kirjoitettu ES5-syntaksissa:

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

Tässä on sama toiminto, joka ilmaistaan nuolitoimintona:

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

Se on paljon lyhyempi! Pystymme jättämään pois kiharat aaltosulkeet ja palautuslausekkeen implisiittisten palautusten takia (mutta vain, jos lohkoa ei ole - lisätietoja tästä alla).

On tärkeää ymmärtää, miten nuolitoiminto käyttäytyy eri tavalla kuin tavalliset ES5-toiminnot.

Muunnelmat

Yksi asia, jonka huomaat nopeasti, on nuolitoiminnoissa käytettävissä olevat syntaksit. Käytetään läpi joitain yleisimpiä:

1. Ei parametreja

Jos parametreja ei ole, voit sijoittaa tyhjät sulkeet ennen =&gt ;.

() => 42

Itse asiassa sinun ei tarvitse edes sulkeita!

_ => 42

2. Yksi parametri

Näiden toimintojen avulla sulkeet ovat valinnaisia:

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

3. Useita parametreja

Näihin toimintoihin tarvitaan sulkeita:

(x, y) => 42

4. Lausunnot (toisin kuin lausekkeet)

Perusmuodossaan funktiolauseke tuottaa arvon, kun taas funktio-lause suorittaa toiminnon.

Nuolitoiminnon kanssa on tärkeää muistaa, että lausunnoissa on oltava kiharaiset aaltosulkeet. Kun kiharat olkaimet ovat läsnä, sinun on aina kirjoitettavareturnyhtä hyvin.

Tässä on esimerkki if-lauseen kanssa käytetystä nuolitoiminnosta:

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

5. "Lohkon runko"

Jos toimintosi on lohkossa, sinun on käytettävä myös nimenomaista returnlausetta:

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

6. Esine literaalit

Jos palautat objektin kirjaimen, se on käärittävä sulkeisiin. Tämä pakottaa tulkin arvioimaan sulkujen sisällä olevan sisällön, ja objektin kirjain palautetaan.

x =>({ y: x })

Syntaktisesti tuntematon

On tärkeää huomata, että nuolitoiminnot ovat nimettömiä, mikä tarkoittaa, että niitä ei nimetä.

Tämä nimettömyys luo joitain asioita:

Vaikeampi virheenkorjaus

Kun saat virheen, et voi jäljittää toiminnon nimeä tai tarkkaa rivinumeroa, missä se tapahtui.

2. Ei itseviittausta

Jos toiminnollasi on oltava itseviite jossakin vaiheessa (esim. Rekursio, tapahtumankäsittelijä, joka täytyy irrottaa), se ei toimi.

Tärkein etu: Ei "tämän" sitomista

Klassisissa funktiolausekkeissa thisavainsana on sidottu eri arvoihin sen kontekstin perusteella , jossa sitä kutsutaan. Nuolitoiminnoillathis on kuitenkin leksikaalisesti sidottu . Se tarkoittaa, että se käyttää thisnuolitoiminnon sisältävästä koodista.

Katso esimerkiksi setTimeoutalla olevaa toimintoa:

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

ES5-esimerkissä .bind(this)vaaditaan thiskontekstin siirtämistä funktioon. Muuten oletusarvoisesti thisolisi määrittelemätön.

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

ES6-nuolitoimintoja ei voida sitoa thisavainsanaan, joten se nousee leksikaalisesti laajuuteen ja käyttää sen määritetyn arvon thislaajuutta.

Kun sinun ei pitäisi käyttää nuolitoimintoja

Kun olen oppinut hieman enemmän nuolitoiminnoista, toivon ymmärtävänne, että ne eivät korvaa tavallisia toimintoja.

Tässä on joitain tapauksia, joissa et todennäköisesti halua käyttää niitä:

Objektimenetelmät

Kun soitat cat.jumps, ihmishenkien määrä ei vähene. Se johtuu siitä, että se thisei ole sidottu mihinkään, ja se perii arvon thisvanhemmistaan.

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

2. Soittotoiminnot dynaamisella kontekstilla

Jos haluat kontekstisi olevan dynaaminen, nuolitoiminnot eivät ole oikea valinta. Katso tätä tapahtumankäsittelijää alla:

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

Jos napsautamme painiketta, saamme TypeError. Se johtuu siitä, että se thisei ole sidottu painikkeeseen, vaan sen sijaan sen pääalaan.

3. Kun se tekee koodistasi vähemmän luettavan

On syytä ottaa huomioon aiemmin käsittelemämme syntaksin moninaisuus. Säännöllisillä toiminnoilla ihmiset tietävät mitä odottaa. Nuolitoimintojen avulla voi olla vaikea tulkita mitä katsot heti.

Milloin sinun pitäisi käyttää niitä

Nuolitoiminnot loistavat parhaiten kaikella, mikä edellyttää thissitoutumista kontekstiin, eikä itse toimintoon.

Huolimatta siitä, että he ovat anonyymejä, pidän myös niiden käytöstä sellaisilla menetelmillä kuin mapja reduce, koska mielestäni se tekee koodistani helpommin luettavissa. Minulle edut ovat suurempia kuin haitat.

Kiitos, että lukit artikkelini, ja jaa, jos pidit siitä! Tutustu muihin artikkeleihini, kuten Kuinka rakensin Pomodoro Clock -sovellukseni, ja oppimani matkan varrella, ja demystifioimme JavaScriptin 'uuden' avainsanan.