Kada (i zašto) biste trebali koristiti funkcije strelica ES6 - a kada ne biste trebali

Programiranje

Funkcije strelica (koje se nazivaju i "funkcije masnih strelica") nesumnjivo su jedna od popularnijih značajki ES6. Uveli su novi način pisanja sažetih funkcija.

Evo funkcije napisane u sintaksi ES5:

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

Evo iste funkcije izražene kao funkcija strelice:

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

Puno je kraće! Možemo izostaviti kovrčave zagrade i naredbu return zbog implicitnih povrata (ali samo ako nema bloka - više o tome u nastavku).

Važno je razumjeti kako se funkcija strelice ponaša drugačije u odnosu na uobičajene funkcije ES5.

Varijacije

Jedno ćete brzo primijetiti raznolikost sintaksa dostupnih u funkcijama strelice. Prođimo kroz neke od uobičajenih:

1. Nema parametara

Ako nema parametara, možete staviti prazne zagrade ispred =&gt ;.

() => 42

Zapravo, zagrade vam ni ne trebaju!

_ => 42

2. Pojedinačni parametar

S ovim funkcijama zagrade nisu obvezne:

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

3. Višestruki parametri

Zagrade su potrebne za ove funkcije:

(x, y) => 42

4. Izjave (za razliku od izraza)

U svom najosnovnijem obliku, izraz funkcije stvara vrijednost, dok izraz funkcije izvodi radnju.

S funkcijom strelice važno je zapamtiti da izjave moraju imati kovrčave zagrade. Jednom kada su kovrčave zagrade prisutne, uvijek trebate pisatireturntakođer.

Evo primjera funkcije strelice koja se koristi s izrazom if:

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

5. "Blokiraj tijelo"

Ako je vaša funkcija u bloku, također morate koristiti eksplicitnu returnizjavu:

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

6. Objektni literali

Ako vraćate doslovni objekt, mora biti umotan u zagrade. To prisiljava interpretatora da procijeni što je unutar zagrada i vraća se literal objekta.

x =>({ y: x })

Sintaksički anonimno

Važno je napomenuti da su funkcije strelica anonimne, što znači da nisu imenovane.

Ova anonimnost stvara nekoliko problema:

  1. Teže za otklanjanje pogrešaka

Kad dobijete pogrešku, nećete moći pratiti ime funkcije ili točan broj retka na kojem se dogodila.

2. Nema autoreferenciranja

Ako vaša funkcija u bilo kojem trenutku treba imati samoreferencu (npr. Rekurzija, rukovatelj događajima koji se mora odvezati), neće raditi.

Glavna prednost: Nema obvezujućeg "ovoga"

U klasičnim izrazima funkcija thisključna riječ vezana je za različite vrijednosti na temelju konteksta u kojem je pozvana. Sa strelicama funkcija, međutim, thisje leksički dužan . To znači da koristi thisiz koda koji sadrži funkciju strelice.

Na primjer, pogledajte setTimeoutfunkciju u nastavku:

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

U primjeru ES5 .bind(this)potreban je za pomoć u prenošenju thiskonteksta u funkciju. Inače, prema zadanim postavkama thisbilo bi nedefinirano.

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

Funkcije strelice ES6 ne mogu se vezati za thisključnu riječ, pa će leksički ići prema opsegu i koristiti vrijednost thisu opsegu u kojem je definirana.

Kada ne biste trebali koristiti funkcije strelice

Nakon što sam naučio malo više o funkcijama strelica, nadam se da razumijete da one ne zamjenjuju redovite funkcije.

Evo nekoliko slučajeva kada ih vjerojatno ne biste željeli koristiti:

  1. Objektne metode

Kada nazovete cat.jumps, broj života se ne smanjuje. To je zato što thisnije vezan ni za što i naslijedit će vrijednost thisiz svog roditeljskog opsega.

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

2. Funkcije povratnog poziva s dinamičkim kontekstom

Ako trebate da vaš kontekst bude dinamičan, funkcije strelica nisu pravi izbor. Pogledajte ovaj voditelj događaja u nastavku:

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

Ako kliknemo gumb, dobit ćemo TypeError. To je zato što thisnije vezan za gumb, već je vezan za njegov nadređeni opseg.

3. Kada vaš kôd učini manje čitljivim

Vrijedno je uzeti u obzir raznolikost sintakse koju smo obrađivali ranije. Uz redovite funkcije, ljudi znaju što mogu očekivati. S funkcijama strelice možda će biti teško odmah dešifrirati ono što gledate.

Kada biste ih trebali koristiti

Funkcije strelica najbolje sjaje sa svime što zahtijeva thisvezanje za kontekst, a ne za samu funkciju.

Unatoč činjenici da su anonimni, također ih volim koristiti s metodama kao što su mapi reduce, jer mislim da to moj kôd čini čitljivijim. Za mene su prednosti veće od nedostataka.

Hvala što ste pročitali moj članak i podijelite ako vam se svidio! Pogledajte moje druge članke poput Kako sam izradio svoju aplikaciju Pomodoro Clock, te lekcije koje sam usput naučio i Demistificirajmo JavaScriptovu novu riječ.