Babel.js如何创建编译ES2015的类声明？ [英] How does Babel.js create compile a class declaration into ES2015?

问题描述

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

My current mission is to convert a JavaScript component ES5 to ES6 (compiled with Babel.js). Before using classes and Babel.js we prototyped to get functions from other components.

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

现在使用Babel.js并转动ComponentA进入一个类

Now when using Babel.js and turning ComponentA into a class

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

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

What happens now when I analyse this Component after instantiating it is that I see two level of prototypes now. The first prototype holds "property" - the second one, which is nested into the first one holds all function in this case "doStuff". That brings up problems with legacy components which should not be converted to classes (yet). Because these components are being put in through the second level prototype they override the prototype which holds the functions of the "synthetic" class compiled by Babel.js.

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

I am not asking for a solution. I just want to get sure if I am right with the assumption Babel.js converts the classes to ES5 JavaScript. Especially the fact of creating two level prototypes as mentioned above.

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

I'm sorry I miunderstood the first prototype! as @T.J.Crowder said in the comments the first is the instance - therefore "property" is being smashed into the instance while the functions are being inserted through prototyping to the "first" level prototype. So, replace everything what I said with second level to first level and first level to instance.

推荐答案

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

I just want to discuss how Babel.js converts a class to ES5 Javascript.

Babel使用了很多帮助函数，或者我说只看看已编译的结果。 ： - ）

Babel uses a lot of helper functions, or I'd say "just look at the transpiled result." :-)

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

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).

class 允许我们定义：

• 构造函数（通过 class 和构造函数）


• 构造函数的原型对象的原型（通过 extends ）


• 放置构造函数的方法 prototype object


• 放置构造函数本身的方法（ static ）


• 一种方法简明扼要地引用基础类构造函数及其原型信息

• The constructor function (via class and constructor)
• The constructor function's prototype object's prototype (via extends)
• Methods to put on the constructor function's prototype object
• Methods to put on the constructor function itself (static)
• A means of referencing the base "class" constructor and its prototype information concisely and portably

所以这个：

// 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中写的东西（如果我们没有这样使用任何辅助函数：

becomes what we might write in ES5 (if we didn't use any helper functions) like this:

// 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);
};

以上注意事项：

• 构造函数成为构造函数


• 所有非构造函数，非 - 静态方法成为原型方法


• static 方法是分配给构造函数的属性


• 属性只是常用属性


• 创建要放在原型上的对象派生构造函数的属性是通过 Object.create（Base.prototype），不 new Base（）。


• constructor 将基础构造函数作为第一个动作调用。


• 调用ES5版本中的 super 的方法（ Base.prototype.baseMethod.call（this）; ）很麻烦且容易出错，这是关于新语法的好处之一

• constructor becomes the constructor function
• All non-constructor, non-static methods become prototype methods
• static methods are assigned to properties on the constructor function
• Properties are just properties as usual
• Creating the object to put on the prototype property of a derived constructor function is done via Object.create(Base.prototype), not new Base().
• constructor calls the base constructor as its first action.
• Calls to the super's methods in the ES5 version (Base.prototype.baseMethod.call(this);) are cumbersome and error-prone, one of the great things about the new syntax

这篇关于Babel.js如何创建编译ES2015的类声明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！