de Cynthia Lee

Când (și de ce) ar trebui să utilizați funcțiile săgeată ES6 – și când nu ar trebui

Cand si de ce ar trebui sa utilizati functiile sageata

Funcțiile săgeată (numite și „funcții săgeată grasă”) sunt, fără îndoială, una dintre cele mai populare caracteristici ale ES6. Au introdus un nou mod de a scrie funcții concise.

Iată o funcție scrisă în sintaxa ES5:

function timesTwo(params) {  return params * 2}function timesTwo(params) {
  return params * 2
}

timesTwo(4);  // 8

Acum, iată aceeași funcție exprimată ca o funcție săgeată:

var timesTwo = params => params * 2

timesTwo(4);  // 8

Este mult mai scurt! Suntem capabili să omitem acoladele și declarația return din cauza returnărilor implicite (dar numai dacă nu există niciun bloc – mai multe despre acest lucru mai jos).

Este important să înțelegeți cum se comportă diferit funcția săgeată în comparație cu funcțiile ES5 obișnuite.

Variații

1611904625 714 Cand si de ce ar trebui sa utilizati functiile sageata
Varietatea este condimentul vietii

Un lucru pe care îl veți observa rapid este varietatea sintaxelor disponibile în funcțiile săgeată. Să parcurgem câteva dintre cele mai comune:

1. Fără parametri

Dacă nu există parametri, puteți plasa o paranteză goală înainte =&gt ;.

() => 42

De fapt, nici măcar nu aveți nevoie de paranteze!

_ => 42

2. Parametru unic

Cu aceste funcții, parantezele sunt opționale:

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

3. Parametri multipli

Pentru aceste funcții sunt necesare paranteze:

(x, y) => 42

4. Declarații (spre deosebire de expresii)

În forma sa de bază, a exprimarea funcției produce o valoare, în timp ce a declarația funcției efectuează o acțiune.

Cu funcția săgeată, este important să ne amintim că declarațiile trebuie să aibă acolade. Odată ce aparatele dentare sunt prezente, trebuie întotdeauna să scrieți return de asemenea.

Iată un exemplu de funcție săgeată utilizată cu o instrucțiune if:

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

5. „Blocare corp”

Dacă funcția dvs. se află într-un bloc, trebuie să utilizați și explicit return afirmație:

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

6. Litere obiecte

Dacă întoarceți un obiect literal, acesta trebuie înfășurat între paranteze. Aceasta forțează interpretul să evalueze ceea ce se află în paranteză și obiectul literal este returnat.

x =>({ y: x })

Sintactic anonim

1611904626 604 Cand si de ce ar trebui sa utilizati functiile sageata

Este important să rețineți că funcțiile săgeată sunt anonime, ceea ce înseamnă că nu sunt denumite.

Acest anonimat creează câteva probleme:

  1. Mai greu de depanat

Când primiți o eroare, nu veți putea urmări numele funcției sau numărul exact al liniei în care a apărut.

2. Fără auto-referință

Dacă funcția dvs. trebuie să aibă o auto-referință în orice moment (de exemplu, recursivitate, gestionare de evenimente care trebuie să fie dezlegată), aceasta nu va funcționa.

Principalul beneficiu: nicio legare a „acestui”

1611904626 980 Cand si de ce ar trebui sa utilizati functiile sageata
Fotografie de davide ragusa pe Unsplash

În expresiile funcționale clasice, this cuvântul cheie este legat de diferite valori bazate pe context în care se numește. Cu funcțiile săgeată, totuși, this este legat lexical. Înseamnă că foloseștethis din codul care conține funcția săgeată.

De exemplu, uitați-vă la setTimeout funcția de mai jos:

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

În exemplul ES5, .bind(this) este necesar pentru a ajuta la trecerea this context în funcție. În caz contrar, în mod implicit this ar fi nedefinit.

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

Funcțiile săgeată ES6 nu pot fi legate de a this cuvânt cheie, deci va crește lexical un domeniu și va utiliza valoarea lui this în domeniul în care a fost definit.

Când nu trebuie să utilizați funcțiile săgeată

După ce am aflat puțin mai multe despre funcțiile săgeții, sper să înțelegeți că acestea nu înlocuiesc funcțiile obișnuite.

Iată câteva cazuri în care probabil nu ați dori să le folosiți:

  1. Metode de obiecte

Când suni cat.jumps, numărul de vieți nu scade. Este pentru că this nu este legat de nimic și va moșteni valoarea lui this din sfera sa mamă.

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

2. Funcții de apel invers cu context dinamic

Dacă aveți nevoie ca contextul dvs. să fie dinamic, funcțiile săgeată nu sunt alegerea corectă. Aruncați o privire la acest manager de evenimente de mai jos:

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

Dacă facem clic pe buton, am primi un TypeError. Este pentru că this nu este legat de buton, ci este legat de domeniul său de aplicare părinte.

3. Când face codul dvs. mai puțin lizibil

Merită să luăm în considerare varietatea sintaxei pe care am tratat-o ​​mai devreme. Cu funcții regulate, oamenii știu la ce să se aștepte. Cu funcțiile săgeată, poate fi greu să descifrezi ceea ce cauți imediat.

Când ar trebui să le folosiți

Funcțiile săgeată strălucesc cel mai bine cu orice necesită this să fie legat de context și nu de funcția în sine.

În ciuda faptului că sunt anonimi, îmi place să le folosesc și cu metode precum map și reduce, deoarece cred că codul meu este mai ușor de citit. Pentru mine, profesioniștii depășesc contra.

Vă mulțumim că ați citit articolul meu și împărtășiți dacă v-a plăcut! Consultați celelalte articole, cum ar fi Cum mi-am construit aplicația Pomodoro Clock, și lecțiile pe care le-am învățat pe parcurs și Hai să demitificăm cuvântul cheie „nou” JavaScript.