A good article about Javascript-prototype inheritance _prototype

Source: Internet
Author: User
Tags constructor inheritance
1. The most basic usage assigns an instance of ClassA to ClassB,
CLASSB inherits all the attributes of the ClassA.
Code in:
<script> function ClassA () {this.a= ' a '; function ClassB () {this.b= ' B '; } classb.prototype=new ClassA (); var objb=new classb (); For (var p in objb) document.write (p+ ""); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

2. From the perspective of archetypal succession theory,
JS prototype inheritance is a reference prototype, not a copy of the prototype,
Therefore, modifying the prototype will cause all instances of B to change.
The code is as follows:
<script> function ClassA () {this.a= ' a '; function ClassB () {this.b= ' B '; } classb.prototype=new ClassA (); var objb=new classb (); alert (OBJB.A); Classb.prototype.a= ' changed!! '; alert (OBJB.A); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

3. However, the write operation of a subclass object accesses only the members of the subclass object.
They don't affect each other, so,
To write is to write a subclass of reading a prototype (as in the case of a fruit class).
<script> function ClassA () {this.a= ' a '; function ClassB () {this.b= ' B '; } classb.prototype=new ClassA (); var objb1=new classb (); var objb2=new classb (); Objb1.a= '!!! '; alert (objb1.a); alert (objb2.a); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

4. Each subclass object holds a reference to the same prototype.
So the stereotype members in the subclass object are actually the same.
<script> function ClassA () {this.a=function () {alert ();}; function ClassB () {this.b=function () {alert ();}; } classb.prototype=new ClassA (); var objb1=new classb (); var objb2=new classb (); alert (objb1.a==objb2.a); alert (objb1.b==objb2.b); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

5. The constructor of the prototype is not executed when the subclass is constructed
<script> function ClassA () {alert ("a"); This.a=function () {alert ();}; function ClassB () {alert ("B"); This.b=function () {alert ();}; } classb.prototype=new ClassA (); var objb1=new classb (); var objb2=new classb (); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

6. Next is fatal, accessing the member object of the prototype in the subclass object:
<script> function ClassA () {this.a=[]; function ClassB () {this.b=function () {alert ();}; } classb.prototype=new ClassA (); var objb1=new classb (); var objb2=new classb (); Objb1.a.push (1,2,3); alert (objb2.a); A member of all B's instances has changed!! </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

7. Therefore in the prototype inheritance in the prototype class cannot have the member Object! All members must be value type data (string also can)
Using prototype inheritance has the advantages of high execution efficiency, no waste of memory, and immediately visible in subclasses after the dynamic acquisition of the parent class.

8.prototype Inheritance is inherited by setting the prototype object (prototype) of the target class to an instance of the parent class.

There are four obvious drawbacks to 9.prototype inheritance:
Disadvantage one: The constructors of the parent class are not executed as they are instantiated in Java, but are executed when the inheritance is set, and are executed only once. This is often not what we want, especially if there are some special actions in the constructor of the parent class.
Disadvantage two: Because the constructor of the parent class is not executed when the subclass is instantiated, the member variable set in the constructor of the parent class becomes the public variable of all instance objects in the subclass. Since inheritance in JavaScript occurs only in the value of the Get property, it has no effect on the value of the property when the String,number and Boolean types cannot be modified. But the array and object types can be problematic.
Disadvantage three: If the constructor of the parent class requires parameters, we have no way.
Disadvantage four: The original prototype object of the subclass is replaced, the constructor attribute of the subclass itself is gone. When an instance of a class takes its constructor property, it gets the constructor property inherited from the parent class, so that the constructor value is the parent class rather than the subclass.

10. Can be modified for the shortcomings of prototype
For example, write it as a function object of a method, so it is convenient to use.

Function.prototype.Extends = function (ParentClass)
{
var Bs = new Function ();
Bs.prototype = Parentclass.prototype;
This.prototype = new Bs ();
This.prototype.Super = ParentClass;
This.prototype.constructor = this;
}

I hope that you JS Master can be a better way to introduce to everyone
for the 3rd, 6
<script> function ClassA () {this.a=[] this.aa=100; function ClassB () {this.b=function () {return "CLASSBB"}; } classb.prototype=new ClassA (); var objb1=new classb (); var objb2=new classb (); Objb1.a.push (1,2,3); OBJB1.AA=10100 alert (objb2.a); alert (OBJB2.AA); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

For inheritance,
Array.prototype will not inherit CLASSA,CLASSB.
<script> function ClassA () {this.a=[] this.aa=100; function ClassB () {this.b=function () {return "CLASSBB"}; } classb.prototype=new ClassA (); Array.prototype= new ClassB (); var _array= new Array () alert (_array.b ()) </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Inheritance problems with parameters
<div id= "a" >aaa</div> <script> function ClassB () {this.b=function () {return "CLASSBB"}; function Classc (r) {El=document.getelementbyid (R) return El} classb.prototype=new classc () var st=new Cl ASSB () Alert (ST ("a") InnerHTML) </script>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.