Функция стрелки JavaScript
Стрелочные функции были представлены в ES6.
Стрелочные функции позволяют нам писать более короткий синтаксис функции:
let myFunction = (a, b) => a * b;
До:
hello = function() {
return "Hello World!";
}
С функцией стрелки:
hello = () => {
return "Hello World!";
}
Становится короче! Если функция имеет только один оператор, и оператор возвращает значение, вы можете удалить скобки и
ключевоеreturn слово:
Стрелочные функции возвращают значение по умолчанию:
hello = () => "Hello World!";
Примечание. Это работает, только если функция имеет только один оператор.
Если у вас есть параметры, вы передаете их в круглых скобках:
Стрелочная функция с параметрами:
hello = (val) => "Hello " + val;
На самом деле, если у вас есть только один параметр, вы также можете пропустить круглые скобки:
Что о this?
Обработка thisстрелочных функций также отличается от обычных функций.
Короче, со стрелочными функциями нет привязки
this.
В обычных функциях thisключевое слово представляет объект, который вызывает функцию, которая может быть окном, документом, кнопкой или чем-то еще.
В стрелочных функциях thisключевое слово всегда представляет объект, определяющий стрелочную функцию.
Давайте рассмотрим два примера, чтобы понять разницу.
Оба примера вызывают метод дважды, сначала при загрузке страницы и еще раз, когда пользователь нажимает кнопку.
В первом примере используется обычная функция, а во втором — стрелочная функция.
Результат показывает, что первый пример возвращает два разных объекта (окно и кнопку), а второй пример дважды возвращает объект окна, потому что объект окна является «владельцем» функции.
Пример
Обычная функция thisпредставляет объект, вызывающий функцию:
// Regular Function:
hello = function() {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
document.getElementById("btn").addEventListener("click", hello);
Пример
Функция со стрелкой thisпредставляет
владельца функции:
// Arrow Function:
hello = () => {
document.getElementById("demo").innerHTML
+= this;
}
// The window object calls the function:
window.addEventListener("load", hello);
// A button object calls the
function:
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 |