Коли (і чому) слід використовувати функції стрілок ES6 - а коли не слід

Функції стрілок (їх також називають «функціями жирових стрілок»), безсумнівно, є однією з найпопулярніших функцій ES6. Вони запровадили новий спосіб написання стислих функцій.

Ось функція, написана синтаксисом ES5:

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

Тепер ось та сама функція, виражена як функція стрілки:

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

Це набагато коротше! Ми можемо опустити фігурні дужки та оператор return через неявні повернення (але лише якщо блоку немає - про це нижче).

Важливо зрозуміти, як функція стрілки поводиться інакше, ніж звичайні функції ES5.

Варіації

Одне, що ви швидко помітите, - це різноманітність синтаксисів, доступних у функціях стрілок. Давайте розглянемо деякі загальні:

1. Без параметрів

Якщо параметрів немає, ви можете розмістити порожні дужки перед =&gt ;.

() => 42

Насправді вам навіть дужки не потрібні!

_ => 42

2. Одиночний параметр

З цими функціями дужки необов’язкові:

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

3. Кілька параметрів

Для цих функцій потрібні дужки:

(x, y) => 42

4. Висловлювання (на відміну від виразів)

У найосновнішій формі вираз функції створює значення, тоді як оператор функції виконує дію.

З функцією стрілки важливо пам’ятати, що оператори повинні мати фігурні дужки. Після того, як фігурні дужки є, вам завжди потрібно писатиreturnтак само.

Ось приклад функції стрілки, яка використовується з оператором if:

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

5. “Блок корпусу”

Якщо ваша функція в блоці, ви також повинні використовувати явний returnоператор:

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

6. Об’єктні літерали

Якщо ви повертаєте літерал об’єкта, його потрібно загорнути в дужки. Це змушує інтерпретатор оцінювати те, що знаходиться в дужках, і повертається літерал об’єкта.

x =>({ y: x })

Синтаксично анонімний

Важливо зазначити, що функції зі стрілками є анонімними, що означає, що вони не називаються.

Ця анонімність створює деякі проблеми:

  1. Важче налагодити

Коли ви отримуєте помилку, ви не зможете простежити назву функції або точний номер рядка, де вона сталася.

2. Відсутність самореференцій

Якщо у будь-якій точці для вашої функції потрібно мати самостійне посилання (наприклад, рекурсія, обробник подій, який потрібно розв’язати), вона не буде працювати.

Головна перевага: відсутність прив'язки "цього"

У класичних виразах функцій thisключове слово прив'язане до різних значень залежно від контексту, в якому воно викликається. З стрілками функцій однак, thisє лексично пов'язані . Це означає, що він використовує thisкод, який містить функцію стрілки.

Наприклад, подивіться на setTimeoutфункцію нижче:

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

У прикладі ES5 .bind(this)потрібно передати thisконтекст у функцію. В іншому випадку за замовчуванням thisбуде невизначеним.

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

Функції зі стрілками ES6 не можуть бути прив’язані до thisключового слова, тому воно лексично підніметься вгору по області дії та використовуватиме значення thisв області, в якій воно було визначено.

Коли ви не повинні використовувати функції стрілок

Дізнавшись трохи більше про функції стрілок, сподіваюся, ви зрозуміли, що вони не замінюють звичайні функції.

Ось кілька випадків, коли ви, мабуть, не хотіли б їх використовувати:

  1. Об’єктні методи

Коли ви телефонуєте cat.jumps, кількість життів не зменшується. Це тому this, що ні до чого не прив’язане, і буде успадковувати значення thisз батьківської області.

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

2. Функції зворотного дзвінка з динамічним контекстом

Якщо вам потрібно, щоб ваш контекст був динамічним, функції зі стрілками не є правильним вибором. Погляньте на цей обробник подій нижче:

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

Якщо ми натиснемо кнопку, ми отримаємо TypeError. Це тому, що thisвін не прив’язаний до кнопки, а натомість прив’язаний до її батьківської області.

3. Коли це робить ваш код менш читабельним

Варто взяти до уваги різноманітність синтаксису, про який ми говорили раніше. Завдяки регулярним функціям люди знають, чого очікувати. За допомогою функцій зі стрілками може бути важко розшифрувати те, на що ви дивитесь відразу.

Коли вам слід їх використовувати

Функції стрілок найкраще світяться тим, що вимагає thisприв’язки до контексту, а не самої функції.

Незважаючи на те, що вони анонімні, мені також подобається використовувати їх із такими методами, як mapі reduce, оскільки я думаю, що це робить мій код більш читабельним. Для мене плюси переважують мінуси.

Дякуємо, що прочитали мою статтю та поділіться, якщо вам сподобалась! Ознайомтеся з іншими моїми статтями, як-от Як я створив свій додаток Pomodoro Clock, а також уроками, які я вивчив під час роботи, та Давайте демістифікуємо "нове" ключове слово JavaScript.