es6 inheritance Detailed

ES6 by class keyword, define a class

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

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 _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 can see the bottom of the class or by the constructor to create.

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 _classCallCheck(this, Parent)statements, this sentence is to prevent you run directly by the constructor. 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. I think this is a very good specification, 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, is added directly to the constructor defineProperties(Constructor, staticProps). But seemingly did not use, the following can be proved.

These two processes go down, in fact, create a class.

Mentioned above it is to create a class of processes, how to achieve that ES6 inherit it? Or the above example, this time we have to Parentadd static properties, the prototype property, internal property

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"); } } var c = new Child("job",30); c.coding()

After the code has become such 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; var c = new Child("job", 30); c.coding(); 

We can see that the method of constructing the class have not changed, just add a _inheritscore way to implement inheritance, here we take a look at this method did what?

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

Next, subClass.__proto__ = superClass
_inheritsthe core idea is the following two

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

A picture is worth a thousand words

Why such a buy and sell, it realized the inheritance of it?
First,  subClass.prototype.__proto__ = superClass.prototypeto ensure that c instanceof Parentis true, Child instances can access to the properties of the parent class, including internal attributes, as well as prototype properties. Secondly, subClass.__proto__ = superClassto ensure that the Child.height also have access to, which is a static method.

subClass.__proto__ = superClassIs not well understood, it can be understood in the following way

function A(){}
var a = new A() a.__proto__ = A.prototype

a is an example, A.prototype is prototyping method. In this manner, it can be a way to access the above A.prototype.

That the subClass likened to a, superClass analogy to A.prototype, it is not subClass direct access to superClass static properties, static methods of.