Implementation of JS Inheritance (ES5)

JS is very weak in object-oriented support, so implementing inheritance before ES6 is a bit more curved (similar to the weak object-oriented support, and then forcibly piecing together object-oriented features) in ES5, which is defined by the parent class as Super

function Super (name) { This. name=name;  This. age= -;  This. array=[1,2,3];  This. Obj={a:'prop'};  This. say=function () {Console.log ( This. Name); }} Super.prototype.testInherit=function () {Console.log ('I am method of Super prototype')    }

1. Constructor inheritance simply calls the parent class constructor in the subclass constructor, similar to simply executing the parent constructor once, and copying a copy of the property. This kind of inheritance causes the prototype chain to break, unable to realize the true meaning inheritance,

Child1.testinherit ();

This call will report an error because Child1 does not have a way to invoke its prototype on the Super prototype chain, and because it is a copy of the property method of the parent class, the subclass changes the properties of the reference type without affecting the properties of the other subclasses .

function Child1 (name) {super.apply ( This, arguments);  This. name=name;  This. sayname=function () {Console.log ( This. Name); }    }    varParent=NewSuper ('Lucy'); varchild1=NewChild1 ('Jack'); varchild1=NewChild1 ('Jack2');    Console.log (PARENT,CHILD1); Console.log (child1.__proto__===child1.prototype,child1 instanceof Super);//true FlaseChild1.array.push (4);    Console.log (Child1.array,child2.array,s1.array,); Child1.testinherit ();

2. Use the prototype chain to inherit the most basic idea, the prototype of the class is set to an instance of the parent class

function Child2 (name) { This. name=name;  This. sayname=function () {Console.log ( This. Name); }    }    varParent=NewSuper ('Lucy'); Child2.prototype=parent; varchild1=NewChild2 ('Jack'); varChild2=NewChild2 ('Jack2'); Child1.array.push (4); CHILD1.OBJ.B="PROP2";    Console.log (Child1.array,child2.array,child1.obj,child2.obj); Console.log (child1.constructor);

Modifying the reference property of an instance inheritance allows you to see that all other instances inherit properties that have been modified (they refer to the same address) and that the constructor for the subclass instance has been modified The preceding 1 and 2 are two basic patterns of inheritance, and are the basis of other inheritance implementations3. Use combination inheritance to ensure that instance inheritance properties are privatized and that the prototype chain is constantly

function Child3 (name) {super.apply ( This, arguments);  This. name=name; }    varParent=NewSuper ('Lucy'); Child3.prototype=parent; varchild1=NewCHILD3 ('Jack'); varChild2=NewCHILD3 ('Jack2'); Child1.array.push (5);    Console.log (Child1.array,child2.array); Console.log (child1.constructor);

In this way, inheritance can guarantee the prototype backtracking, and the attributes of the reference type inherited by the instance are not affected, but the constructor of the parent class is called two times, and the constructor of the instance of the subclass becomes super, which can be further optimized by 4. The constructor that inherits the parent class for the above combination calls 2 improvements, and you can set the prototype of the subclass directly to the prototype of the parent class, as shown below

function Child4 (name) {super.apply ( This, arguments);  This. test= -; } Child4.prototype=super.prototype;//improved parent class constructor call two times problemChild4.prototype.constructor=Child4; varchild1=NewChild4 ('Bob'); varChild2=NewChild4 ('Bob2'); Console.log (child1.__proto__===Child4.prototype); Console.log (Child1.__proto__.constructor,'\ n', Child4.prototype.constructor,'\ n', Super.prototype.constructor); Console.log (Super.prototype.constructor); //This method changes the constructor of the parent class .     for(varItminchChild4.prototype)    {Console.log (ITM); }  

    //or use Object.create () to create a transition object--so that the subclass can redefine the constructor so that the parent class and subclass have their own constructorsfunction Child5 (name) {super.apply ( This, arguments);  This. test= -; } Child5.prototype=object.create (Super.prototype); Child5.prototype.constructor=Child5; Object.defineproperty (Child5.prototype,'Constructor',{//The CHILD5 prototype is an instance object, so the defined constructor of the display changes its non-enumerable properties, which are fixed hereEnumerablefalse    }); varChild=NewCHILD5 ('End');    Console.log (Child5.prototype.constructor,super.prototype.constructor);    Console.log (Child instanceof child5,child instanceof Super);              Console.log (child.constructor,child5.prototype.isprototypeof (Child), Super.prototype.isPrototypeOf (child));  for(varItminchChild5.prototype)    {Console.log (ITM); } 

5. Combined parasitic inheritance mode (the recommended implementation in JS elevation) This pattern is not much different from the implementation of the above 第4-2, but the middle object above is created by Object.create (), which is created by itself

function Inheritproperty (sup,child) {function F () {}; F.prototype=Sup.prototype; varInner=NewF (); Inner.constructor=Child ; Child.prototype=inner; Object.defineproperty (Child.prototype,'Constructor', {enumerable:false    }); } function Child6 (name) { This. age= the;  This. name=name;    } inheritproperty (SUPER,CHILD6); Child6.prototype.sayAge=function () {return  This. Age; }    varChild=NewChild6 ('End');    Console.log (Child.constructor);    Console.log (Child6.prototype.constructor); Console.log (Child.sayage ());

The above-mentioned succession is based on the basis of, specifically, the way to achieve the inheritance of these two, the other is only the combination of the two optimization

JS inheritance Implementation (ES5)