javascript - Javascript 中类扩展声明之间的区别

Question

自从我开始使用 ES6 以来，我一直在使用扩展声明 class ClassB extends ClassA {} 来扩展类，并且最近这是我看到的唯一方式。

有一天，在阅读 Yeoman 文档时，我注意到他们正在扩展类 module.exports = class extends ClassA {}。

我认为这些声明一定只是用不同的方式来表达完全相同的事情。我测试了以下代码来证实我的怀疑，但它并不像我希望的那么清晰:

class ClassA {
    constructor(width) {
        this.width = width
    }
}

let ClassB = class extends ClassA {
    constructor(width, height) {
        super(width)
        this.height = height
    }
}

class ClassC extends ClassA {
    constructor(width, height) {
        super(width)
        this.height = height
    }
}

let instanceB = new ClassB(10, 10)
let instanceC = new ClassC(10, 10)

当我在 chrome 中检查演示时，我注意到变量 instanceB 和 instanceC 的构造函数略有不同:

- instanceB: ClassB
    - __proto__: ClassA
        - constructor: class extends
- instanceC: ClassC
    - __proto__: ClassA
        - constructor: class ClassC

我的问题是这些扩展声明是否完全相同，即使它们在检查器中的描述略有不同？

Answer 1

它们对于所有实际目的都是相同的。考虑到

1. module.exports = class extends ClassA {}
2. let ClassB = class extends ClassA {}
3. ClassC 类扩展 ClassA

然后

• (1) 不会有 .name property ，而 ClassB.name == "ClassB" 和 ClassC.name == "ClassC"
• (3) 将在 .toString() method 返回的字符串中包含名称。 ，而对于其他两个，它返回 "class extends ClassA {}" (这似乎是 Chrome devtools 检查的基础，我认为只显示 class extends一个错误并期望它会改变 - 也许只是 class 对于未命名的类)