This article analyzes the usage of JavaScript prototype chain inheritance. Share it for your reference. The specific analysis is as follows:
Copy the code 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 object's prototype property, it sometimes has a certain negative impact on the object's constructor property.
Therefore, after we complete the relevant inheritance relationship setting, it is a very good habit to reset the const attributes of these objects accordingly. As shown below:
The code copy is as follows: TwoDShape.prototype.constructor = TwoDShape;
Triangle.prototype.constructor = Triangle;
rewrite:
Copy the code 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 again (reference pass instead of value pass):
Copy the code 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 efficiency is improved, such a method has a side effect, because it is reference passing, not value passing, so the name value in the "parent object" is affected.
The child object and the parent object point to the same object. Therefore, once the child object changes its prototype, the parent object will also be changed immediately.
Rewrite again (using temporary constructor):
Copy the code 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 efficiency is improved, such a method has a side effect, because it is reference passing, not value passing, so the name value in the "parent object" is affected.
The child object and the parent object point to the same object. Therefore, once the child object aligns the prototype and modifyes it, the parent object will also be changed immediately.
I hope this article will be helpful to everyone's JavaScript programming.