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

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Обычная функция получает this в момент вызова: кто вызвал — тот и стал this. Стрелка так не умеет вовсе. У неё нет собственной ячейки под this, поэтому имя this внутри стрелки читается как обычная внешняя переменная — из того кода, где стрелка написана.

js

const obj = { tag: "A" };
function regular() { return this.tag; }
const arrow = () => "у меня нет своего this";
console.log(regular.call(obj));
console.log(arrow.call(obj));

Сначала предположите, что выведет код

Отсюда следствие, которое ломает интуицию: call, apply и bind не меняют this стрелки. Это не ошибка — просто нечего менять. Что эти три метода делают с обычной функцией, разобрано в статье «call, apply и bind».

Зато стрелка, созданная внутри метода, наследует его this и держится за него, куда бы её потом ни передали.

js

const panel = {
  tag: "панель",
  make() {
    const arrow = () => this.tag;
    return arrow.call({ tag: "чужой" });
  },
};
console.log(panel.make());

Сначала предположите, что выведет код

Это главный сценарий стрелок. Колбэк, переданный в map, forEach или then, вызывается не вашим объектом, а внутренностями метода — и обычная функция теряет this. Раньше это лечили строкой const self = this или вызовом bind, теперь достаточно стрелки. Полный список мест, где контекст теряется, — в статье «Потеря контекста и как её чинить».

js

const shop = {
  discount: 10,
  prices: [100, 200],
  final() { return this.prices.map((p) => p - this.discount); },
};
console.log(shop.final());

Сначала предположите, что выведет код

Разницу удобно увидеть в одном методе: сравним два колбэка, отличающихся только формой записи.

js

const cart = {
  items: [100],
  check() {
    this.items.forEach(function () { console.log(this === cart); });
    this.items.forEach(() => { console.log(this === cart); });
  },
};
cart.check();

Сначала предположите, что выведет код

Метод, записанный стрелкой, выглядит современно и работает неправильно. Объектный литерал не создаёт this, поэтому стрелка возьмёт его снаружи: из модуля, из глобального кода — откуда угодно, только не из объекта.

js

const counter = {
  value: 7,
  viaArrow: () => this === counter,
  viaMethod() { return this === counter; },
};
console.log(counter.viaMethod());
console.log(counter.viaArrow());

Сначала предположите, что выведет код

В обычном браузерном скрипте обращение к this.value в таком «методе» тихо вернёт undefined, а в модуле уронит код ошибкой. Оба исхода одинаково бесполезны, поэтому методы объекта пишем краткой записью: viaMethod() { ... }.

Правило на салфетке: нужен свой this — обычная функция, нужен чужой this — стрелка.

У стрелки нет не только this. Псевдомассива arguments у неё тоже нет — и это скорее подарок: остаточные параметры делают то же самое, но дают настоящий массив с map и filter.

js

function classic() { console.log(arguments.length); }
const modern = (...args) => console.log(args.length);
classic(1, 2, 3);
modern(1, 2, 3);

Сначала предположите, что выведет код

Ошибки не будет, когда стрелка лежит внутри обычной функции: имя arguments найдётся снаружи — ровно так же, как this. А вот в глобальном коде такая стрелка бросит ReferenceError.

js

function outer() {
  const inner = () => arguments[0];
  return inner();
}
console.log(outer("привет"));

Сначала предположите, что выведет код

Стрелка — не конструктор. У неё нет механики создания объектов и нет свойства prototype, поэтому new бросает TypeError сразу, даже не заглянув в тело функции.

js

function Admin(name) { this.name = name; }
const User = (name) => { this.name = name; };
console.log(new Admin("Аня").name);
try { new User("Аня"); } catch (err) { console.log(err instanceof TypeError); }

Сначала предположите, что выведет код

Поле класса вычисляется отдельно для каждого экземпляра, и this внутри него — сам экземпляр. Стрелка запоминает его навсегда, поэтому такой метод можно оторвать от объекта и передать куда угодно.

js

class Button {
  label = "ОК";
  print = () => console.log(this.label);
}
const fn = new Button().print;
fn();

Сначала предположите, что выведет код

Выбор почти всегда сводится к одному вопросу: нужен ли этой функции собственный this. Если да — обычная функция, если нет или нужен внешний — стрелка.

Ситуация	Что писать	Почему
Колбэк внутри метода (map, forEach, then)	стрелка	this остаётся тем же объектом
Метод объекта	краткая запись метода	нужен this вызывающего объекта
Конструктор	function или class	стрелку нельзя вызвать через new
Обработчик события, которому нужен элемент	обычная функция	стрелка не получит элемент в this
Короткое преобразование данных	стрелка	меньше шума, а this и не нужен
Функция с произвольным числом аргументов через arguments	обычная функция	у стрелки нет своего arguments

Заметьте: короткая запись — приятный бонус, а не причина выбора. Стрелка отличается от function поведением, а не длиной.

У стрелки нет собственного this — она берёт его из места, где написана; call, apply и bind этого не меняют.
Поэтому стрелка отлично работает колбэком внутри метода: this остаётся тем же объектом, никаких self и bind.
И по той же причине она плоха как метод объекта: this будет внешним, а не самим объектом.
Своего arguments у стрелки тоже нет — вместо него берите остаточные параметры (...args).
Стрелку нельзя вызвать через new: для конструкторов остаются function и class.

1/3Внутри метода объекта колбэк для forEach написан обычной функцией. Чему будет равен this внутри такого колбэка?

2/3Можно ли задать this стрелочной функции через call, apply или bind?

3/3В объектном литерале метод записали стрелкой: greet: () => this.name. Почему имя пользователя почти наверняка не выведется?

Убрать костыль self

Код работает, но держится на переменной self — старом приёме из времён до стрелок. Перепишите метод intro так, чтобы self исчезла, а результат остался прежним.

js

const team = {
  name: "Ежи",
  members: ["Аня", "Боря"],
  intro() {
    const self = this;
    return this.members.map(function (m) { return m + " из " + self.name; });
  },
};
console.log(team.intro()); // ["Аня из Ежи", "Боря из Ежи"]

Сначала предположите, что выведет код

Колбэк для map заменяем стрелкой: она берёт this из метода intro, где this — это team. Промежуточная переменная становится не нужна.

jsлистинг · не запускается

const team = {
  name: "Ежи",
  members: ["Аня", "Боря"],
  intro() {
    return this.members.map((m) => m + " из " + this.name);
  },
};
console.log(team.intro()); // ["Аня из Ежи", "Боря из Ежи"]

const team = {
  name: "Ежи",
  members: ["Аня", "Боря"],
  intro() {
    return this.members.map((m) => m + " из " + this.name);
  },
};
console.log(team.intro()); // ["Аня из Ежи", "Боря из Ежи"]

Обратите внимание: сам intro остался обычным методом. Сделай мы стрелкой и его — this перестал бы указывать на team, и никакой колбэк уже не помог бы.

Предскажите this

Не запуская код, скажите, что выведет последняя строка и почему значения различаются.

js

const gadget = {
  id: 5,
  ping: () => this === gadget,
  echo() { const inner = () => this === gadget; return inner(); },
};
console.log(gadget.ping(), gadget.echo()); // ?

Сначала предположите, что выведет код

Выведет false true.

ping — стрелка, лежащая прямо в литерале. Её this взят из кода вокруг объекта (модуль или глобальная область), а не из вызова gadget.ping(), поэтому сравнение с gadget даёт false.

echo — обычный метод, и при вызове gadget.echo() его this равен gadget. Стрелка inner создана внутри этого вызова и наследует тот же this, поэтому получается true.

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

Видеоразбор темы за 5–7 минут

У стрелки нет своего thisthis берётся из окружающего кода

Почему стрелки хороши в колбэкахколбэк не теряет нужный объект

Почему стрелки плохи как методыметод остаётся без своего объекта

Нет своего argumentsаргументы приходят из остаточных параметров

Нельзя вызвать через newстрелка не умеет создавать объекты

Когда стрелка, когда обычнаясводная таблица выбора функции

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Убрать костыль self

Предскажите this