An article teaches you JS function inheritance

1. Introduction:
2. Prototype chain inheritance:
3. Borrowing constructor inheritance (object disguise):
4. Combination inheritance:
5. Parasitic Combination Inheritance:
6. Class inheritance:
7. Summary:

1. Introduction:

Hello, how are you all doing lately?😃 Function inheritance is a basic and important part in JS, and it is also often asked in interviews. The following will quickly show you which inheritance methods are common and must be mastered in JS. If you master the following content, you will have no problem with the interview~

Of course, this requires a certain foundation of prototype chain. If you are not familiar with the prototype chain, you can read my article 👉: Quick understanding of js prototype chain.

2. Prototype chain inheritance:

The key point of prototype chain inheritance is that the instance of the parent class serves as the prototype of the child class. Take a look at the following example:

 // Parent function Person
  function Person(name, age) {
    // Define some properties this.name = name;
    this.age = age;
    this.nature = ["auroras", "wind", "moon"];
  }
 // Define a method on the Person prototype Person.prototype.sayLove = function () {
    console.log(this.name + " like " + this.nature[0]);
  };
  // Sub-function Jack
  function Jack() {}
  // The instance of the parent class is used as the prototype of the subclass (-------------------Implementation Core--------------------------)
  Jack.prototype = new Person();

Now we create two instances of Jack and test whether the inheritance of Person is implemented:

      var jack1 = new Jack();
      var jack2 = new Jack();
      jack2.nature[0] = "sea";
      jack1.sayLove();
      jack2.sayLove();   
      console.log(jack1.nature);
      console.log(jack2.nature);

It can be seen from the running results that it is indeed inherited and the sayLove method can be executed. But there are many disadvantages. When creating a Jack instance, the name and age parameters cannot be passed, and the nature reference type attributes of different instances affect each other. If one is changed, all will change:

insert image description here

3. Borrowing constructor inheritance (object disguise):

The core lies in "constructor stealing". Call the parent class constructor from the subclass constructor. After all, functions are simply objects that execute code in a specific context, so you can use the apply() and call() methods to execute the constructor with the newly created object as the context. It can resolve the conflict between parameters and reference type properties in prototype chain inheritance. Or look at the example directly:

 // Parent function Person
  function Person(name, age) {
    // Define some properties this.name = name;
    this.age = age;
    this.nature = ["auroras", "wind", "moon"];
  }
 // Define a method on the Person prototype Person.prototype.sayLove = function () {
    console.log(this.name + " like " + this.nature[0]);
  };
  // Sub-function Lucy
  function Lucy(name, age) {
  // Pointing this to Lucy through call is equivalent to copying the content in the parent function Person (---------implementation core--------------)
        Person.call(this, name, age);
      }
  // Define a method on the child function prototype Lucy.prototype.syaName = function () {
        console.log("My name is " + this.name);
      };

Now we create two instances of Lucy and test whether the inheritance of Person is implemented:

      var lucy1 = new Lucy("lucy1", "20");
      var lucy2 = new Lucy("lucy2", "22");
      lucy2.nature[0] = "sea";
      console.log(lucy1.name);
      console.log(lucy1.nature);
      console.log(lucy2.nature);
      lucy1.syaName();
      lucy2.syaName();
      lucy1.sayLove();

As a result, inheritance is possible, parameters can be passed, and reference type properties do not affect each other. However, the disadvantages are obvious. You can see an error and cannot use the sayLove method on the prototype of the parent class.

insert image description here

4. Combination inheritance:

Composite inheritance is an inheritance method that combines the core implementations of prototype chain inheritance and borrowed constructor inheritance. It can pass parameters, and the reference type properties do not affect each other. At the same time, the subclass can also obtain the parent class method. This is also the most commonly used inheritance method at present. Let’s look at the example directly:

 // Parent function Person
  function Person(name, age) {
    // Define some properties this.name = name;
    this.age = age;
    this.nature = ["auroras", "wind", "moon"];
  }
 // Define a method on the Person prototype Person.prototype.sayLove = function () {
    console.log(this.name + " like " + this.nature[0]);
  };
  // Sub-function Lisa
      function Lisa(name, age) {
// Pointing this to Lisa through call is equivalent to copying the content in the parent function Person (------Implementation Core-----------)      
        Person.call(this, name, age);
      }
// The instance of the parent class is used as the prototype of the subclass (---------------Implementation Core-------------------)      
      Lisa.prototype = new Person();
  //A little knowledge point, here is to let Lisa's constructor point to Lisa again, otherwise because Lisa's prototype is a Person instance, the constructor will point to Person
      Lisa.prototype.constructor = Lisa;

Now we create two instances of Lisa and test whether the inheritance of Person is implemented:

      var lisa1 = new Lisa("lisa1", "20");
      var lisa2 = new Lisa("lisa2", "21");
      lisa2.nature[0] = "sea";
      console.log(lisa1.name);
      console.log(lisa1.nature);
      console.log(lisa2.nature);
      lisa1.sayLove();
      lisa2.sayLove();

You can see that the functions we inherited are basically realized. It also fixes the shortcomings of prototype chaining and borrowed constructor inheritance. However, it still has a small drawback. You can see that in the code comment implementation core, Person is called twice, so there are two identical properties on the Lisa prototype and the instance, which will waste some performance.

insert image description here

5. Parasitic Combination Inheritance:

In fact, parasitic composition inheritance is similar to composition inheritance, but it has an additional solution to the disadvantage that the prototype and instance of composition inheritance produce two copies of the same properties. The core of the solution is that since we just want the subclass prototype to be assigned to the parent class prototype, there is no need to create a new parent class instance. Simply create a new object whose value is the prototype of the parent class, and then assign it to the child class prototype.

The method Object.create(proto, [propertiesObject]) is used to create a new object. The __proto__ of the new object is equivalent to its parameter proto. Of course, Object.create may not be available in lower versions of IE, so the Object.create method is also custom-encapsulated below, but it is just a simple encapsulation. Let’s look at the example directly:

 // Parent function Person
  function Person(name, age) {
    // Define some properties this.name = name;
    this.age = age;
    this.nature = ["auroras", "wind", "moon"];
  }
 // Define a method on the Person prototype Person.prototype.sayLove = function () {
    console.log(this.name + " like " + this.nature[0]);
  };
  // Sub function Andy
 function Andy(name, age) {
        Person.call(this, name, age);
      }
// If there is no Object.create() method, simply encapsulate if (!Object.create) {
        Object.create = function (proto) {
          function Temp() {}
          Temp.prototype = proto;
          return new Temp();
        };
      }
// Call the Object.create method to create a new pair of images, whose __proto__ is Person.prototype, and assign it to Andy.prototype (-------Implementation Core----------)
      Andy.prototype = Object.create(Person.prototype);
  //Modify the constructor to point to Andy.prototype.constructor = Andy;

Now we create two instances of Andy and test whether the inheritance of Person is implemented:

      console.log(Andy.prototype.__proto__ === Person.prototype);
      var andy1 = new Andy("andy1", "20");
      var andy2 = new Andy("andy2", "21");
      andy2.nature[0] = "sea";
      console.log(andy1.name);
      console.log(andy1.nature);
      console.log(andy2.nature);
      andy1.sayLove();
      andy2.sayLove();

Works perfectly:

insert image description here

6. Class inheritance:

After ES6 released the class syntax sugar, classes can be defined through classes and class inheritance can be implemented. Let’s look at the example directly:

//Define a parent class Animal
  class Animal {
   //Here the constructor points to the class itself, the same as es5 behavior constructor(name) {
      this.name = name;
    }
    likeEat() {
      console.log(this.name + " like eat " + this.food);
    }
  }
//Define a subclass Dog, inheriting the parent class Animal through extends
  class Dog extends Animal {   
    constructor(name, food) {
      //Inherit parent class attribute super(name) through super(attribute name);
     this.food = food;
    }
    likeEat() {
     //Inherit the parent class method through super.+parent class method super.likeEat();
    }
  }

Create a new Dog instance and test whether Dog inherits Animal:

  var jinmao = new Dog("jinmao", "bone");
  console.log(jinmao.name);
  jinmao.likeEat();

You can see that it is perfectly implemented:

insert image description here

7. Summary:

method	advantage	shortcoming
Prototype chain inheritance	Can inherit properties and methods from the parent prototype, etc.	Unable to pass parameters, reference type attribute conflicts, etc...
Borrowing constructor inheritance	Can pass parameters, reference type attributes do not conflict, etc...	Unable to inherit methods from the parent prototype, etc.
Composition inheritance	It has the advantages of the above two and solves their disadvantages	Calling the parent instance twice produces two copies of the same properties, etc...
Parasitic Compositional Inheritance	It has the above three advantages and solves its disadvantages	Maybe not very intuitive etc...
Class inheritance	es6 new syntax, concise and intuitive, etc...	Lower versions of IE do not support es6, etc...

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of Js class construction and inheritance cases
How much do you know about JavaScript inheritance?
Differences between ES6 inheritance and ES5 inheritance in js
A brief talk about JavaScript parasitic composition inheritance
JavaScript object-oriented class inheritance case explanation
In-depth explanation of the various methods and advantages and disadvantages of JavaScript inheritance

<<: How to implement one-click deployment of nfs in linux

>>: Detailed installation process of MySQL5.6.40 under CentOS7 64