preface

【ES6】 The basic syntax of a class. This article is about class inheritance.

ES5’s cumbersome inheritance approach – composite inheritance

An example of combinatorial inheritance:


function Super(name, age) {
    this.name = name;
    this.age = age;
}
function Sub(name, age, sex) {
    Super.call(this, name, age);
    this.sex = sex;
}
// Prototype inheritance
Sub.prototype = new Super();
// constructor pointer
Sub.prototype.constructor = Sub;
Copy the code

The class inheritance

  • Keywords – extends

For example:

class Point {}class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x,y);
        this.color = color
    }
}
Copy the code
  • Inheritance without constructor
class ColorPoint extends Point {}/ / is equivalent to
class ColorPoint extends Point {
  constructor(... args) {super(...args);
  }
}
Copy the code
  • Static methods of the parent class are also inherited by subclasses
class A {
  static hello() {
    console.log('hello world'); }}class B extends A {
}

B.hello()
// hello world
Copy the code
  • Keywords – super

Super represents the superclass constructor, but returns an instance of the subclass. Such as the parent of A is B, then the function of the super equivalent to Amy polumbo rototype) constructor. Call (this).

Super can be used in the following ways: 1. 2. When the object is used

Class A {} class B extends A {constructor() { super(); }}Copy the code
// When the object uses class A {p() {
    return 2;
  }
}

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

When the object is used, it is equivalent to referring to a method on prototype A.

The prototype and class__proto__methods

In ES5, the __proto__ corresponding to each instance refers to the prototype method of the corresponding constructor.

In class, there are two chain-level relationships, respectively

  • A subclass__proto__Points to the parent class
  • Of the prototype property__proto__The Prototype property pointing to the parent class
class A {}class B extends A {
}

B.__proto__ === A    // true
B.prototype.__proto__ === A.prototype  // true
Copy the code

The overall relationship is shown in the figure:

Analyze the principles of class inheritance from stereotype to stereotype

Next, we will get the direction of prototype chain from the principle of inheritance.

Before we talk about inheritance, let’s look at a syntactic sugar — object.setprototypeof ()

It sets the stereotype of a specified object to another object or null.

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

Class inheritance patterns follow the syntax above.

class A {}class B {}// Instance B inherits instance A
Object.setPrototypeOf(B.prototype, A.prototype);

// B inherits A's static attributes
Object.setPrototypeOf(B, A);

const b = new B();
Copy the code

So we can get the following results:

B.__proto__ === A    // true
B.prototype.__proto__ === A.prototype  // true
Copy the code

The instance__proto__methods

The __proto__ of a subclass instance points to the __proto__ of its parent class. That is, the stereotype of the subclass instance points to the stereotype of the superclass instance

class A {}class B extends A {}const a = new A();
const b = new B();

b.__proto__.__proto__ === a.__proto__  // true
Copy the code

Modifying the stereotype of a subclass instance affects the stereotype of a superclass instance.

conclusion

This is the end of class inheritance!! The next article will clean up the proxy syntax sugar, which is also used by proxies in VUe3.0.