Стрелочные функции были введены в ES6.
Функции стрелок были введены в ES6, они позволяют писать более короткий синтаксис функции:
Становится короче! Если функция имеет только одино оператор, и оператор возвращает значение, вы можете удалить скобки и у return ключевого слова:
Примечание: это работает, только если функция имеет одни оператор.
Если у вас есть параметры, вы передаете их в круглых скобках:
Фактически, если у вас есть только один параметр, вы также можете пропустить круглые скобки:
Как насчет 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 |