Javascript中类扩展声明之间的区别答案

【问题标题】：Difference between class extends declarations in JavascriptJavascript中类扩展声明之间的区别
【发布时间】：2017-05-24 22:32:41
【问题描述】：

自从我开始使用 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

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

【问题讨论】：

我建议继续使用类声明。您可以在 ES6 模块中将它们与 export 或 export default 结合使用。

标签： javascript inheritance extends

【解决方案1】：

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

module.exports = class extends ClassA {}
let ClassB = class extends ClassA {}
class ClassC extends ClassA

然后

(1) 没有.name property，而ClassB.name == "ClassB" 和ClassC.name == "ClassC"
(3) 将在 .toString() method 返回的字符串中包含名称，而其他两个返回 "class extends ClassA {}"（这似乎是 Chrome 开发工具检查所基于的，我考虑只显示 @ 987654331@ 一个错误并期望它会改变 - 可能只是 class 用于未命名的类）

【讨论】：

Chrome 似乎将 ClassB.name 设置为 "ClassB" ，单击控制台中更多打开的箭头后会显示 IntanceB.contructor 的名称。因此，“错误”主要出现在控制台的运行方式上。仅供参考，Firefox 中的 Function.prototype.toString 方法似乎是一个实际的错误，产生函数声明（或表达式）fpr 类声明（或表达式），并在所有情况下都省略了“扩展 name”子句。跨度>
@Traktor53 是的，实例的命名可以很好地推断出来，它是构造函数的简短（未扩展）表示，即（imo）错位。
这也是我最初的想法，但不再（恕我直言）认为它应该改变：报告“class extends className”提供了对象是由匿名类 表达式 而不是声明。有多少人会注意到或关心是另一个问题;-)

【解决方案2】：

这是因为您将它分配给一个变量。尝试 class classB extends classA 代替： let classB = class extends...

【讨论】：