javascript - 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为什么在解构 Object 时该函数无权访问？

Answer 1

解构只是将对象属性分配给变量的语法糖，因此以下行：

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;
      }
    };