"Notes" JavaScript prototype chain inheritance instance

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, it can sometimes have a negative effect on the object constructor property. Therefore, it is a good practice to reset the const properties of these objects after we have completed the relevant inheritance relationship settings.

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

rewrite:

<span style= "Font-family:microsoft yahei;font-size:14px;color: #333333;" >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;} </span>

Rewrite (reference pass instead of Value pass):

<span style= "Font-size:14px;color: #333333;" >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;} </span>

while efficiency is improved, this approach has a side effect because it is a reference pass, not a value pass, so 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 aligned with the prototype, the parent object is changed.

Overwrite again (using temporary constructor):

<span style= "Font-size:14px;color: #333333;" >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;} </span>

while efficiency is improved, this approach has a side effect because it is a reference pass, not a value pass, so 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 aligned with the prototype, the parent object is changed.

"Notes" JavaScript prototype chain inheritance instance