Javascript prototype chain inheritance usage Example Analysis _ javascript skills

This article mainly introduces the use of javascript prototype chain inheritance. The example analyzes the skills and precautions in javascript prototype chain inheritance, which is of great practical value, if you need it, you can refer to the examples in this article to analyze the usage of javascript prototype chain inheritance. Share it with you for your reference. The specific analysis is as follows:

The Code is as follows:

Function Shape (){
This. name = 'shape ';
This. toString = function (){
Return this. name;
}
}

Function TwoDShape (){
This. name = '2d shape ';
}
Function Triangle (side, height ){
This. name = 'trigger ';
This. side = side;
This. height = height;
This. getArea = function (){
Return this. side * this. height/2;
};
}

/* Inheritance */
TwoDShape. prototype = new Shape ();
Triangle. prototype = new TwoDShape ();

When we completely override the prototype attribute of an object, it sometimes has a negative impact on the constructor attribute of the object.
Therefore, it is a good habit to reset the const attributes of these objects after we complete the relevant inheritance relationship settings. As follows:

The Code is as follows:

TwoDShape. prototype. constructor = TwoDShape;
Triangle. prototype. constructor = Triangle;

Rewrite:

The Code is as follows:

Function Shape (){}

Shape. prototype. name = 'shape ';
Shape. prototype. toString = function (){
Return this. name;
}

Function TwoDShape (){}

TwoDShape. prototype = new Shape ();
TwoDShape. prototype. constructor = TwoDShape;

TwoDShape. prototype. name = '2d shape ';

Function Triangle (side, height ){
This. side = side;
This. height = height;
}

Triangle. prototype = new TwoDShape;
Triangle. prototype. constructor = Triangle;

Triangle. prototype. name = 'trigger ';
Triangle. prototype. getArea = function (){
Return this. side * this. height/2;
}

Rewrite (transfer by reference rather than passing by value ):

The Code is as follows:

Function Shape (){}

Shape. prototype. name = 'shape ';
Shape. prototype. toString = function (){
Return this. name;
}

Function TwoDShape (){}

TwoDShape. prototype = Shape. prototype;
TwoDShape. prototype. constructor = TwoDShape;

TwoDShape. prototype. name = '2d shape ';

Function Triangle (side, height ){
This. side = side;
This. height = height;
}

Triangle. prototype = TwoDShape. prototype;
Triangle. prototype. constructor = Triangle;

Triangle. prototype. name = 'trigger ';
Triangle. prototype. getArea = function (){
Return this. side * this. height/2;
}

Although the efficiency is improved, this method has a side effect. Because it is a reference transfer, rather than a value transfer, the name value in the "parent object" is affected.
The sub-object and parent object point to the same object. Therefore, the parent object is changed immediately after the child object is modified.

Then rewrite (use the temporary constructor ):

The Code is as follows:

Function Shape (){}
Shape. prototype. name = 'shape ';
Shape. prototype. toString = function (){
Return this. name;
}
Function TwoDShape (){}
Var F = function (){}
F. prototype = Shape. prototype;
TwoDShape. prototype = new F ();
TwoDShape. prototype. constructor = TwoDShape;
TwoDShape. prototype. name = '2d shape ';
Function Triangle (side, height ){
This. side = side;
This. height = height;
}
F. prototype = TwoDShape. prototype;
Triangle. prototype = new F ();
Triangle. prototype. constructor = Triangle;
Triangle. prototype. name = 'trigger ';
Triangle. prototype. getArea = function (){
Return this. side * this. height/2;
}

Although the efficiency is improved, this method has a side effect. Because it is a reference transfer, rather than a value transfer, the name value in the "parent object" is affected.

The sub-object and parent object point to the same object. Therefore, once the sub-object is aligned with the prototype, the parent object is changed.

I hope this article will help you design javascript programs.