This is the 16th day of my participation in the August More Text Challenge

JavaScript inheritance forms summarize a wave

1. Prototype chain inheritance

Practice: Make the parent constructor instance point to the child constructor’s prototype object.

Advantages: Subclasses have access to properties and methods on the parent class stereotype

Disadvantages:

  1. A subclass instance cannot pass parameters to its parent constructor
  2. Multiple inheritance cannot be implemented

Writing:

  // Prototype chain inheritance
   function Perosn() {
     this.name = 'Joe'
   }
   Perosn.prototype.getname = function () {
     return this.name
   }
   function Son() {}
   Son.prototype=new Perosn();
   let son=new Son();
   console.log(son.getname())
Copy the code

Constructor inheritance

We execute the parent constructor by changing the form to which this refers, and we can take our arguments in.

Advantages:

Resolved that subclass constructors pass arguments to superclass constructors

Multiple inheritance (pointing to multiple parent classes)

Disadvantages:

Properties and methods on the stereotype chain cannot be inherited

Writing:

  // Constructor inherits
   function Perosn(name) {
     this.name = name
   }
   Perosn.prototype.getname = function () {
     return this.name
   }
   function Son(name, age) {
     Perosn.call(this, name);
     this.age = age
   }
   let son = new Son('pp'.12)
   console.log(son.name, son.age)
Copy the code

3. Combinatorial inheritance

A combination of inherited and prototypical forms through constructor forms.

Advantages:

Functions can be reused

There is no reference attribute problem

You can inherit properties and methods, and you can inherit properties and methods of stereotypes

Disadvantages:

The parent class is called twice, producing two instances

  // Combinatorial inheritance
   function Perosn(name) {
     this.name = name
   }
   Perosn.prototype.getname = function () {
     return this.name
   }
   function Son(name, age) {
     Perosn.call(this, name);
     this.age = age
   }
   Son.prototype = new Perosn();
   Son.prototype.constractor = Son;
 ​
   let son=new Son('pp'.12)
   console.log(son.name,son.age)
   console.log(son.getname())
Copy the code

4. Parasitic combination inheritance

Through the parasitic way to repair the deficiency of combined inheritance, perfect inheritance

We can avoid creating two instances by using the object.create () method

The idea is to have a new object inside and point an instance of the new object to the parent’s prototype.

Implement an object.create:

   function CreateObj(obj) {
     function FN() {}
     FN.prototype=obj;
     return new FN();
   }
Copy the code

Implement parasitic combinatorial inheritance:

   function People(name, age) {
     this.name = name || 'wangxiao'
     this.age = age || 27
   }
   // Parent method
   People.prototype.eat = function () {
     return this.name + this.age + 'eat sleep'
   }
 ​
   function Son(name, age) {
     People.call(this, name, age)
   }
   // Inherit the parent method
   Son.prototype = Object.create(Son.prototype)
   Son.prototype.constractor=Son
 ​
   let son=new Son(123.123)
   console.log(son.age,son.name)
Copy the code

5. ES6 inheritance

Simple and easy to understand, we do not need to manually handle the prototype object

Code representation:

  class Person {
     constructor(name, age) {
       this.name = name;
       this.age = age
     }
     printName() {
       console.log(this.name)
     }
   }
 ​
   class Son extends Person {
     constructor(name, age) {
       super(name, age)
     }
   }
   let son = new Son(123.123)
   console.log(son.name, son.age)
   son.printName()
Copy the code

Notice that the super keyword actually implements constructor inheritance, equivalent to person.call (this,name).