Функция ES6 не имеет доступа к `this` при деструктуризации объекта.

Question

Я пытался ответить на следующий вопрос в учебном материале ES6

const circle = {
  radius: 10,
  color: 'orange',
  getArea: function() {
    return Math.PI * this.radius * this.radius;
  },
  getCircumference: function() {
    return 2 * Math.PI * this.radius;
  }
};

let {radius, getArea, getCircumference} = circle;
console.log(getArea())

Сначала я думал, что результат напечатан как 314.1592653589793, но оказалось, что напечатанный результат NaN. Это означает, что функция getArea() не имеет доступа к this. Почему функция не имеет доступа к this при деструктуризации объекта?

Answer 1

Деструктуризация - это просто синтаксис c сахар для присвоения свойств объекта переменным, поэтому следующая строка:

let {radius, getArea, getCircumference} = circle;

эквивалентна:

let radius = circle.radius;
let getArea = circle.getArea;
let getCircumference = circle.getCircumference;

Здесь getArea - просто ссылка на базовую функцию, которая не включает контекст circle. Так что ваша переменная getArea может быть объявлена ​​так:

const getArea = function() {
  return Math.PI * this.radius * this.radius;
}

console.log(getArea()); // NaN

Таким образом, this в функции определяется контекстом вызова getArea, когда на самом деле вызывается . Поскольку в приведенном выше примере контекст не предоставляется, по умолчанию используется глобальный объект window.

Вы можете указать this функции getArea() позже, используя .call():

const circle = {
  radius: 10,
  color: 'orange',
  getArea: function() {
    return Math.PI * this.radius * this.radius;
  },
  getCircumference: function() {
    return 2 * Math.PI * this.radius;
  }
};

let {radius, getArea, getCircumference} = circle;
console.log(getArea.call(circle)); // 314.1592653589793

Answer 2

Это тоже сработает

 const circle = {
      radius: 10,
      color: 'orange',
      getArea() {
        return Math.PI * this.radius * this.radius;
      },
      getCircumference() {
        return 2 * Math.PI * this.radius;
      }
    };