Analysis of javascript prototype chain inheritance usage examples_javascript skills

This article analyzes the usage of JavaScript prototype chain inheritance with examples. Share it with everyone for your reference. The specific analysis is as follows:

Copy code 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 = 'Triangle';
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 rewrite the prototype property of an object, sometimes it will have a certain negative impact on the object's constructor property.
Therefore, after we complete the relevant inheritance relationship settings, it is a very good habit to reset the const attributes of these objects accordingly. As shown below:

Copy code The code is as follows:

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

Rewritten:

Copy code 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 = 'Triangle';
Triangle.prototype.getArea = function(){
return this.side*this.height/2;
}

Rewrite (pass by reference instead of value):

Copy code 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 = 'Triangle';
Triangle.prototype.getArea = function(){
return this.side*this.height/2;
}

Although it improves efficiency, this method has a side effect. Because it is passed by reference instead of value, the name value in the "parent object" is affected.
The child object and the parent object point to the same object. So once the child object modifies its prototype, the parent object will also be changed immediately.

Rewrite again (using temporary constructor):

Copy code 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 = 'Triangle';
Triangle.prototype.getArea = function(){
return this.side*this.height/2;
}

Although it improves efficiency, this method has a side effect. Because it is passed by reference instead of value, the name value in the "parent object" is affected.

The child object and the parent object point to the same object. So once the child object is modified by aligning the prototype, the parent object will also be changed immediately.

I hope this article will be helpful to everyone’s JavaScript programming design.