Почему в callback функции filter теряется контекст this и как это исправить?

В JavaScript значение this определяется не тем, где функция объявлена, а тем, как она вызвана. Когда вы передаёте метод объекта как callback в filter, движок вызывает эту функцию как обычную, без ссылки на исходный объект. Поэтому this внутри теряется.

Почему это происходит

Рассмотрим пример:

const user = {
  name: 'Anna',
  scores: [10, 20, 30],
  filterScores() {
    return this.scores.filter(function(score) {
      return score > this.min; // this здесь не user
    });
  },
  min: 15
};

Внутри обычной функции this не указывает на user, потому что filter вызывает callback без контекста. В строгом режиме это undefined, и обращение к this.min выбросит ошибку.

Способы исправить

• Стрелочная функция — не создаёт собственный this, а берёт его из внешней области видимости.
• bind — явно привязывает нужный контекст к функции.
• Сохранение this в переменную — классический приём const self = this;.
• Второй аргумент filter — filter(callback, thisArg) позволяет передать контекст напрямую.

Примеры решений

// 1. Стрелочная функция
this.scores.filter(score => score > this.min);

// 2. bind
this.scores.filter(function(score) {
  return score > this.min;
}.bind(this));

// 3. thisArg
this.scores.filter(function(score) {
  return score > this.min;
}, this);

Стрелочные функции удобнее в большинстве случаев, но их нельзя использовать, если нужен собственный this или arguments. bind и thisArg полезны, когда callback уже определён отдельно.

Итог: применяйте стрелочные функции для коротких callback-ов, а bind или thisArg — когда функция переиспользуется или должна сохранять собственный контекст.