Как можно привязать контекст функции и чем отличается bind от стрелочной функции

Question

Контекст можно привязать через bind, call, apply, через обертку (() => fn.call(obj)), или используя стрелочную функцию там, где нужен this извне. bind возвращает новую функцию с “приклеенным” this и (опционально) аргументами. Стрелочная функция не имеет собственного this и берет this из внешней области видимости, поэтому ее нельзя “перебиндить”. bind удобен, когда нужна повторно используемая функция с фиксированным this, а стрелка — когда важно сохранить внешний контекст (например, внутри метода при передаче колбэка).

YeaHub · Accepted Answer

ОпределениеПривязка контекста — это способ сделать так, чтобы внутри функции this был предсказуемым, даже если функция вызвана “не как метод”.Способы привязать/контролировать thisbindфиксирует thisможет частично “подставить” аргументы (каррирование)возвращает новую функциюcall / applyвызывают функцию сразузадают this для конкретного вызоваразница: call(fn, a, b), apply(fn, [a, b])Обертка-стрелкасохраняет внешний thisпозволяет явно вызвать с нужным контекстомЧем bind отличается от стрелочной функции1) bind “приклеивает” this к функции'use strict';

function show() {
  console.log(this.name);
}

const user = { name: 'Ann' };

const bound = show.bind(user);
bound(); // "Ann"
2) У стрелки this лексический и не меняется'use strict';

const user = {
  name: 'Ann',
  showLater() {
    const arrow = () => console.log(this.name);
    arrow();
  },
};

user.showLater(); // "Ann"
3) Важный нюанс: стрелку нельзя “перебиндить”'use strict';

const user1 = { name: 'Ann' };
const user2 = { name: 'Bob' };

const arrow = () => console.log(this); // this берется снаружи (в модуле обычно undefined)
const bound = arrow.bind(user1);

bound(); // не станет user1
Практические случаиbind полезен, когда:нужно передать функцию как колбэк и не потерять thisнужна функция, которую будешь переиспользовать много разСтрелка полезна, когда:пишешь колбэк внутри метода и хочешь сохранить this методане хочешь думать о this внутри вложенных функцийВыводbind создает новую функцию с фиксированным this и подходит для переиспользуемых колбэков. Стрелка не создает свой this и просто “наследует” внешний контекст — идеально для вложенных обработчиков внутри методов.