JavaScript Inheritance Implementation

All objects in S1:js, think of what we would have done at first if we were to implement the inheritance of the properties and methods of the parent object, taking into account the concept of the prototype, which I originally implemented to implement the inherited

function Parent () {   this.name= ' 123 ';} Parent.prototype.getname=function () {   return this.name;} function Son () {   this.age=20;} Son.prototype=new Parent (); Son.prototype.getage=function () {   return this.age;} var son=new son (); Console.log (' Name: ' +son.getname () + '; Age: ' +son.getage ()); Vm1777:16 name:123; Age:20

It can be seen from the above that the inheritance of the parent is mainly to overwrite son's prototype, so that the properties and methods of the parent are passed to son's prototype, so that the objects constructed through New son () will inherit from the prototype "the parent object" Properties and methods, which results in inheritance, but this has the side effect that when a parent object contains a property of a reference type, the child object's modification of the reference type data affects all sub-objects, which is obviously not the effect we need:

function Parent () {   this.name= ' 123 ';   this.fruits=[' Apple ';} Parent.prototype.getname=function () {   return this.name;} function Son () {   this.age=20;} Son.prototype=new Parent (); Son.prototype.getage=function () {   return this.age;} var son=new son (); var son1=new son (); Console.log (son.fruits);//["Apple"]console.log (son1.fruits);//["Apple" Son.fruits.push (' pear '); Console.log (son.fruits);//["Apple", "Pear"]console.log (son1.fruits);//["Apple", "pear"]

S2: The idea now to solve this problem is to have each child object have a copy of the parent object property, so that modifying the property only modifies the property under the child object, without affecting the other sub-object properties. The realization of this goal is achieved by referring to the former object posing as the way

function Parent () {   this.name= ' 123 ';   this.fruits=[' Apple ';} Parent.prototype.getname=function () {   return this.name;} function Son () {   parent.call (this);   this.age=20;} Son.prototype=new Parent (); Son.prototype.getage=function () {   return this.age;} var son=new son (); var son1=new son (); Console.log (son.fruits);//["Apple"]console.log (son1.fruits);//["Apple" Son.fruits.push (' pear '); Console.log (son.fruits);//["Apple", "Pear"]console.log (son1.fruits);//["Apple"]

I have added Parent.call (this) in the son function to implement the Son object that this[is new when new son () is passed into the context this in the parent function to invoke the parent () function. This results in a copy of the parent object's properties and methods, so the subsequent modification of the parent object's properties and methods is actually a modified copy, thus achieving the effect of not affecting all child objects. However, due to the use of son.prototype=new parent (), we get two instances of the properties and methods, and then we get the copy, just need to prototype the parent object on the line, from the following can be seen we only need the prototype of the GetName ();

S3: Next is to remove an instance of the properties and methods, this is the time for constructor to play a role, look at the code below, the Parent.prototype is rebuilt into a native object, as a prototype of the sub-object, and then the constructor point to the sub-constructor

function Parent () {   this.name= ' 123 ';   this.fruits=[' Apple ';} Parent.prototype.getname=function () {   return this.name;} function Son () {   parent.call (this);   this.age=20;} function Extend (Parent,son) {   var proto = new Object (parent.prototype);   Proto.constructor = Son;   Son.prototype=proto;} Extend (Parent,son); Son.prototype.getage=function () {   return this.age;}

JavaScript Inheritance Implementation