There are six commonly used inheritance methods in JavaScript

1. Prototype chain inheritance

Prototype chain inheritance is one of the common inheritance methods, which involves the constructor, prototype and instance, there is a certain relationship between the three, that is, each constructor has a prototype object, the prototype object contains a pointer to the constructor, and the instance contains a pointer to the prototype object

For example

 function Parent() {
    this.name = 'parent1';
    this.play = [1.2.3]}function Child() {
    this.type = 'child2';
  }
  Child1.prototype = new Parent();
  console.log(new Child())
Copy the code

Disadvantages:

• Operations on reference types by multiple instances can be tampered with.

Constructor inheritance

Call the Parent function with call

function Parent(){
    this.name = 'parent1';
}
Parent.prototype.getName = function () {
    return this.name;
}
function Child(){
    Parent1.call(this);
    this.type = 'child'
}
let child = new Child();
console.log(child);  / / no problem
console.log(child.getName());  / / complains
Copy the code

Disadvantages:

• Only instance properties and methods of the parent class can be inherited, not stereotype properties/methods
• Unable to reuse, each subclass has a copy of the parent class instance function, affecting performance

3. Combinatorial inheritance

We’ve talked about two types of inheritance, each with advantages and disadvantages. Combinatorial inheritance combines the first two approaches

function Parent3 () {
    this.name = 'parent3';
    this.play = [1.2.3];
}
Parent3.prototype.getName = function () {
    return this.name;
}
function Child3() {
    // Call Parent3() for the second time
    Parent3.call(this);
    this.type = 'child3';
}
Call Parent3() for the first time
Child3.prototype = new Parent3();
// Hang the constructor manually and point to your own constructor
Child3.prototype.constructor = Child3;
var s3 = new Child3();
var s4 = new Child3();
s3.play.push(4);
console.log(s3.play, s4.play);  // Do not affect each other
console.log(s3.getName()); // Normal output 'parent3'
console.log(s4.getName()); // Normal output 'parent3'
Copy the code

Disadvantages:

• The superclass constructor is executed twice, incurring the performance overhead of constructing multiple times

4. Original type inheritance

The Object. Create method is used to implement inheritance of ordinary objects

Here’s another example

let parent4 = {
    name: "parent4".friends: ["p1"."p2"."p3"].getName: function() {
      return this.name; }};let person4 = Object.create(parent4);
  person4.name = "tom";
  person4.friends.push("jerry");
  let person5 = Object.create(parent4);
  person5.friends.push("lucy");
  console.log(person4.name); // tom
  console.log(person4.name === person4.getName()); // true
  console.log(person5.name); // parent4
  console.log(person4.friends); // ["p1", "p2", "p3","jerry","lucy"]
  console.log(person5.friends); // ["p1", "p2", "p3","jerry","lucy"]
Copy the code

Disadvantages:

• becauseObject.create Method implements a shallow copy, with multiple instances of reference type attributes pointing to the same memory, potentially tampering

Parasitic inheritance

Parasitic inheritance optimizes above inheritance, enhances it by taking advantage of the shallow-copy capability, and adds some methods

let parent5 = {
    name: "parent5".friends: ["p1"."p2"."p3"].getName: function() {
        return this.name; }};function clone(original) {
    let clone = Object.create(original);
    clone.getFriends = function() {
        return this.friends;
    };
    return clone;
}
let person5 = clone(parent5);
console.log(person5.getName()); // parent5
console.log(person5.getFriends()); // ["p1", "p2", "p3"]
Copy the code

Its advantages and disadvantages are also obvious, like the original type inheritance mentioned above

Parasitic combinatorial inheritance

Parasitic combination inheritance, with the help of the Object. Create method to solve the inheritance problem of common objects, in the previous several inheritance methods based on the advantages and disadvantages of transformation, which is also the relative optimal inheritance of all inheritance methods

function Parent(name) {
  this.name = name;
  this.say = () = > {
    console.log(111);
  };
}
function Children(name) {
  Parent.call(this);
  this.name = name;
}
Children.prototype = Object.create(Parent.prototype);
Children.prototype.constructor = Children;
Copy the code

reference

• Web-interview/Inherit. Md at Master · Febobo/Web-Interview (github.com)