What is the difference between es6 inheritance and es5 inheritance?

The difference between es5 and es6 inheritance: ES5 inheritance is implemented through the prototype or constructor mechanism; it first creates a subclass, then instantiates the parent class and adds it to the subclass this. ES6 first creates the parent class, then instantiates the subset to access the parent class by calling the super method, and then implements inheritance by modifying this.

The operating environment of this tutorial is: windows7 system, ECMAScript 5&&ECMAScript 6 version, Dell G3 computer.

The difference between es6 inheritance and es5 inheritance

• Inheritance of ES5 essentially creates an instance object of the subclass first, and then Add 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 You must first call the super() method of the parent class), and then use the constructor of the subclass to modify this.

• Inheritance in ES5 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.

Note that the super keyword refers to an instance of the parent class, that is, the this object of the parent class.

Note: In the subclass constructor, the this keyword can only be used after calling super, otherwise an error will be reported.

1. Inheritance in es5:

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

Inherit the parent through subsets:

parent.call(child,1,2)

Let’s look at the underlying method of call. , the inheritance process is through the prototype attribute

child.prototype = new parent(1,2);

It can be seen that the essence of ES5 inheritance is to first create an instance object of the subclass element child, and then assign the attributes in the prototype object of the parent class element parent To the instance object of the subclass element child, thereby realizing inheritance

2. Inheritance in ES6

In traditional JS, objects are generated by creating constructors. Then define the generated object

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

and then add the corresponding required methods or attributes through prototype

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

. The concept of class, that is, class, was introduced in ES6. Objects are defined through the keyword class.

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

Receive the parameters passed in by the control method through the attribute constructor. 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:

• ES5 creates a subclass first, and then in the instance Transform the parent class and add it to the subclass this

• ES6 first creates the parent class, and after accessing the parent class by calling the super method in the instantiated subset, inheritance is realized by modifying this

[Recommended learning: javascript video tutorial]

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