The principle of the class of ES6

First, the implementation class and inheritance ES6 ago

　　Implementation class code as follows:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.speakSomething = function () {
    console.log("I can speek chinese");
};

　　Inheritance of the code as follows: Usually prototype inheritance chain and call inherited form of a mixture

function the Person (name) {
     the this .name = name; 
} 

Person.prototype.showName = function () {
     return `name: $ { the this .name`}; 
}; 

function Student (name, skill) { 
    Person.call ( the this , name); // inherited attribute 
    the this .skill = skill; 
} 

Student.prototype = new new the Person (); // inherited methods

Two, ES6 using the class definition of class

class Parent {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speakSomething(){
        console.log("I can speek chinese");
    }
}

　　After babel transcoding

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Parent = function () {
    function Parent(name, age) {
        _classCallCheck(this, Parent);

        this.name = name;
        this.age = age;
    }

    _createClass(Parent, [{
        key: "speakSomething",
        value: function speakSomething() {
            console.log("I can speek chinese");
        }
    }]);

    return Parent;
}();

　　ES6 class can see the bottom or through the constructor to create the.

　　 ES6 created by the class, you are not allowed to directly call. In ES5, the constructor can be run directly, for example Parent(). But it is not the ES6. We can see that the constructor has transcoding statements, this sentence is to prevent you run directly by the constructor_classCallCheck(this, Parent) . You directly ES6 run Parent(), which is not allowed, ES6 thrown Class constructor Parent cannot be invoked without 'new'error. Throws transcoded Cannot call a class as a function. Can use standardized class.

　　Transcoding _createClassmethod, which calls Object.definePropertythe method to go to the newly created Parentadd various attributes . defineProperties(Constructor.prototype, protoProps)The prototype is to add properties. If you have a static properties, will be added directly to the constructor defineProperties(Constructor, staticProps)上.

Three, ES6 inheritance

　　We have to Parentadd static properties, the prototype property, internal attributes.

class Parent {
    static height = 12
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speakSomething(){
        console.log("I can speek chinese");
    }
}
Parent.prototype.color = 'yellow'


//定义子类，继承父类
class Child extends Parent {
    static width = 18
    constructor(name,age){
        super(name,age);
    }
    coding(){
        console.log("I can code JS");
    }
}

　　After babel transcoding

"use strict";

var _createClass = function () {
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
        }
    }

    return function (Constructor, protoProps, staticProps) {
        if (protoProps) defineProperties(Constructor.prototype, protoProps);
        if (staticProps) defineProperties(Constructor, staticProps);
        return Constructor;
    };
}();

function _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Parent = function () {
    function Parent(name, age) {
        _classCallCheck(this, Parent);

        this.name = name;
        this.age = age;
    }

    _createClass(Parent, [{
        key: "speakSomething",
        value: function speakSomething() {
            console.log("I can speek chinese");
        }
    }]);

    return Parent;
}();

Parent.height = 12;

Parent.prototype.color = 'yellow';

//定义子类，继承父类

var Child = function (_Parent) {
    _inherits(Child, _Parent);

    function Child(name, age) {
        _classCallCheck(this, Child);

        return _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name, age));
    }

    _createClass(Child, [{
        key: "coding",
        value: function coding() {
            console.log("I can code JS");
        }
    }]);

    return Child;
}(Parent); 

Child.width = 18;

　　Method of constructing a class have not changed, just add a _inheritscore way to implement inheritance . Specific steps are as follows:

　　First, determine the type of the parent class, then:

subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });

　　This code is translated down

function F(){}
F.prototype = superClass.prototype
subClass.prototype = new F()
subClass.prototype.constructor = subClass

　　The next step is subClass .__ proto__ = superClass

　　_inheritsThe core idea is the following two sentences:　　

subClass.prototype.__proto__ = superClass.prototype
subClass.__proto__ = superClass

　　As shown below:

　　First,  subClass.prototype.__proto__ = superClass.prototypeto ensure that the instance of a subclass of instanceof父类true, the instance of a subclass can access the property of the parent class, including internal attributes, and the prototype attributes .

　　Secondly, subClass.__proto__ = superClassto ensure that the static properties also have access to, that is, in this example Child.height.