如果 ES6 的 class 静态方法的 this 绑定到 class，为什么 this return NaN？

Question

class Circle {
    constructor() {
        this.width = 2;
        this.height = 3;
    }
    
    static area() {
        return this.width * this.height
    }
} 

console.log(Circle.area()) // NaN

我了解到 Class 的静态方法将此绑定到 Class 本身，而不是实例的新对象。所以我期望 Cicle.area() 到 return 6，它来自 (2 * 3)。但实际结果 returns NaN。我找不到原因。

Answer 1

您的构造函数绑定到 class 的一个实例。这就是 this.height 和 this.width 的存储位置（在 class 的实例上）。

静态方法绑定到 class 并且 class 本身没有静态 height 或 width 属性。因此，当您尝试将两个现有的 undefined 值相乘时，您会得到 NaN。

在这种情况下，如果您希望 area 成为静态方法，则必须将高度和宽度传递给它，因为它未绑定到任何具有现有 [=14= 的实例] 或 width.

class Rectangle {
    static area(height, width) {
        return width * height;
    }
} 

console.log(Rectangle.area(10, 6));

或者，如果要使用实例高度和宽度，那么area需要是实例方法，而不是静态方法。

class Rectangle {
    constructor(height, width) {
        this.width = width;
        this.height = height;
    }
    
    area() {
        return this.width * this.height;
    }
} 

let rect = new Rectangle(10, 6);
console.log(rect.area()) // 60

注意：我将示例转换为矩形 class 因为我不确定圆的高度和宽度是什么意思。

如果 ES6 的 class 静态方法的 this 绑定到 class，为什么 this return NaN？

If ES6's class static method's this binds to the class, why does this return NaN?

javascript

static-methods

this

ecmascript-6