What is the difference between inheritance in es5 and es6

The difference between es5 and es6 inheritance is: es5 first creates a subclass, instantiates the parent class and adds it to the subclass this to achieve inheritance; while es6 creates the parent class first, and instantiates the subclass by calling super After the method accesses the parent class, it implements inheritance by modifying this.

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the difference between inheritance in es5 and es6

Inheritance in ES5 essentially creates an instance object of the subclass first, and then adds the method of the parent class to this (Parent.apply( this)).

The inheritance mechanism of ES6 is completely different. In essence, the instance object this of the parent class is created first (so the super() method of the parent class must be called first), and then the constructor of the subclass is used. Modify this.

ES5 inheritance is implemented through the prototype or constructor mechanism.

ES6 defines a class through the class keyword, which has a constructor method, and inheritance between classes is achieved through the extends keyword. Subclasses must call the super method in the constructor method, otherwise an error will be reported when creating a new instance. Because the subclass does not have its own this object, but inherits the this object of the parent class and then processes it. If the super method is not called, the subclass cannot get the this object.

Inheritance in ES6

In traditional JS, the object is generated by creating a constructor, and then defining the generated object

function parent(a,b){
    this.a = a;
    this.b = b;
}

and then adding it through prototype Corresponding to the required method or attribute

parent.prototype.methods = function(){
    return 'this is test methods';
}
parent.prototype.attr = 'this is test attr‘;

And ES6 introduced the concept of class, that is, class. Objects are defined through the keyword class.

Class is a keyword, language sugar, so that you can understand the created object more clearly.

Use the attribute constructor to receive the parameters passed in by the control method. If you do not write this attribute, The default is no parameters

class parent{
    curstructor(a,b){
        this.a = a;
        this.b = b;
    }
}

Inheritance in ES6 is based on inheritance between classes. This is achieved through the keyword extends.

Calling the parent class through super instantiation

class parent{
　　constructor(a,b){
　　　　this.a = a;
　　　　this.b = b;
　　}
　　parentMethods(){
　　　　return this.a + this.b
　　}
}
class child extends parent{
　　constructor(a,b,c){
　　　　super(a,b);
　　　　this.c = c;
　　}
　　childMethods(){
　　　　return this.c + ',' + super.parentMethods()
　　}
}
const point = new child(1,2,3);
alert(point.childMethods());

The above code is a simple set of ES6 parent-child class inheritance.

I believe you have seen it, although the obvious difference is that in ES6, it is the super method that activates the parent component, rather than creating a new instantiation. In other words, the instance object of the parent class is created first. After the call, modify this in the constructor of the subclass to complete the prototype object.

Summary:

The biggest difference between ES5 and ES6 inheritance is:

1. ES5 first creates the subclass, and then instantiates the parent class and Add to subclass this

2.ES6 first creates the parent class, and after accessing the parent by calling the super method in the instantiated subset, realizes inheritance by modifying this

[Related recommendations: javascript video tutorial、web front-end】

The above is the detailed content of What is the difference between inheritance in es5 and es6. For more information, please follow other related articles on the PHP Chinese website!