Стрелочные функции упрощают запись обычных функций, делая код компактнее.
Пример
Ранее использовалось:
hello = function() {
return "Hello World!";
};
Пример
Теперь со стрелочной функцией:
hello = () => {
return "Hello World!";
};
А если тело функции состоит всего лишь из одного выражения, возвращающего результат, то фигурные скобки и оператор return можно опустить:
Пример
Получается ещё лаконичнее:
hello = () => "Hello World!";
При наличии аргументов их передают через круглые скобки.
Пример
Стрелочная функция с аргументами:
hello = (val) => "Hello " + val;
Однако, если аргумент единственный, круглых скобок можно избежать.
Пример
Стрелочная функция без скобок вокруг аргумента:
hello = val => "Hello " + val;
А как обстоят дела с this?
Использование this в стрелочных функциях кардинально отличается от классических функций JavaScript.
Кратко говоря, стрелочные функции не имеют собственной привязки к контексту (this).
В традиционных функциях значение this указывало на объект, вызвавший функцию — будь то окно браузера, документ HTML, кнопка или другой элемент.
А вот в стрелочной функции значение this всегда соответствует объекту, в контексте которого была объявлена сама стрелочная функция.
Для наглядности давайте сравним два варианта вызова метода: сначала автоматически после загрузки страницы, а второй раз вручную, нажатием кнопки пользователем.
Первый вариант демонстрирует использование традиционной функции, тогда как во втором варианте применяется стрелочная функция.
Результаты показывают, что первая версия выводит разные объекты (window и button), поскольку значение this зависит от контекста вызова. Во втором примере стрелочная функция сохраняет привязку к исходному объекту Header, вследствие чего выводится один и тот же объект Header.
Пример 1:
Обычная функция наследует контекст вызывающего объекта через this:
class Header {
constructor() {
this.color = "Red";
}
// Традиционная функция:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
// Функция вызвана объектом window:
window.addEventListener("load", myheader.changeColor);
// Функция вызвана кнопкой:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Пример 2:
Стрелочная функция сохраняет ссылку на оригинальный объект Header, вне зависимости от того, кем она была вызвана:
class Header {
constructor() {
this.color = "Red";
}
// Стрелочная функция:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
// Вызывается объектом window:
window.addEventListener("load", myheader.changeColor);
// Вызывается кнопкой:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
Важно учитывать эти различия при работе с JavaScript-функциями. В некоторых случаях полезно использовать традиционную функцию, в других ситуациях лучше подойдет стрелочная функция.
