ES6 has the concept of class. Class inheritance is implemented using extends. ES5 extends by setting the prototype property of the constructor. The following three demos will analyze the differences between them.

1. The ES5 inheritance

Directly on the code:

function A() {
  this.a = 'hello';
}

function B() {
  A.call(this);
  this.b = 'world';
}

B.prototype = Object.create(A.prototype, {
  constructor: { value: B, writable: true.configurable: true}});let b = new B();
Copy the code

Constructor B inherits constructor A from constructor B by first referring the __proto__ attribute from constructor B’s Prototype object to constructor A’s prototype object. Constructor (A); constructor (B); constructor (B); constructor (B); constructor (B); Let an instance of constructor B inherit the instance attributes of constructor A. To implement inheritance between two constructors in ES5, you only need to do these two steps. The following six diagrams are respectively the prototype chain and verification diagram of instance B, the prototype chain and verification diagram of constructor B, and the prototype chain and verification diagram of constructor A.

The prototype chain of example B is shown below:

Prototype chain verification diagram of Example B:

The prototype chain diagram of constructor B is shown below:

Prototype chain verification diagram of constructor B:

The prototype chain diagram of constructor A is shown below:

Prototype chain verification diagram of constructor B:

As can be seen from the above six figures, instance B of constructor B inherits the instance properties of constructor A, the properties of the prototype Object of constructor A, and the properties of the prototype Object of constructor Object. Constructor B is an instance of the constructor Function, inheriting properties from the prototype Object of the constructor Function, and inheriting properties from the prototype Object of the constructor Object. Constructor A is an instance of the constructor Function, inheriting properties from the prototype Object of the constructor Function, and inheriting properties from the prototype Object of the constructor Object. Constructor B extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends extends This is the first difference between ES6 and ES5 inheritance, which is illustrated by ES6 inheritance.

2. The ES6 inheritance

Directly on the code:

class A {
  constructor() {
    this.a = 'hello'; }}class B extends A {
  constructor() {
	super(a);this.b = 'world'; }}let b = new B();
Copy the code

In the code, class B inherits the properties of class A and the properties of its prototype object via the extends keyword. Instances of class B inherit the instance properties of class A by performing the super() function from class B’s constructor function. Super () acts like a.call (this) in constructor B, but there is a difference. This is the second difference between ES6 and ES5 inheritance, which will be explained at the end of this article. In ES6, inheritance between two classes is implemented using the extends and super keywords. The following four pictures are respectively the prototype chain and verification diagram of instance B and the prototype chain and verification diagram of class B.

The prototype chain of example B is shown below:

Prototype chain verification diagram of Example B:

The prototype chain diagram of class B is shown below:

Prototype chain verification diagram of class B:

As can be seen from the above 4 figures, in ES6 and ES5, the prototype chain of instance B of class B is the same as that of instance B of constructor B, but in ES6, class B inherits the attributes of class A, and in ES5, constructor B does not inherit the attributes of constructor A. This is the first difference between ES6 and ES5 inheritance.

3. The difference between super() and a. Call (this)

In ES5, instances of constructor B inherit instance attributes of constructor A through a.call (this). In ES6, instances of class B inherit instance attributes of class A through super(). Without inheriting native constructors, a.call (this) is functionally no different from super(), which translates class inheritance into ES5 syntax using the Babel online conversion, which also emulates super() through A.call(this). In ES5, a.call (this) in a.call (this) is an instance of constructor B. In ES6, we create a new instance of this, and then modify this with the constructor of the subclass, so that all the behavior of the parent class can be inherited. The following two pieces of code illustrate this problem.

Code 1:

function MyArray() {
  Array.call(this);
}

MyArray.prototype = Object.create(Array.prototype, {
  constructor: {
    value: MyArray,
    writable: true,
    configurable: true}}); var colors = new MyArray(); colors[0] ="red";
colors.length;
Copy the code

The idea behind this code is to let the constructor MyArray inherit from the native constructor Array, and then verify that instances of MyArray have the properties of Array instances.

The execution result of code 1 is shown as follows:

As you can see from the results, instances of MyArray do not have the properties of Array instances. This happens because instances of MyArray cannot get the internal properties of the native constructor Array instance, nor through array.call (this).

Code 2:

class MyArray extends Array {
  constructor() {
    super();
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length;
Copy the code

The result of code 2 is shown below:

As you can see from the result, with super(), instances of MyArray have the properties of Array instances.

4. To summarize

There are two differences between inheritance in ES6 and ES5. First, in ES6, subclasses inherit attributes from their parent class. Second, super() is different from a.call (this), which is obvious in the case of inheriting native constructors. An instance of a subclass in ES6 can inherit the internal properties of a native constructor instance, which is not possible in ES5.