Почему у arrow function нет своего this и arguments в JavaScript?

1️⃣ Как кратко ответить

Arrow functions в JavaScript не имеют собственного this и arguments, потому что они были разработаны для использования в контексте, где требуется лексическое связывание this и arguments. Это позволяет им наследовать this и arguments из окружающей функции, что упрощает работу с методами и обработчиками событий.

2️⃣ Подробное объяснение темы

Arrow functions, или стрелочные функции, были введены в ECMAScript 6 (ES6) и представляют собой более краткий синтаксис для написания функций. Однако их ключевая особенность заключается в том, как они обрабатывают this и arguments.

Лексическое связывание this

В традиционных функциях this определяется в момент вызова функции и зависит от контекста, в котором она была вызвана. Это может привести к путанице, особенно в методах объектов и обработчиках событий, где this может неожиданно измениться.

Пример с обычной функцией:

function Person() {
    this.age = 0;
​
    setInterval(function growUp() {
        this.age++;
    }, 1000);
}
​
const p = new Person();

В этом примере this внутри growUp не ссылается на объект Person, а вместо этого ссылается на глобальный объект (в браузере это window), потому что growUp вызывается как обычная функция.

Как работают стрелочные функции

Стрелочные функции решают эту проблему, используя лексическое связывание this. Это означает, что this внутри стрелочной функции всегда ссылается на this из окружающего контекста, в котором была определена стрелочная функция.

Перепишем предыдущий пример с использованием стрелочной функции:

function Person() {
    this.age = 0;
​
    setInterval(() => {
        this.age++;
    }, 1000);
}
​
const p = new Person();

Теперь this внутри стрелочной функции ссылается на объект Person, потому что стрелочная функция наследует this из контекста, в котором она была создана.

Отсутствие arguments

Стрелочные функции также не имеют собственного объекта arguments. В традиционных функциях arguments — это объект, содержащий все аргументы, переданные функции. В стрелочных функциях, если вам нужно использовать arguments, вы должны обратиться к нему из окружающего контекста.

Пример:

function traditionalFunction() {
    console.log(arguments);
}
​
traditionalFunction(1, 2, 3); // Выведет: [1, 2, 3]
​
const arrowFunction = () => {
    console.log(arguments);
};
​
arrowFunction(1, 2, 3); // Ошибка: arguments is not defined

В стрелочной функции arguments не определен, и попытка его использования приведет к ошибке. Если вам нужно работать с аргументами в стрелочной функции, вы можете использовать оператор расширения (...):

const arrowFunctionWithArgs = (...args) => {
    console.log(args);
};
​
arrowFunctionWithArgs(1, 2, 3); // Выведет: [1, 2, 3]

Применение

Стрелочные функции особенно полезны в методах объектов и обработчиках событий, где важно сохранить контекст this. Они упрощают код и делают его более предсказуемым, устраняя необходимость в таких приемах, как сохранение this в переменной или использование методов bind.

Таким образом, отсутствие собственного this и arguments в стрелочных функциях делает их мощным инструментом для работы с контекстом в JavaScript.