React ES6 Функції стрілок

Функції стрілок

Функції зі стрілками дозволяють нам писати коротший синтаксис функції:

hello = function() {
return "Hello World!";
}

hello = () => {
return "Hello World!";
}

Код стає коротшим! Якщо функція має лише одну інструкцію, й інструкція повертає значення, ви можете видалити дужки та ключове слово return:

hello = () => "Hello World!";

Якщо у вас є параметри, ви передаєте їх у круглі дужки:

hello = (val) => "Hello " + val;

Фактично, якщо у вас є лише один параметр, ви також можете пропустити дужки:

hello = val => "Hello " + val;

Що про this?

Обробка this також відрізняється у функціях зі стрілками у порівнянні зі звичайними функціями.

Коротше кажучи, із функціями стрілок немає прив’язки this.

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

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

Давайте розглянемо два приклади, щоб зрозуміти різницю.

Обидва приклади викликають метод двічі, спочатку під час завантаження сторінки та ще раз, коли користувач натискає кнопку.

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

Результат показує, що перший приклад повертає два різні об’єкти (вікно та кнопку), а другий приклад двічі повертає об’єкт Header.

class Header {
constructor() {
this.color = "Red";
}

//Звичайна функція:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}

const myheader = new Header();

//Об’єкт вікна викликає функцію:
window.addEventListener("load", myheader.changeColor);

//Об’єкт кнопки викликає функцію:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

class Header {
constructor() {
this.color = "Red";
}

//Функція стрілки:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}

const myheader = new Header();

//Об’єкт вікна викликає функцію:
window.addEventListener("load", myheader.changeColor);

//Об’єкт кнопки викликає функцію:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Пам’ятайте про ці відмінності, коли працюєте з функціями. Іноді поведінка звичайних функцій така, як ви хочете, якщо ні, використовуйте функції зі стрілками.

hello =  "Hello World!";