JS inheritance of several ways to achieve

First, we define a parent class:

 function Person(myName, myAge) {
        this.name = myName;
        this.age = myAge;
        this.arr = [1.2];
        this.say = function () {
            console.log(this.name, this.age);
        }
    }
 Person.prototype.eat = function () {
         console.log("eat");
    };
Copy the code

Mode 1 (Prototype chain inheritance) :

Treat the instance object of the parent class as the prototype object of the subclass

function Student(myName, myAge, myScore) {
        this.score = myScore;
        this.study = function () {
            console.log("day day up");
        }
    }
    Student.prototype = new Person();
    Student.prototype.constructor = Student;
    let stu1 = new Student();
    let stu2 = new Student();
    stu1.arr.push(3);
    console.log(stu2.arr); / / [1, 2, 3]
Copy the code

Disadvantages:

1. Cannot pass arguments to the parent constructor when creating a subclass instance
2. Properties in the stereotype object from the subclass are shared by all instances, resulting in properties of the reference type being modified by multiple instances

Method 2 (using constructor inheritance) :

Point Person’s this to Student’s instance object stu to solve the pass-through problem

function Student(myName, myAge, myScore) {
            Person.call(this, myName, myAge); 
            this.score = myScore;
            this.study = function () {
                console.log("day day up"); }}let stu = new Student("ww".19.99);
        console.log(stu.score); / / 99
        stu.say(); // ww 19
        stu.eat(); // This function does not exist
Copy the code

Disadvantages:

1. Only instance properties and methods of the parent class can be inherited, not stereotype properties/methods
2. In essence, copy the instance attributes and methods of the parent class to the subclass, the two functions have no relationship, there is no function reuse, performance is not high

Mode 3 (combination inheritance) :

Combinatorial inheritance is the combination of mode one and mode two. The prototype chain realizes the inheritance of prototype attributes and methods, and the constructor is used to realize the inheritance of instance attributes and methods.

function Student(myName, myAge, myScore) {
		Person.call(this, myName, myAge); 
        this.score = myScore;
        this.study = function () {
            console.log("day day up");
        }
    }
    Student.prototype = new Person();
    Student.prototype.constructor = Student;
Copy the code

This is a common method of inheritance. The disadvantage is that the constructor of the parent class is called twice, resulting in two copies of the same properties and methods in the instance object and the prototype object of the subclass

Mode 4 (Parasitic combination inheritance) :

Use object.create () instead of new

function Student(myName, myAge, myScore) {
		Person.call(this, myName, myAge); 
        this.score = myScore;
        this.study = function () {
            console.log("day day up"); }}var prototype = Object.create(Person.prototype); // Create an object
	prototype.constructor = Student; // Enhance objects
	Student.prototype = prototype; // Specify the object
Copy the code

Functions created through Object.create() do not call the constructor, so properties and methods on the constructor are not inherited from the instance created by Object.create, only properties and methods in the prototype Object. Solved the problem of calling the parent class’s constructor twice in composite inheritance

Mode 5 (ES6 Inheritance) :

Simplified code, implementation principle with parasitic combination inheritance

Class Student extends Person{
	   Constructor(myName, myAge, myAge){
	  	   this.score = myScore;
		   super(myAge, myName); }}Copy the code