Thinking about the inability to display the Inheritance Mechanism Using Dynamic Prototype

CopyCode The Code is as follows: <SCRIPT type = "text/JavaScript">
Function polygon (isides ){
This. sides = isides;
If (typeof polygon. _ initialized = "undefined "){
Polygon. Prototype. getarea = function (){
Return 0;
};
Polygon. _ initialized = true;
}
}
Function triangle (IBASE, iheight ){
Polygon. Call (this, 3 );
This. base = IBASE;
This. Hei = iheight;
If (typeof triangle. _ initialized = "undefined "){
Triangle. Prototype = new polygon ();
Triangle. Prototype. getarea = function (){
Return this. Base * This. Hei * 0.5;
};
Triangle. _ initialized = true;
}
}
VaR otriangle1 = New Triangle (12, 4 );
Alert (otriangle1.sides );
// Alert (otriangle1.getarea ());
// The Code cannot be run. Firebug shows that otriangle1.getarea () is not a function

</SCRIPT>

It was strange at first to figure out the code. Why can't I run it? So I started to think about it in combination with the author's narration (the author's explanation behind this code is very difficult to understand what he was talking about without reading it several times). Finally, I finally figured it out.
We already know that the process of creating an object in the form of VaR anobject = new afunction () can be divided into three steps:
(1) create a new object
(2) set the prototype object built in this object to the prototype object referenced by the constructor portotype.
(3) use this object as the this parameter to call the constructor and complete initialization such as member settings.

Please pay attention to step (2,Copy codeThe Code is as follows: var otriangle1 = New Triangle (12, 4 );

When this statement is executed, otriangle1.prototype = triangle. prototype; (of course, triangle. the prototype object does not have any actual attributes and Methods.) then, the execution continues until step (3) runs the function body.

Copy code The Code is as follows: triangle. Prototype = new polygon ();

However, after this sentence is executed, otriangle1.prototype cannot be assigned another value (that is, otriangle1.prototype = triangle. Prototype; cannot be executed). NextProgramRunCopy codeThe Code is as follows: triangle. Prototype. getarea = function (){
Return this. Base * This. Hei * 0.5;
};

However, it is too late. The otriangle1.prototype object does not own this method. Only the object created in new polygon () can have this method, so we have the result of the comment on the last line of the program. However, the triangle object created later runs normally. See the following code:

Code Copy code The Code is as follows: <SCRIPT type = "text/JavaScript">
Function polygon (isides ){
This. sides = isides;
If (typeof polygon. _ initialized = "undefined "){
Polygon. Prototype. getarea = function (){
Return 0;
};
Polygon. _ initialized = true;
}
}
Function triangle (IBASE, iheight ){
Polygon. Call (this, 3 );
This. base = IBASE;
This. Hei = iheight;
If (typeof triangle. _ initialized = "undefined "){
Triangle. Prototype = new polygon ();
Triangle. Prototype. getarea = function (){
Return this. Base * This. Hei * 0.5;
};
Triangle. _ initialized = true;
}
}
VaR otriangle1 = New Triangle (12, 4 );
Alert (otriangle1.sides );
// Alert (otriangle1.getarea ());
// The Code cannot be run. Firebug shows that otriangle1.getarea () is not a function
VaR otriangle2 = New Triangle (10, 5 );
Alert (otriangle2.sides );
// The final running of the program proves that my understanding is correct.
Alert (otriangle2.getarea ());
</SCRIPT>

As for the reason, that is, what I analyzed earlier, otriangle2.prototype = triangle. prototype is executed internally. This prototype object is assigned with object reference with actual attributes and methods.