Стрелочные и обычные функции в JavaScript

Обычные функции

Синтаксис: Обычные функции имеют более развернутый синтаксис. Они могут быть объявлены с использованием ключевого слова function.

function greet(name) {
return "Hello, " + name + "!";
}

Контекст this: У обычных функций свой собственный контекст this. Это может вызвать проблемы с потерей контекста.

Использование: Они обычно используются, когда нужно создать метод объекта или конструктор.

Стрелочные функции

Синтаксис: Стрелочные функции имеют более короткий, сжатый синтаксис. Они объявляются с использованием символа "стрелки" =>.

const greet = (name) => "Hello, " + name + "!";

Контекст this: Стрелочные функции не имеют собственного контекста this. Они захватывают его из об surrounding кода, что делает их удобными для работы с контекстом.

Использование: Они идеально подходят для коротких функций и методов, где контекст this должен оставаться неизменным.

ОСНОВНЫЕ РАЗЛИЧИЯ

Синтаксис: Стрелочные функции более лаконичные.
Контекст this: Обычные функции имеют свой this, в то время как стрелочные функции наследуют this от surrounding кода.
Конструкторы: Стрелочные функции не могут быть использованы как конструкторы и вызваны с использованием new.
Arguments объект: Обычные функции имеют arguments объект, но стрелочные функции его не имеют.

#обучающийПост #JavaScript #functions

В первом примере используется обычная функция, и this внутри setInterval не ссылается на экземпляр Person. По умолчанию (в строгом режиме) this будет undefined, а в нестрогом — глобальный объект. Поскольку undefined не имеет свойства age, попытка инкрементировать его приведет к NaN

Во втором примере используется стрелочная функция, которая не имеет собственного this. Она "позаимствует" его из окружающего контекста, в данном случае из функции-конструктора Person. Это означает, что this.age будет корректно инкрементироваться каждую секунду, и в консоль будет выводиться возраст Person, который увеличивается на 1 каждую секунду.

#code #JavaScript #functions #this