Hvornår (og hvorfor) skal du bruge ES6-pilfunktioner - og hvornår skal du ikke

Pilfunktioner (også kaldet “fede pilefunktioner”) er utvivlsomt en af ​​de mere populære træk ved ES6. De introducerede en ny måde at skrive koncise funktioner på.

Her er en funktion skrevet i ES5-syntaks:

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

Her er den samme funktion udtrykt som en pilfunktion:

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

Det er meget kortere! Vi er i stand til at udelade de krøllede seler og returopgørelsen på grund af implicitte afkast (men kun hvis der ikke er nogen blok - mere om dette nedenfor).

Det er vigtigt at forstå, hvordan pilfunktionen opfører sig forskelligt i forhold til de almindelige ES5-funktioner.

Variationer

En ting, du hurtigt vil bemærke, er de mange forskellige syntakser, der er tilgængelige i pilefunktioner. Lad os løbe igennem nogle af de almindelige:

1. Ingen parametre

Hvis der ikke er nogen parametre, kan du placere en tom parentes inden =&gt ;.

() => 42

Faktisk behøver du ikke engang parenteser!

_ => 42

2. Enkelt parameter

Med disse funktioner er parenteser valgfri:

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

3. Flere parametre

Parenteser kræves til disse funktioner:

(x, y) => 42

4. Udtalelser (i modsætning til udtryk)

I sin mest basale form producerer et funktionsudtryk en værdi, mens en funktionserklæring udfører en handling.

Med pilfunktionen er det vigtigt at huske, at udsagn skal have krøllede seler. Når de krøllede seler er til stede, skal du altid skrivereturnsåvel.

Her er et eksempel på pilfunktionen, der bruges med en if-sætning:

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

5. "Blok krop"

Hvis din funktion er i en blok, skal du også bruge den eksplicitte returnerklæring:

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

6. Objektbogstaver

Hvis du returnerer et objekt bogstaveligt, skal det pakkes i parentes. Dette tvinger tolken til at evaluere, hvad der er inden for parenteserne, og objektet bogstaveligt returneres.

x =>({ y: x })

Syntaktisk anonym

Det er vigtigt at bemærke, at pilfunktionerne er anonyme, hvilket betyder, at de ikke er navngivet.

Denne anonymitet skaber nogle problemer:

  1. Sværere at debugge

Når du får en fejl, vil du ikke kunne spore navnet på funktionen eller det nøjagtige linjenummer, hvor den opstod.

2. Ingen selvhenvisninger

Hvis din funktion skal have en selvreference på et hvilket som helst tidspunkt (f.eks. Rekursion, begivenhedshåndtering, der skal bindes op), fungerer den ikke.

Hovedfordel: Ingen binding af 'dette'

I klassiske funktionsudtryk er thisnøgleordet bundet til forskellige værdier baseret på den sammenhæng , det kaldes i. Med pil funktioner dog thiser leksikalsk bundet . Det betyder, at det bruger thisfra den kode, der indeholder pilfunktionen.

Se for eksempel på nedenstående setTimeoutfunktion:

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

I ES5-eksemplet .bind(this)kræves det for at hjælpe med at overføre thiskonteksten til funktionen. Ellers ville som standard thisvære udefineret.

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

ES6-pilfunktioner kan ikke bindes til et thisnøgleord, så det leksikalt går op i et omfang og bruger værdien af thisi det omfang, det blev defineret i.

Når du ikke skal bruge pilefunktioner

Efter at have lært lidt mere om pilfunktioner, håber jeg, at du forstår, at de ikke erstatter almindelige funktioner.

Her er nogle tilfælde, hvor du sandsynligvis ikke vil bruge dem:

  1. Objektmetoder

Når du ringer, cat.jumpsfalder antallet af liv ikke. Det er fordi thisdet ikke er bundet til noget og vil arve værdien thisfra dets overordnede omfang.

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

2. Callback-funktioner med dynamisk kontekst

Hvis du har brug for din kontekst for at være dynamisk, er pilfunktioner ikke det rigtige valg. Se på denne begivenhedshåndterer nedenfor:

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

Hvis vi klikker på knappen, får vi en TypeError. Det er fordi thisdet ikke er bundet til knappen, men i stedet bundet til dets overordnede omfang.

3. Når det gør din kode mindre læselig

Det er værd at tage hensyn til de forskellige syntakser, vi dækkede tidligere. Med regelmæssige funktioner ved folk, hvad de kan forvente. Med pilefunktioner kan det være svært at dechifrere, hvad du ser med det samme.

Hvornår skal du bruge dem

Pilfunktioner skinner bedst med alt, hvad der kræves for thisat være bundet til konteksten, og ikke selve funktionen.

På trods af at de er anonyme, kan jeg også godt lide at bruge dem med metoder som mapog reducefordi jeg synes det gør min kode mere læsbar. For mig opvejer profferne ulemperne.

Tak for at læse min artikel, og del, hvis du kunne lide det! Tjek mine andre artikler som hvordan jeg byggede min Pomodoro Clock-app og de lektioner, jeg lærte undervejs, og lad os demystificere JavaScript's 'nye' nøgleord.