Babel.js 如何创建将类声明编译成 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 在 cmets 中所说，第一个是实例 - 因此“属性”被砸到实例中，而函数通过原型插入到“第一”级原型。所以，将我所说的一切替换为二级到一级，一级到实例。

Answer 1

ES6/Babel 类语法复制了与使用函数构造函数并覆盖原型时相同的原型模式。下面的例子一旦调用构造函数就会产生相同的实例对象。

ES6/巴别塔

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/巴别塔

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）将无法像以前那样工作。

您的示例的另一个问题是“构造函数”拼写错误。这将导致 Babel 中的结果与您的预期不同。

Answer 2

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

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

在 ES2015 中，这是一个非常简单的映射，因为 class 语法在第一个版本中被刻意保持非常基本（ES2016 打算对其进行扩展，但提案¹并没有完全实现，所以它们会在以后，可能是 ES2017 ES2018 ES2021 或 ES2022）。

class 允许我们定义：

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

所以这个：

// 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 成为构造函数
• 所有非constructor、非static的方法都成为原型方法
• static 方法分配给构造函数的属性
• 属性只是像往常一样的属性
• 创建对象以放在派生构造函数的prototype 属性上是通过Object.create(Base.prototype) 完成的，不是 new Base()。
• constructor 调用基本构造函数作为其第一个操作。
• 在 ES5 版本 (Base.prototype.baseMethod.call(this);) 中调用 super 的方法既麻烦又容易出错，这是新语法的一大优点

---

¹ 一些将显着扩展class 语法的提案：

• Class Public Instance Fields & Private Instance Fields
• Private instance methods and accessors
• Static class fields and private static methods

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