Javascript中类扩展声明之间的差异

自从我开始使用ES6以来，我一直在使用extend声明

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

---

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

这是因为您正在将其分配给一个变量。尝试

classB扩展了classA

而不是：

---

让classB=class扩展…

它们在所有实际应用中都是相同的。考虑到

module.exports=class扩展ClassA{}

let ClassB=class扩展ClassA{}

ClassC扩展了ClassA

然后

• （1） 不会有，而

  ClassB.name==“ClassB”

  和

  ClassC.name==“ClassC”

• （3）将在返回的字符串内有名称，而返回的是“代码> >类扩展了CARA{{}”/代码>这两个（这似乎是Chrome DeVoTeX检查基于的，并且我认为只显示<代码>类扩展一个bug并期望它改变-也许只是针对未命名类的代码>类< /代码>

---

我建议继续使用类声明。您可以将它们与ES6模块中的

export

或

export default

相结合。Chrome显示为将

ClassB.name

设置为“ClassB”，并且在控制台中单击更多打开的箭头后显示IntanceB.constructor的名称。因此，“bug”主要是关于控制台如何操作的。仅供参考，Firefox中的

Function.prototype.toString

方法似乎是一个实际的bug，它生成函数声明（或表达式）fpr类声明（或表达式），并且在所有情况下都省略了“extends name”子句。@Traktor53是的，实例的命名是推断良好的，它很短（未扩展）（imo）损坏的构造函数的表示形式。这也是我最初的想法，但（imho）不再认为它应该更改：报告“class extends className”提供了立即的信息，表明对象是由匿名类表达式而不是声明创建的。有多少人会注意到或关心是另一个问题；-）