javascript - JavaScript ES6 中的解构对象函数

Question

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());

我得到了半径值和颜色，但是当我调用 getArea(1) 或 getArea(5) 时，我得到 NaN，如何让该函数工作？

预计获得314.15

Answer 1

对于普通函数，this 的值由调用函数的方式决定。如果您调用:

circle.getArea()

然后，这表示调用 getArea 函数，其中 this 等于 circle。如果您有一个独立的函数并调用

getArea()

然后你还没有告诉它 this 应该等于什么，所以它默认为 window 对象(在非严格模式下)或未定义的(在严格模式下)。相反，要么用第一种方式调用它，要么使用 call/apply显式设置 this 的值

getArea.call(circle)

或者创建该函数的绑定(bind)副本。

const boundGetArea = circle.getArea.bind(circle);
boundGetArea();