Почему this в данном примере указывает на глобальный объект window?

Question

[vs1710]

Подскажите пожалуйста почему this в данном случае ссылается прямо на window а не на функцию выше.
т.е. ПОЧЕМУ в callback фунции внутри map [Scope]] указывает не внешний объект переменных, а window.

const cars = {
   brands: ['ford', 'audi', 'bmw'],
   category: 'sport car',
   message: function() {
      return this.brands.map(function (brand) { 
         console.log(`The ${brand} is a ${this}`);
      });
   }
}
cars.message();

Answer 1

[Антон Спирин]

Потому что функция не вызывается на каком либо объекте, а вызывается:
mappedValue = callback.call(T, kValue, k, O);
где T - опционально переданный второй аргумент. Если он не передан туда поподает undefined и в обычном режиме undefined заменяется на Window, а в строгом остается undefined.

Исправить можно использовав стрелочную функцию для колбека map:

return this.brands.map(brand => console.log(` The ${brand} is a ${this}`));

или передав контекст:

return this.brands.map(function(brand) { console.log(` The ${brand} is a ${this}`; }, this));

Стрелочным функциям передать контекст нельзя.

Comments

[vs1710]

Так она же на map вызывается, а не где-то там

[Владимир Проскурин]

vs1710, Когда вы передаете функцию куда-то, вы предоставляете только функцию (и переменные в ее области). Контекст this берется в текущем коде, в котором выполняется функция, его можно передать только вторым аргументом (или если использовать стрелочные функции).

[Антон Спирин]

vs1710, она на map не вызывается. Она в map передается аргументом и вызывается внутри.
Можете посмотреть код полифилла тут.

map вызвает колбек с помощью call и если вы не передаете контекст вторым аргументом, в call попадает undefined, который в нестрогом режиме заменяется Window, в строгом остается undefined.

Понятное дело, что стрелочной функции передать контекст нельзя.

Answer 2

[Владимир Проскурин]

Передавайте в map вторым аргументом this

const cars = {
   brands: ['ford', 'audi', 'bmw'],
   category: 'sport car',
   message: function() {
      return this.brands.map(function (brand) { 
         console.log(`The ${brand} is a ${this}`);
      }, this);
   }
}
cars.message();

Comments

[Владимир]

Или используйте стрелочные функции

const cars = {
   brands: ['ford', 'audi', 'bmw'],
   category: 'sport car',
   message: function() {
      return this.brands.map((brand) => { console.warn(this);
         console.log(`The ${brand} is a ${this}`);
      });
   }
}
cars.message();

[vs1710]

Вопрос был почему указывает на window

[vs1710]

Владимир, Вопрос был почему указывает на window

[Владимир Проскурин]

vs1710, вам ответили первым ответом, я дополнил, как можно решить. Если что-то не понятно по первому ответу, уточняйте.