Неправильное значение this при вызове функций и стрелочных методов

Условие

Вопрос: какие значения вернут следующие обращения?

function diameter() {
  return this.radius * 2;
}

const shape = {
  radius: 10,
  diameter,
  perimeter: () => 2 * Math.PI * this.radius,
};

const foo = shape.diameter;
foo();              // ?
shape.diameter();   // ?
shape.perimeter();  // ?

Определите результат каждого вызова, учитывая особенности привязки контекста в обычных функциях и стрелочных функциях.

Ответ

Если рассматривать вызовы отдельно, shape.diameter() вернёт 20. foo() теряет контекст, а стрелка perimeter использует внешний this, поэтому их результат зависит от режима выполнения.

В обычном браузерном script без глобального radius foo() и perimeter() дадут NaN: this у foo — window, а стрелка захватила window при объявлении. В ES-модуле foo() выбросит TypeError из-за undefined this, и следующие строки без перехвата уже не выполнятся; отдельный вызов perimeter тоже упадёт. В коде нет console.log, поэтому сами возвращённые числа автоматически в консоль не выводятся. Исправление: bind для foo и обычный метод perimeter.