JavaScript Функція стрілки
Функції стрілки (або стрілкові функції) були введені в ES6.
Функції стрілки дозволяють нам писати коротший синтаксис функцій:
let myFunction = (a, b) => a * b;
Спробуйте самі »
Код стає коротшим! Якщо функція має лише одну інструкцію, та інструкція повертає значення, ви можете видалити скобки та ключове слово return:
Функції стрілки повертають значення за замовчуванням:
hello = () => "Hello World!";
Спробуйте самі »
Якщо є параметри, ви передаєте їх в круглих скобках:
Фактично, якщо є лише один параметр, ви також можете пропустити круглі скобки:
А як щодо this?
Обробка this також відрізняється в функціях стрілки від звичних функцій.
Короче кажучи, із функціями стрілки немає прив’язки до this.
В звичних функціях ключове слово this представляє об’єкт, що викликає функцію, яким може бути вікно, документ, кнопка або щось іще.
Із функціями стрілки ключове слово this завжди представляє об’єкт, що визначає функцію стрілки.
Давайте розглянемо два приклади, щоб зрозуміти різницю.
Обидва приклади викликають метод двічі: спочатку при завантаженні сторінки, і ще раз, коли користувач натискає кнопку.
В першому прикладі використовується звична функція, а в другому - функція стрілки.
Результат показує, що перший приклад повертає два різних об’єкти (вікно та кнопку), а інший приклад повертає об’єкт вікна двічі, оскільки об’єкт вікна є "власником" функції.
Приклад
У звичній функції this представляє об’єкт, що викликає функцію:
// Звична функція:
hello = function() {
document.getElementById("demo").innerHTML += this;
}
// Об’єкт вікна викликає функцію:
window.addEventListener("load", hello);
// Об’єкт кнопки викликає функцію:
document.getElementById("btn").addEventListener("click", hello);
Спробуйте самі »
Приклад
За допомогою функції стрілки this представляє власника функції:
// Функція стрілки:
hello = () => {
document.getElementById("demo").innerHTML += this;
}
// Об’єкт вікна викликає функцію:
window.addEventListener("load", hello);
// Об’єкт кнопки викликає функцію:
document.getElementById("btn").addEventListener("click", hello);
Спробуйте самі »
Пам’ятайте про ці відмінності, коли працюєте з функціями. Іноді поведінка звичних функцій - це те, що вам потрібно, якщо ні - то використовуйте функції стрілки.
Підтримка браузерами
В наступній таблиці визначені перші версії браузерів з повною підтримкою функції стрілок в JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |
