ES6 函数在解构对象时无权访问“this”

Question

我在 ES6 学习中尝试了以下问题 material

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

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

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.

的全局对象

您可以稍后使用 .call():

指定 getArea() 函数的 this

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

ES6 函数在解构对象时无权访问“this”

ES6 function does not have access to `this` while de-structuring the Object

javascript

ecmascript-6

object-destructuring