Почему this внутри callback функции filter может быть undefined?

Question

this внутри callback-функции filter может быть undefined, потому что callback вызывается как обычная функция, а не как метод объекта. В строгом режиме ("use strict") значение this в таких функциях равно undefined. Контекст не “передаётся автоматически” внутрь callback. Поэтому this там часто оказывается не тем, что ожидают.

YeaHub · Accepted Answer

ОпределениеКонтекст выполнения (this) — это объект, к которому привязана функция в момент вызова.Как вызывается callback в filterВажно сначала понять, как именно вызывается callback.filter вызывает callback самCallback не привязан к объектуВызов выглядит концептуально так:callback(element, index, array);
Поведение thisВ обычном режиме:this может указывать на глобальный объектВ строгом режиме:this === undefined"use strict";

[1, 2, 3].filter(function (x) {
  console.log(this); // undefined
  return x > 1;
});
Почему это часто вызывает ошибкиОжидается this из внешнего объектаНо callback — это отдельная функцияКонтекст теряетсяСвязь с ReactВ функциональных компонентах this не используетсяВ классовых компонентах подобная ошибка встречается частоПоэтому важно явно управлять контекстомВыводthis внутри callback filter может быть undefined, потому что callback вызывается без привязки к объекту, особенно в строгом режиме.