The implementation process of inheritance and the difference between Es5 and ES6 implementation

ES5 See this article for the inheritance method of ：ES5 The idea of writing inheritance

ES5 And ES6 Inheritance method comparison of ：

ES5

function Parent() {
    
    this.name = 'parent';
    this.arr = [1,2,3,4];
}
Parent.prototype.say = function () {
    
    console.log('say');
};
function Child(age) {
    
    Parent.call(this);
    this.age = age;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var c = new Child(12);
console.log(c.name); // Output parent
c.say(); // Output say
console.log(c.constructor); // Output function Child(age) {Parent.call(this);this.age = age;}
console.log(new Parent().constructor); // Output Parent() {this.name = 'parent';this.arr = [1,2,3,4];}

ES6

class Parent2 {
    
    constructor() {
    
        this.name = 'parent';
    }
}
Parent2.prototype.say = function () {
    
    console.log('say');
};
class Child2 extends Parent {
    
    constructor(age) {
    
        super();
        this.age = age;
    }
}
var c2 = new Child2(12);
console.log(c2.name); // Output parent
c2.say(); // Output say
console.log(c.constructor); // Output function Child(age) {Parent.call(this);this.age = age;}
console.log(new Parent().constructor); // Output Parent() {this.name = 'parent';this.arr = [1,2,3,4];}

1. ES5 The essence of inheritance is to create instance objects of subclasses first , Then add the method of the parent class to this On （Parent.apply(this)）, Then inherit the prototype chain .
2. ES6 The inheritance mechanism is quite different , In essence, you create an instance object of the parent class first this（ So you have to call the parent class's super() Method , Just can use this keyword , Otherwise, the report will be wrong .）, And then modify it with the constructor of the subclass this Implementation inheritance .

ps：es5 And the following cannot be inherited perfectly array, Relevant contents can be searched by yourself