Кога (и защо) трябва да използвате функциите на стрелките 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.