Одинаковые ли методы привязки у стрелочной и обычной функций

Введение: Различие в привязке this - ключевая особенность

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

Подробное сравнение механизмов привязки this

1. Обычная функция: Динамический контекст

Обычная функция имеет собственный, динамически определяемый this. Значение this определяется не в момент объявления функции, а в момент её вызова. Оно зависит от того, как была вызвана функция.

const person = {
    name: 'Иван',
    greet: function() {
        console.log(`Привет, я ${this.name}`);
    }
};

person.greet(); // Вывод: "Привет, я Иван" - `this` = объект `person`

const externalGreet = person.greet;
externalGreet(); // Вывод: "Привет, я undefined" - `this` = глобальный объект (window/undefined в strict mode)

Ключевые методы управления this для обычных функций:

• Явная привязка с помощью .bind(): Создаёт новую функцию, намертво привязанную к указанному контексту.

  const boundGreet = person.greet.bind(person);
  boundGreet(); // Всегда: "Привет, я Иван"
  

• Вызов с помощью .call() или .apply(): Позволяет вызвать функцию с явно заданным контекстом this и аргументами.

  const anotherPerson = { name: 'Мария' };
  person.greet.call(anotherPerson); // Вывод: "Привет, я Мария"
  

2. Стрелочная функция: Лексический контекст

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

const person = {
    name: 'Иван',
    tasks: ['Задача 1', 'Задача 2'],
    showTasks: function() {
        // Обычная функция-метод определяет свой собственный `this`
        this.tasks.forEach(function(task) {
            // Эта вложенная обычная функция имеет СВОЙ `this`!
            // Здесь `this` не будет указывать на `person`, это распространённая ошибка.
            console.log(`${this.name}: ${task}`); // `this.name` = undefined
        });
    }
};

person.showTasks(); // Вывод: "undefined: Задача 1", "undefined: Затача 2"

Исправление с помощью стрелочной функции:

const person = {
    name: 'Иван',
    tasks: ['Задача 1', 'Задача 2'],
    showTasks: function() {
        // Стрелочная функция внутри метода захватывает `this` родительского метода (`person`)
        this.tasks.forEach((task) => {
            console.log(`${this.name}: ${task}`); // `this` корректно = объект `person`
        });
    }
};

person.showTasks(); // Вывод: "Иван: Задача 1", "Иван: Задача 2"

Практические следствия и рекомендации

Когда использовать обычные функции:

• В качестве методов объекта, где нужен доступ к свойствам этого объекта через this.
• В функциях-конструкторах (стрелочные функции не могут быть конструкторами).
• В обработчиках событий, где вам может потребоваться динамически менять this или использовать методы .bind(), .call(), .apply().
• В любом месте, где вам нужен контроль над значением this в момент вызова.

Когда использовать стрелочные функции:

• В качестве коллбэков внутри методов (как в примере с forEach, map, setTimeout, обработчики промисов), чтобы сохранить контекст родительской функции.
• В функциях высшего порядка, где лексическое замыкание this упрощает логику.
• В коротких анонимных операциях, где собственный this не нужен.
• Важно: Стрелочные функции, определенные на верхнем уровне (в глобальной области), захватят глобальный this (например, window в браузере).

Критические технические отличия:

1. Невозможность перепривязки: Методы .bind(), .call(), .apply() не работают для стрелочных функций. Они не могут изменить уже захваченный лексический this.

   const arrowFunc = () => console.log(this);
   const boundArrow = arrowFunc.bind({custom: 'object'});
   boundArrow(); // `this` останется таким же, как у исходной arrowFunc.
   

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

Вывод

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