JS inheritance mode

Definition of inheritance

Object A directly owns all properties and methods of object B by inheriting from object B.

Prototype chain inheritance

Use an instance of a parent class as a prototype for a subclass

/ / parent class
function Parent(name) {
  this.name = name || 'The Cook';
  this.run = function () {
    console.log(this.name + 'nothing');
  }
}
Parent.prototype.say = function () {
  console.log('I am' + this.name);
}
/ / subclass
function Child() {};// Use an instance of the parent class as a prototype for the subclass
Child.prototype = new Parent();

// An instance of a subclass
let child1 = new Child();
child1.say(); // I am a breadwinner
child1.run(); // No one can do the work
Copy the code

Existing problems:

• Properties of stereotype objects (reference types) are shared by all instances
• Create a subclass instance (child1The parent class constructor (Parent) the participation

Inheritance by constructor

Used in subclass constructorscall()Call the parent type constructor

function Parent(name) {
  this.name = name || 'The Cook';
  this.run = function () {
    console.log(this.name + 'nothing'); }}// The generic call() in the subclass constructor calls the parent type constructor
function Child (name) {
  Parent.call(this, name);
}
let child1 = new Child('Is it time? ');
child1.run(); // What time is it? rice
Copy the code

Advantages:

• Properties of reference types are prevented from being shared by all instances
• Can be found inChildTo theParentThe ginseng

disadvantages

• Only instance properties and methods of the parent class can be inherited, not stereotype properties/methods
• Function reuse is not possible and methods are created every time an instance is created

Combination of inheritance

The core is to inherit the attributes of the parent class and retain the advantages of passing parameters by calling the parent class construct, and then reuse functions by using the parent class instance as the prototype of the subclass

function Parent(name) {
  this.name = name || 'The Cook';
  this.run = function () {
    console.log(this.name + 'nothing');
  }
}
Parent.prototype.say = function () {
  console.log('I am' + this.name);
}
function Child (name, time) {
  Parent.call(this) inherits attributes from the Parent class in the constructor of the subclass
  Parent.call(this, name);
  this.time = time || 'Twelve o 'clock';
}
// Change the prototype of the subclass to new Parent() to inherit the functions of the Parent class
Child.prototype = new Parent();
let child1 = new Child('Soul of Dried Rice'.'7');
child1.run(); // Dry rice soul dry rice
child1.say(); / / nothing
console.log(child1.time); / / at 7 o 'clock
Copy the code

Advantages:

• You can inherit instance properties/methods as well as stereotype properties/methods
• There is no reference property sharing problem
• Can pass the cords
• Function reuse

Disadvantages:

• There are two identical properties on the created instance and the prototype (in this case:run 和 name)

Parasitic combinatorial inheritance

This approach optimizes the fact that the parent constructor is called twice in composite inheritance

The core is to assign the prototype of the parent class to the child class, and set the constructor to the child class, which not only solves the problem of useless parent class attributes, but also can correctly find the constructor of the child class

function Parent(name) {
  this.name = name || 'The Cook';
  this.run = function () {
    console.log(this.name + 'nothing');
  }
}
Parent.prototype.say = function () {
  console.log('I am' + this.name);
}
function Child (name, time) {
  Parent.call(this) inherits attributes from the Parent class in the constructor of the subclass
  Parent.call(this, name);
  this.time = time || 'Twelve o 'clock';
}
Child.prototype = Object.create(Parent.prototype); / / core
Child.prototype.constructor = Child; / / core

let child1 = new Child('Soul of Dried Rice'.'at eight o 'clock);
child1.run(); // Dry rice soul dry rice
child1.say(); / / nothing
console.log(child1.time); At eight o 'clock / /
Copy the code

It’s a perfect inheritance.

Classinheritance

In fact, there is no class in JS, class is just syntactic sugar, or function.

class Person {}
typeof Person; // function
Copy the code

The core of class implementation inheritance is the use of extends to indicate which Parent class it inherits from, and you must call super in the subclass constructor because this code can be viewed as parent.call (this, value).

class Parent {
  // Call the class constructor
  constructor(name) {
    this.name = name || 'The Cook';
  }
  run() {
    console.log(this.name + 'Nothing to eat'); }}class Child extends Parent {
  constructor(name) {
    // Call the parent constructor with super
    super(name)
  }
  say() {
    console.log('I am' + this.name); }}let child1 = new Child('rice class');
child1.run(); // Nothing to eat
child1.say(); // I am a dry rice class
Copy the code

Advantages:

• The syntax is simple and easy to understand

Disadvantages:

• Not all browsers support itclassThe keyword