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

Question

我目前的任务是将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。特别是上面提到的创建两级原型的事实。

更新

很抱歉我误解了第一个原型！正如@T.J.Crowder在评论中所说的，第一个是实例-因此“属性”被砸到实例中，而函数则通过原型插入到“第一级”原型中。因此，将我所说的一切替换为第二级到第一级和第一级到实例。

Answer 1

ES6/Babel类语法复制了相同的原型模式，如果您使用函数构造函数并覆盖原型，您将获得相同的模式。下面的示例将在调用构造函数后产生相同的实例对象。

ES6/Babel

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

var c = new ComponentA();

ES5

var ComponentA = function () {
  this.property = "Proppy";
}

ComponentA.prototype.doStuff = function () {
  console.log("doStuff");
}

var c = new ComponentA();

下面是如何在ES6类语法和ES5中继承另一个构造函数的原型的示例。

ES6/Babel

class Parent {
  constructor(){
    this.property = "Proppy";
  }
  doStuff() {
    console.log("doStuff");
  }
}

class ComponentA extends Parent {
  constructor() {
    super();
  }
}

var c = new ComponentA();

ES5

var Parent = function () {
    this.property = "Proppy";
}

Parent.prototype.doStuff = function () {
    console.log("doStuff");
}

function ComponentA () {
  Parent.call(this);
}

ComponentA.prototype = Object.create(Parent.prototype);
ComponentA.prototype.constructor = ComponentA;

var c = new ComponentA();

在您给出的示例中，您的ComponentA不会以同样的方式继承UltraFunctions()的原型，因为在覆盖其原型之后，您不会将ComponentA.prototype.constructor重置回ComponentA函数。

结果是一个ComponentA实例对象，它实际上不是ComponentA的实例，而是被ComponentA构造函数改变的UltraFunctions()的实例。

您可能会产生一些负面结果，因为一旦您将组件迁移到使用类语法，许多Object.prototype方法(如.hasOwnProptery )将不再像以前那样工作。

你的例子的另一个问题是“构造函数”拼写错误。这将导致巴别塔中的结果与您可能预期的不同。