Differences between ES6 inheritance and ES5 inheritance in js

Inheritance

ES5 prototype inheritance

Inheritance is achieved through the prototype chain (constructor + [[prototype]]). (Note: I will write __proto__ in the form of [[prototype]] in the future)
The prototype of a subclass is an instance of the parent class object. Therefore, the prototype object of the subclass contains a pointer to the prototype object of the parent class, and the instance attributes of the parent class are the attributes of the subclass prototype.

// Parent class: function SuperType; Subclass: function SubType;
SubType.prototype = new SuperType(); // SubType inherits SuperType

// According to the knowledge point mentioned in the previous section on prototype chain: the __proto__ of the instantiated object is equal to the prototype of the constructor
SubType.prototype.__proto__ === SuperType.prototype // true

The inheritance relationship above is as follows:

In terms of internal implementation mechanism, the inheritance of ES5 is actually to first create an instance object of the subclass on this, and then add the parent class method to this this. Similar usage: Father.apply(this)

ES6 class inheritance

Inheritance is achieved through class's extends + super.
The subclass does not have its own this object, so it must inherit the parent class's this object through super in the constructor, and then add methods and properties to this this object.
The super keyword in the constructor represents the constructor of the parent class and is used to create a new this object of the parent class.
In terms of internal implementation mechanism, the inheritance mechanism of ES6 is completely different. In essence, it first creates an instance object of the parent class this---it is necessary to call the super method in advance, and then use the subclass constructor to modify the this pointer.

Super usage

super can be used as a function and an object.
When used as a function, it can only be used in the constructor of a subclass - it represents the constructor of the parent class, but the this in super refers to the instance of the subclass, so in the subclass super() means Father.prototype.constructor.call(this).
When used as an object, super represents the prototype object of the parent class, that is, Father.prototype

The difference between the two

A: They are not exactly the same. There are several main differences:

1. The writing is different. Class inheritance is achieved through the extends keyword, super function and super method. (I won’t go into details about how to use super to implement inheritance)
2. Methods defined inside a class are not enumerable, but ES5 is different.
3. Classes do not have variable promotion, which is completely different from ES5
4. A class is equivalent to the prototype of an instance, and all methods defined in the class will be inherited by the instance. If you add the static keyword before a method, it means that the method will not be inherited by instances, but will be called directly through the class, which becomes a static method.
5. The internal implementation mechanisms are different.

ES5 prototype inheritance internal implementation

Inheritance in ES5 is essentially creating an instance object of the subclass this first, and then adding the parent class's method to the subclass (this) --- Father.apply(this).

ES6 class inheritance internal implementation

The inheritance mechanism of ES6 is completely different. In essence, it first creates an instance object this of the parent class, puts the properties and methods of the parent class on this (provided that it is called through the super function), and then uses the constructor of the child class to modify this.

Because of the different implementation mechanisms, these two types of inheritance have some differences when inheriting native constructors:

es5 writing cannot inherit native constructors (such as Array, Number, etc.)
Because the inheritance of es5 first creates the instance object this of the subclass, and then rewrites the properties and methods of the parent class prototype to the subclass. Since the internal properties of the parent class cannot be accessed, the inheritance method of es5 cannot inherit the native constructor.
es6 allows inheritance of constructors to generate subclasses. Because es6 first creates the instance object this of the parent class, and then modifies it with the constructor of the subclass, the subclass can inherit all the properties and methods of the parent class. Therefore, a class can inherit and customize the subclass of the native constructor. Extends can not only be used to inherit classes, but also to inherit native constructors, so it is possible to construct custom data structures based on native data structures.

Extensions

For a description of the internal implementation mechanism, please refer to the relevant section of "Ruan Yifeng's es6 Document - Class Inheritance"

This concludes this article about the differences between ES6 inheritance and ES5 inheritance in Java. For more information about the differences between ES6 inheritance and ES5 inheritance, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!