Поведение this в обычной функции и стрелочной функции

Условие

Что будет возвращено при вызове следующих методов?

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

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

figure.diameter();  // ?
figure.perimeter(); // ?

Ответ

figure.diameter() возвращает 20. Стрелочная perimeter не получает this=figure: в браузерном script без глобального radius обычно получится NaN, а в ES-модуле — TypeError.

getDiameter — обычная функция, поэтому вызов через figure задаёт this нужным объектом. У perimeter this лексический: он взят из окружающей области, а литерал объекта собственной привязки this не создаёт.

Исправление: perimeter() { return 2 * Math.PI * this.radius; }. Тогда результат равен 20 * Math.PI. Если исходная стрелка создана в другом окружении с заданным this.radius, она использует именно его; утверждать NaN независимо от контекста нельзя.