Babel.js 如何将类声明编译成 ES2015？

我当前的任务是将 JavaScript 组件 ES5 转换为 ES6（用 Babel.js 编译）。在使用类和 Babel.js 之前，我们进行原型设计以从其他组件获取函数。

com.company.js.ComponentA.prototype = new com.company.js.utils.UltraFunctions()

现在当使用 Babel.js 并将 ComponentA 变成一个类时

class ComponentA {
  contructor(){
    this.property = "Proppy";
  }
  doStuff() {
    console.log("doStuff");
  }
}

现在，当我在实例化该组件后对其进行分析时，会发生什么情况，我现在看到了两个级别的原型。第一个原型保存“属性” - 第二个原型嵌套在第一个原型中，保存所有功能，在本例中为“doStuff”。这带来了遗留组件的问题，这些组件不应该转换为类（目前）。因为这些组件是通过第二级原型放入的，所以它们会覆盖包含由 Babel.js 编译的“合成”类的功能的原型。

我不是在寻求解决方案。我只是想确定 Babel.js 将类转换为 ES5 JavaScript 的假设是否正确。特别是如上所述创建两级原型的事实。

Update

抱歉我误解了第一个原型！正如 @T.J.Crowder 在评论中所说，第一个是实例 - 因此“属性”被粉碎到实例中，同时通过原型设计将函数插入到“第一”级原型。因此，将我所说的所有内容替换为第二级到第一级，第一级到实例。

我只是想讨论 Babel.js 如何将类转换为 ES5 Javascript。

Babel 使用了很多辅助函数，或者我会说“只需查看转译结果”。 :-)

With ES2015, it's a really simple mapping, because the class syntax was deliberately kept really basic for this first version (ES2016 was going to extend it, but the proposals¹ didn't quite make it so they'll be later, probably ES2017 ES2018 ES2021 or ES2022).

class允许我们定义：

• 构造函数（通过class and constructor)
• 构造函数的prototype对象的原型（通过extends)
• 放在构造函数上的方法prototype object
• 放置在构造函数本身上的方法（static)
• 一种简洁且可移植地引用基“类”构造函数及其原型信息的方法

So this:

// Base "class":
class Base {
    // The code for `Base` goes in this special `constructor` pseudo-method:
    constructor() {
        this.baseProp = 42;
    }

    // A method to put on the `prototype` object (an "instance method"):
    baseMethod() {
        console.log(this.baseProp);
    }

    // A method to put on the constructor (a "static method"):
    static foo() {
        console.log("This is foo");
    }
}

// Derived "class":
class Derived extends Base {
//            ^------------------ defines the prototype behind `Derived.prototype`
    // The code for `Derived`:
    constructor() {
        // Call super constructor (`Base`) to initialize `Base`'s stuff:
        super();

        // Properties to initialize when called:
        this.derivedProp = "the answer";
    }

    // Overridden instance method:
    baseMethod() {
        // Supercall to `baseMethod`:
        super.baseMethod();

        // ...
        console.log("new stuff");
    }

    // Another instance method:
    derivedMethod() {
        this.baseMethod();
        console.log(this.derivedProp);
    }
}

变成我们在 ES5 中可能编写的内容（如果我们不使用任何辅助函数），如下所示：

// This combines the name defined by `class` with the code defined in `constructor`:
var Base = function() {
    this.baseProp = 42;
};
// The "instance" method:
Base.prototype.baseMethod = function() {
    console.log(this.baseProp);
};
// The "static" method:
Base.foo = function() {
    console.log("This is foo");
};

// The derived constructor
var Derived = function() {
    // Call super constructor (`Base`) to initialize `Base`'s stuff:
    Base.call(this);

    // Properties to add when called:
    this.derivedProp = "the answer";
};

// This was done by `class` and `extends`:
Derived.prototype = Object.create(Base.prototype);
Derived.prototype.constructor = Derived;

// Overridden instance method:
Derived.prototype.baseMethod = function() {
    // Supercall to `baseMethod`:
    Base.prototype.baseMethod.call(this);

    // ...
    console.log(this.derivedProp);
};

// Another instance method:
Derived.prototype.derivedMethod = function() {
    this.baseMethod();
    console.log(this.derivedProp);
};

以上注意事项：

• constructor成为构造函数
• All non-constructor, non-static方法成为原型方法
• static方法被分配给构造函数上的属性
• 属性只是像往常一样的属性
• 创建要放置的对象prototype派生构造函数的属性是通过Object.create(Base.prototype), not new Base().
• constructor调用基本构造函数作为其第一个操作。
• 致电superES5 版本中的方法（Base.prototype.baseMethod.call(this);) 很麻烦而且容易出错，这是新语法的优点之一

一些提案将显着延长class syntax:

• 类公共实例字段和私有实例字段
• 私有实例方法和访问器
• 静态类字段和私有静态方法

截至 2021 年 1 月，V8（Chrome、Chromium、Brave、Node.js 等中的 JavaScript 引擎）支持上述所有内容。 SpiderMonkey（在 Firefox 和其他浏览器中）和 JavaScriptCore（在 Safari 中）也紧随其后。