Inheritance of ES6 Class

1. Introduction

Class can be inherited through 继承 Class keyword, which is much clearer and easier than ES5's implementation of inheritance by modifying the prototype chain. extends

class Point {
}
class ColorPoint extends Point {
}

The code above defines a ColorPoint class that inherits all the properties and methods of the Point class through the extends keyword. H owever, because no code was deployed, the two classes were exactly the same, equivalent to copying a Point class. Below, let's add code inside ColorPoint.

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }
  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

In the above code, the super keyword appears in both the constructor method and the toString method, which here represents the constructor of the parent class and is used to create the this object of the parent class.

The sub-class must call the super method in the constructor method, otherwise an error will be reported when the new instance is created. T his is because the child class's own this object must first be shaped through the constructor of the parent class, get the same instance properties and methods as the parent class, and then process it, plus the child class's own instance properties and methods. If you don't call the super method, the sub-class won't get the this object.

class Point { /* ... */ }
class ColorPoint extends Point {
  constructor() {
  }
}
let cp = new ColorPoint(); // ReferenceError

In the code above, ColorPoint inherits the parent class Point, but its constructor does not call the super method, causing the new instance to report an error.

Inheritance of ES5 essentially creates the instance object this of the child class before adding the method of the parent class to this (Parent.apply(this). ES6's inheritance mechanism is completely different, essentially adding the properties and methods of the parent class instance object to this (so the super method must be called first), and then modifying this with the constructor of the sub-class.

If the sub-class does not define the constructor method, it is added by default, as follows. That is, any sub-class has a constructor method, with or without an explicit definition.

class ColorPoint extends Point {
}
// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

Another thing to note is that in the constructor of the sub-class, the this keyword can only be used after the super is called, otherwise an error will be reported. This is because the child class instance is built, and based on the parent class instance, only the super method can call the parent class instance.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

In the above code, the constructor method of the sub-class uses the this keyword before it is called super, and the result is incorrect, and it is correct to put it after the super method.

Here's the code that generated the sub-class instance.

let cp = new ColorPoint(25, 8, 'green');
cp instanceof ColorPoint // true
cp instanceof Point // true

In the code above, instance object cp is an instance of both ColorPoint and Point classes, which is exactly the same as ES5 behaves.

Finally, the static method of the parent class is also inherited by the child class.

class A {
  static hello() {
    console.log('hello world');
  }
}
class B extends A {
}
B.hello()  // hello world

In the above code, hello() is a static method of Class A, and B inherits A, which also inherits the static method of Class A.

2. Object.getPrototypeOf()

Object.getPrototypeOf can be used to get the parent class from a child class.

Object.getPrototypeOf(ColorPoint) === Point
// true

Therefore, you can use this method to determine whether one class inherits another.

3. Super keyword

super keyword super can be used 函数 a function nor as 对象 object. In both cases, it is used in completely different ways.

In the first case, super is called as a function and represents the constructor of the parent class. ES6 requires that the constructor of the sub-class perform the super function once.

class A {}
class B extends A {
  constructor() {
    super();
  }
}

In the code above, super() in the constructor of sub-class B represents the constructor that calls the parent class. This is necessary, otherwise the JavaScript engine will report an error.

Note that super represents the constructor of parent class A, but returns an instance of sub-class B, that is, this inside super refers to an instance of B, so super() is here equivalent to A.prototype.constructor.call (this).

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

In the code above, new.target points to a function that is currently executing. A s you can see, when super() executes, it points to the constructor of sub-class B, not the constructor of parent class A. That is, this inside super() points to B.

As a function, super() can only be used in the constructors of sub-classes, and errors are reported elsewhere.

class A {}
class B extends A {
  m() {
    super(); // 报错
  }
}

In the above code, super() is used in the m method of Class B, resulting in a syntax error.

In the second case, when super is an object, in the normal method, it points to the prototype object of the parent class, and in a static method, to the parent class.

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}
let b = new B();

In the above code, super.p() in sub-class B is used as an object. At this point to A.prototype in the normal method, super.p() is equivalent to A.prototype.p().

It is important to note here that because super points to the prototype object of the parent class, methods or properties defined on the parent class instance cannot be called through super.

class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined

In the code above, p is the property of the parent class A instance, which super.p does not reference.

If the property is defined on the prototype object of the parent class, super is accessed.

class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();

In the code above, property x is defined above A.prototype, so super.x can get its value.

ES6 states that when a method of the parent class is called through super in a child class normal method, this inside the method points to the current child class instance.

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}
class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}
let b = new B();
b.m() // 2

In the above code, super.print() calls A.prototype.print(), but the this inside A.prototype.print() points to an instance of sub-class B, resulting in an output of 2 instead of 1. That is, the super.print.call (this) is actually performed.

Because this points to a sub-class instance, if you assign a value to a property through super, super is this, and the assigned property becomes the property of the sub-class instance.

class A {
  constructor() {
    this.x = 1;
  }
}
class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}
let b = new B();

In the code above, super.x is assigned 3, which is equivalent to this.x is assigned 3. And when you read super.x, you read A.prototype.x, so you return undefined.

If super is used as an object in a static method, it points to the parent class, not the prototype object of the parent class.

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }
  myMethod(msg) {
    console.log('instance', msg);
  }
}
class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }
  myMethod(msg) {
    super.myMethod(msg);
  }
}
Child.myMethod(1); // static 1
var child = new Child();
child.myMethod(2); // instance 2

In the above code, super points to the parent class in a static method and to the parent's prototype object in the normal method.

In addition, when the method of the parent class is called through super in the static method of the child class, this inside the method points to the current child class, not to the instance of the child class.

class A {
  constructor() {
    this.x = 1;
  }
  static print() {
    console.log(this.x);
  }
}
class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  static m() {
    super.print();
  }
}
B.x = 3;
B.m() // 3

In the code above, static method B.m inside, super.print points to the static method of the parent class. This in this method points to an instance of B, not B.

Note that when using super, you must explicitly specify whether to use it as a function or as an object, or an error will be reported.

class A {}
class B extends A {
  constructor() {
    super();
    console.log(super); // 报错
  }
}

In the code above, the super .log in console is not clear whether to use as a function or as an object, so the JavaScript engine reports errors when it parses code. At this point, if the data type of super is clearly indicated, no errors are reported.

class A {}
class B extends A {
  constructor() {
    super();
    console.log(super.valueOf() instanceof B); // true
  }
}
let b = new B();

In the code above, super.valueOf() indicates that super is an object, so no errors are reported. At the same time, because super makes this point to an instance of B, super.valueOf() returns an instance of B.

Finally, because objects always inherit other objects, you can use the super keyword in either object.

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};
obj.toString(); // MyObject: [object Object]

4. The class's prototype property and proto property

In most browsers' ES5 implementations, each object has __proto__ property that points to the prototype property of the prototype Class the syntax 语法糖 constructor, with both the prototype property and the proto property, so there are two inheritance chains at the same time.

(1) The proto property of the sub-class, which represents the inheritance of the constructor, always points to the parent class.

(2) The proto property of the child class prototype property, which represents the inheritance of the method and always points to the prototype property of the parent class.

class A {
}
class B extends A {
}
B.__proto__ === A // true
B.prototype.__proto__ === A.prototype // true

In the above code, the proto property of the child class B points to the parent class A, and the proto property of the prototype property of the child class B points to the prototype property of the parent class A.

This results because the inheritance of the class is implemented in the following pattern.

class A {
}
class B {
}
// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);
// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);
const b = new B();

The Extended Object chapter gives an implementation of the Object.setPrototypeOf method.

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}

So you get the results above.

Object.setPrototypeOf(B.prototype, A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;
Object.setPrototypeOf(B, A);
// 等同于
B.__proto__ = A;

These two inheritance chains make it understandable that, as an object, the prototype of the child class (B) (proto property) is the parent class (A), and as a constructor, the prototype object (prototype property) of the child class (B) is an instance of the prototype object (the prototype property) of the parent class.

B.prototype = Object.create(A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;

The extends keyword can be followed by several types of values.

class B extends A {
}

A in the code above, as long as it is a function with the prototype property, can be inherited by B. Because functions have prototype properties (except function.prototype functions), A can be any function.

Let's discuss two scenarios. First, the sub-class inherits the Object class.

class A extends Object {
}
A.__proto__ === Object // true
A.prototype.__proto__ === Object.prototype // true

In this case, A is actually a copy of the constructor Object, and an instance of A is an instance of Object.

In the second case, there are no inheritances.

class A {
}
A.__proto__ === Function.prototype // true
A.prototype.__proto__ === Object.prototype // true

In this case, A, as a base class (i.e. without any inheritance), is a normal function, so it inherits Function.prototype directly. H owever, A calls back an empty object (that is, an Object instance), so A.prototype. Proto points to the prototype property of the constructor (Object).

The proto property of the instance

子类 proto property of the proto property of the child class instance, pointing to the proto property of the parent class instance. That is, the prototype of the child class is the prototype of the parent class.

var p1 = new Point(2, 3);
var p2 = new ColorPoint(2, 3, 'red');
p2.__proto__ === p1.__proto__ // false
p2.__proto__.__proto__ === p1.__proto__ // true

In the code above, ColorPoint inherits Point, resulting in the former prototype being the latter prototype.

Therefore, through the proto . Proto property, you can modify the behavior of the parent class instance.

p2.__proto__.__proto__.printName = function () {
  console.log('Ha');
};
p1.printName() // "Ha"

The code above adds a method to the Point class on instance p2 of ColorPoint, and the result affects instance p1 of Point.

5. Inheritance of the native constructor

原生构造 that are built into a language and are typically used to 数据结构 EcMAScript's native constructors are roughly the following.

Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()

Previously, these native constructors could not be inherited, for example, they could not define a sub-class of Array themselves.

function MyArray() {
  Array.apply(this, arguments);
}
MyArray.prototype = Object.create(Array.prototype, {
  constructor: {
    value: MyArray,
    writable: true,
    configurable: true,
    enumerable: true
  }
});

The code above defines a MyArray class that inherits Array. However, the behavior of this class is completely inconsistent with Array.

var colors = new MyArray();
colors[0] = "red";
colors.length  // 0
colors.length = 0;
colors[0]  // "red"

This happens because sub-classes cannot obtain the internal properties of the native constructor, either through Array.apply() or assigned to prototype objects. The native constructor ignores the this passed in by the apply method, which means that the native constructor's this cannot be bound, resulting in no internal properties.

ES5 is an instance object of a new child class, this, and then adds the properties of the parent class to the child class, which cannot inherit the native constructor because the internal properties of the parent class cannot be obtained. For example, the Array constructor has an internal property, DefineOwnProperty, that updates the length property when defining a new property, which cannot be obtained in a sub-class, causing the length property of the sub-class to behave abnormally.

In the following example, we want a normal object to inherit the Error object.

var e = {};
Object.getOwnPropertyNames(Error.call(e))
// [ 'stack' ]
Object.getOwnPropertyNames(e)
// []

In the code above, we want to make the normal object e have instance properties of the Error object by writing error.call(e). H owever, Error.call() completely ignores the first incoming argument and returns a new object, e itself without any change. This proves that Error.call(e) cannot inherit the native constructor.

ES6 allows the inherited native constructor to define the child class, because ES6 is the instance object this that first creates the parent class, and then decorates this with the constructor of the child class, so that all the behavior of the parent class can be inherited. Here is an example of inheriting Array.

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}
var arr = new MyArray();
arr[0] = 12;
arr.length // 1
arr.length = 0;
arr[0] // undefined

The code above defines a MyArray class that inherits the Array constructor so that an instance of the array can be generated from MyArray. This means that ES6 can customize sub-classes of native data structures (such as Array, String, etc.), which ES5 cannot do.

The above example also shows that the extends keyword can be used not only to inherit classes, but also to inherit native constructors. T herefore, you can define your own data structure on the basis of the native data structure. Here's an array with version functionality.

class VersionedArray extends Array {
  constructor() {
    super();
    this.history = [[]];
  }
  commit() {
    this.history.push(this.slice());
  }
  revert() {
    this.splice(0, this.length, ...this.history[this.history.length - 1]);
  }
}
var x = new VersionedArray();
x.push(1);
x.push(2);
x // [1, 2]
x.history // [[]]
x.commit();
x.history // [[], [1, 2]]
x.push(3);
x // [1, 2, 3]
x.history // [[], [1, 2]]
x.revert();
x // [1, 2]

In the above code, VersionedArray generates a version snapshot of its current state via the commit method and places it in the history property. T he revert method is used to reset the array to the most recently saved version. In addition, VersionedArray is still a normal array on which all native array methods can be called.

The following is an example of a custom Error sub-class that can be used to customize the behavior when an error is reported.

class ExtendableError extends Error {
  constructor(message) {
    super();
    this.message = message;
    this.stack = (new Error()).stack;
    this.name = this.constructor.name;
  }
}
class MyError extends ExtendableError {
  constructor(m) {
    super(m);
  }
}
var myerror = new MyError('ll');
myerror.message // "ll"
myerror instanceof Error // true
myerror.name // "MyError"
myerror.stack
// Error
//     at MyError.ExtendableError
//     ...

Note that there is a behavioral difference between inheriting a sub-class of Object.

class NewObj extends Object{
  constructor(){
    super(...arguments);
  }
}
var o = new NewObj({attr: true});
o.attr === true  // false

In the code above, NewObj inherits Object, but cannot pass a reference to the parent class Object through the super method. This is because ES6 changes the behavior of the Object constructor, and once it is discovered that the Object method is not called in the form of new Object(), ES6 states that the Object constructor ignores the arguments.

6. Implementation of the Mixin pattern

Mixin to the synthesis of multiple objects into a new object with interfaces for each member. Its simplest implementation is as follows.

const a = {
  a: 'a'
};
const b = {
  b: 'b'
};
const c = {...a, ...b}; // {a: 'a', b: 'b'}

In the code above, the c object is a object and a composition of the b object, with an interface between the two.

Here's a more complete implementation that "mixes" interfaces from multiple classes into another class.

function mix(...mixins) {
  class Mix {
    constructor() {
      for (let mixin of mixins) {
        copyProperties(this, new mixin()); // 拷贝实例属性
      }
    }
  }
  for (let mixin of mixins) {
    copyProperties(Mix, mixin); // 拷贝静态属性
    copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
  }
  return Mix;
}
function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== 'constructor'
      && key !== 'prototype'
      && key !== 'name'
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}

The mix function of the above code, you can combine multiple objects into one class. When used, simply inherit the class.

class DistributedEdit extends mix(Loggable, Serializable) {
  // ...
}

Table of contents