Как работает this внутри метода объекта

Условие

Нужно понять, какой вывод появится в консоли, если раскомментировать строку с вызовом console.log.

const person = {
  name: "Bob",
  roles: ["friend", "brother", "student"],
  getRoles: function () {
    return this.roles.map(function (role) {
      return this.name + " is " + role;
    });
  }
};
// console.log(person.getRoles()); // ?

Ответ

После раскомментирования в strict mode возникнет TypeError: this обычной функции map равен undefined. В нестрогом браузерном script будет использовано глобальное name, а не Bob.

Вызов person.getRoles() задаёт this только внешнему методу. callback map вызывается отдельно и без thisArg.

getRoles: function () {
  return this.roles.map(role => this.name + ' is ' + role);
}

Это исправленное тело метода: стрелка захватывает this, поэтому возвращаются 'Bob is friend', 'Bob is brother', 'Bob is student'. Альтернатива — передать this вторым аргументом map. В исходном нестрогом браузерном коде window.name часто является пустой строкой, поэтому нельзя универсально обещать текст 'undefined is ...'.