JavaScript Функция стрелки
Функции стрелки (или стрелочные функции) были введены в ES6.
Стрелочные функции позволяют нам писать более короткий синтаксис функций:
Код становится короче! Если функция имеет только один оператор, и оператор возвращает значение, вы можете удалить скобки и ключевое слово return:
Стрелочные функции возвращают значение по умолчанию:
hello = () => "Hello World!";
Примечание: Это работает, если функция имеет только один оператор.
Если есть параметры, вы передаёте их в круглых скобках:
Фактически, если есть только один параметр, вы также можете пропустить круглые скобки:
А что насчёт this?
Обработка this также отличается в стрелочных функциях от обычных функций.
Короче говоря, со стрелочными функциями нет привязки this.
В обычных функциях ключевое слово this представляет объект, вызывающий функцию, которым может быть окно, документ, кнопка или что-то ещё.
Для стрелочных функций this ключевое слово always представляет объект, определяющий стрелочную функцию.
Давайте рассмотрим два примера, чтобы понять разницу.
Оба примера вызывают метод дважды: сначала при загрузке страницы, и ещё раз, когда пользователь нажимает кнопку.
В первом примере используется обычная функция, а во втором - стрелочная функция.
Результат показывает, что первый пример возвращает два разных объекта (окно и кнопку), а второй пример возвращает объект окна дважды, поскольку объект окна является "владельцем" функции.
Пример
В обычной функции 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 |
