Combination Inheritance of JS inheritance (combining prototype chain inheritance and borrowing constructor inheritance)

Review the disadvantages of borrowing constructor inheritance

Let's look at the last code we used in borrowing constructor inheritance:

//Parent class: Peoplefunction Person () { This. Head ='Head';  This. Emotion = ['Hi','Anger','Grief','le'];//all people have emotions.       This. Eat =function () {Console.log (' Eat'); }       This. Sleep =function () {Console.log ('Sleep'); }       This. Run =function () {Console.log ('Run'); }    }    //Subclass: Student, inherit the category of "man"function Student (studentid) { This. StudentID =StudentID; Person.call ( This); }        //student.prototype = new Person ();    varSTU1 =NewStudent (1001); Console.log (stu1.emotion); //[' Hi ', ' anger ', ' grief ', ' le ']Stu1.emotion.push ('Sorrow'); Console.log (stu1.emotion); //["Hi", "anger", "sorrow", "Joy", "Sorrow")        varSTU2 =NewStudent (1002); Console.log (stu2.emotion); //["Hi", "anger", "sorrow", "le")

In this code, we use the constructor inheritance to ensure that both STU1 and STU2 have their own copy of the Parent property, so that their respective emotion are not affected. However, the problem is that both STU1 and STU2 copy all the properties and methods in the person class, and in the person class, such methods as Eat (), sleep (), run () should be common, without adding to each instance to increase memory, especially this When the class method is more.

Ii. combining two types of inheritance models

So we thought, can we put these methods on the prototype object of the parent class, implement the method reuse, then the subclass inherits through the prototype chain, can call these methods? ~

//Parent class: Peoplefunction Person () { This. Head ='Head';  This. Emotion = ['Hi','Anger','Grief','le'];//all people have emotions.    }    //put the method that needs to be shared in the person class into the prototype, and implement the ReusePerson.prototype.eat =function () {Console.log (' Eat'); } Person.prototype.sleep=function () {Console.log ('Sleep'); } Person.prototype.run=function () {Console.log ('Run'); }    //Subclass: Student, inherit the category of "man"function Student (studentid) { This. StudentID =StudentID; Person.call ( This); } Student.prototype=NewPerson ();//at this point the constructor in Student.prototype is rewritten, causing stu1.constructor = = = PersonStudent.prototype.constructor = Student;//Student The constructor pointer of the prototype object back to the Student itself    varSTU1 =NewStudent (1001); Console.log (stu1.emotion); //[' Hi ', ' anger ', ' grief ', ' le ']Stu1.emotion.push ('Sorrow'); Console.log (stu1.emotion); //["Hi", "anger", "sorrow", "Joy", "Sorrow")        varSTU2 =NewStudent (1002); Console.log (stu2.emotion); //["Hi", "anger", "sorrow", "le")stu1.eat ();// EatStu2.run ();//RunConsole.log (Stu1.constructor);//Student

First, we extract the method that needs to be reused in the person class into Person.prototype, and then set the Student prototype object as an instance of the person class so that STU1 can access the properties and methods on the person prototype object. Second, in order to ensure that STU1 and STU2 have their own copy of the Parent property, we use the Person.call (this) method in the Student constructor. In this way, the combination of the prototype chain inheritance and the borrowing of constructor inheritance, it is a perfect solution to the previous two of the shortcomings of each.

Combination Inheritance of JS inheritance (combining prototype chain inheritance and borrowing constructor inheritance)