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的假设是否正确.特别是如上所述创建两级原型的事实.

更新

对不起,我了解了第一个原型!正如@TJCrowder在评论中所说的那样,第一个是实例 - 因此"属性"被粉碎到实例中,而函数通过原型插入到"第一"级原型中.所以,用第二级替换我说的第一级和第一级到实例.

Answer 1

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

Babel使用了很多辅助函数,或者我会说"只看看已编译的结果".:-)

使用ES2015,它是一个非常简单的映射,因为class语法是故意保持这个第一个版本的基本(ES2016将扩展它,但提案并没有完全成功,所以他们将会更晚,可能是ES2017).

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 将基础构造函数作为其第一个操作调用.
• 调用superES5版本(Base.prototype.baseMethod.call(this);)中的方法既麻烦又容易出错,这是新语法的一大优点