A good article about javascript-prototype inheritance _ prototype

Source: Internet
Author: User
A good article about javascript-prototype inheritance 1. The most basic usage is to assign an instance of ClassA to ClassB,
ClassB inherits all the attributes of ClassA.
Code entry:

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 select all Note: If you need to introduce external Js, You need to refresh it to execute]


2. From the perspective of prototype Inheritance theory,
The prototype inheritance of js is a reference prototype, not a copy prototype,
Therefore, modifying the prototype will cause changes to all B instances.
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 select all Note: If you need to introduce external Js, You need to refresh it to execute]


3. However, write operations on subclass objects only access members of subclass objects,
They do not affect each other. Therefore,
Write is the write subclass. Read is the read prototype (if not in the subclass ).

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 select all Note: If you need to introduce external Js, You need to refresh it to execute]


4. Each subclass object is referenced by the same prototype,
Therefore, the prototype 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 select all Note: If you need to introduce external Js, You need to refresh it to execute]


5. When a subclass is constructed, the prototype constructor will not be executed.

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 select all Note: If you need to introduce external Js, You need to refresh it to execute]


6. The next step is fatal. Access the prototype member object 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 (, 3); alert (objB2.a); // All a members in all B instances have changed !! Script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]


7. Therefore, no member object exists in the prototype inheritance prototype class! All members must be value-type data (string can also be)
Using prototype inheritance has the advantages of high execution efficiency, no waste of memory, dynamic addition of methods for the parent class, and so on in the subclass.

8. prototype inheritance is inherited by setting prototype of the subclass to an instance of the parent class.

9. prototype inheritance also has four obvious disadvantages:
Disadvantage 1: The constructor of the parent class is not executed when the subclass is instantiated as in JAVA, but executed only once when the inheritance is set. This is often not what we want, especially when the constructor of the parent class has some special operations.
Disadvantage 2: The constructor of the parent class is not executed when the child class is instantiated, the member variables set in the constructor of the parent class become the public variables of all instance objects when they are in the subclass. Because the inheritance in JavaScript only occurs when the value of the "get" attribute is "String", the data of the attribute value "String", "Number", and "Boolean" cannot be modified. However, the Array and Object types are problematic.
Disadvantage 3: If the constructor of the parent class requires a parameter, there is no way.
Disadvantage 4: The original prototype object of the subclass is replaced, and the constructor attribute of the subclass is no longer available. When an instance of the class obtains its constructor attribute, it obtains the constructor attribute inherited from the parent class, so that the constructor value is the parent class rather than the Child class.

10. prototype defects can be modified.
For example, it is convenient to write it as a Function object.

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 you will be able to introduce your js experts in a better way.
For the 3,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 (10100, 3); objB1.aa = alert (objB2.a); alert (objB2.aa); script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]


For inheritance,
Array. prototype cannot 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 select all Note: If you need to introduce external Js, You need to refresh it to execute]


Inheritance with Parameters

<P id = "a"> aaa </p> script function ClassB () {this. B = function () {return "classbb" };} function ClassC (R) {el = document. getElementById (R) return el} ClassB. prototype = new ClassC () var st = new ClassB () alert (st (""). innerHTML) script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

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.