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