Javascript class inheritance and prototype inheritance

Javascript class inheritance

To better understand the principle of class inheritance in Javascript, let's take a look at a simple example.// Super class <br/> function person () {<br/> This. name = 'zhang Shengli '; <br/> This. age = 23; <br/> This. getname = function () {<br/> return this. name; <br/>}; <br/> person. prototype. getage = function () {<br/> return this. age; <br/>}; <br/> // sub class <br/> function reader () {<br/> person. call (this); <br/>}; <br/> // This sentence must be placed at the beginning of the added method, otherwise, the newly added method will be overwritten. <Br/> reader. prototype = new person (); <br/> reader. prototype. constructor = reader; // All constructors need to be reset because the constructor of the subclass is overwritten. <br/>

The specific decomposition is as follows:

1. In the constructor of the subclass, the role of person. Call (this); is to call the constructor of the parent class.
2. Reader. Prototype = new person (); assign an Instance Object of the parent class to the prototype object of the subclass so that the subclass can have all attributes and methods of the parent class.
3. Reader. Prototype. constructor = reader; because the constructor of the subclass is overwritten, You need to reset the constructor.

If you use this method to declare a subclass, it is complicated and coorse. To make it easy to declare a subclass, we put the above three steps into a method, as shown below:

Function extend (sub, sup) {<br/>/* <br/> * Here we use an empty function, and insert an object instance created with it into the prototype chain. <br/> * This avoids the creation of a new superclass instance, because 1. the superclass example may be larger. 2. superclass constructor has some side effects 3. or execute some tasks that require a lot of computing <br/> */<br/> var F = function () {}; <br/> F. prototype = sup. prototype; <br/> sub. prototype = new F (); <br/> sub. prototype. constructor = sub; <br/> };

The detailed description is in the annotations and will not be explained in detail.

Then let's take a look at how to declare sub-classes in the first example:

Function reader () {<br/> person. call (this); <br/>}; <br/> // This sentence must be placed at the beginning of the added method, otherwise, the newly added method will be overwritten. <Br/> extend (reader, person );

OK, is it much simpler now, but we still find that the class name of the parent class is coupled in the subclass declaration. to decouple, let's take a look at a version of the extend method:

Function extend (sub, sup) {</P> <p> var F = function () {}; <br/> F. prototype = sup. prototype; <br/> sub. prototype = new F (); <br/> sub. prototype. constructor = sub; </P> <p> sub. superclass = sup. prototype; // Add a superclass attribute for the subclass, and then assign the prototype object of Sup to this attribute <br/> // ensure that the constructor attribute of prototype of sup is correctly set, this is important when using this new superclass attribute bar to construct a function with a superclass <br/> If (Sup. prototype. constructor = object. prototype. constructor) <br/> Sup. prototype. constructor = sup; </P> <p >}< br/>

Next let's take a look at how this method is used and how the subclass is declared:

Function reader () {<br/> reader. superclass. constructor. call (this); <br/>}; <br/> // This sentence must be placed at the beginning of the added method, otherwise, the newly added method will be overwritten. <Br/> extend (reader, person );

OK. The above is the whole process of class inheritance. Is it very simple? Let's take a look at prototype inheritance:

 

Javascript prototype inheritance

When using the original type inheritance, it is best to forget all the knowledge about classes and instances. There are two steps to create an object using the class-based method.

1. Define the object structure with a class declaration.

2. instantiate this class to create a new object. An object created in this way has a set of copies of all the sample attributes of this class. Each sample method has only one copy, but each object has a link to it.


When using prototype inheritance, you do not need to use classes to define the object structure. You only need to create a literal object directly. This object can then be reused by new objects, thanks to the working mechanism of prototype chain search.

 

To better understand this principle:

Let's take an example:

VaR person = {<br/> defaultname: 'hangzhou', <br/> getname: function () {<br/> return this. defaultname; <br/>}< br/>}; <br/> var reader = create (person); <br/> alert (reader. defaultname );

 

In the above example, we used a create function. By using this create function, a subclass of the parent class will be generated. How can this subclass be implemented ??? See the following:

Function create (o) {<br/> function f () {}; // create a new empty function <br/> F. prototype = O; // set the prototype attribute of F to the prototype object of input parameter O, so that you can understand the intention of the original JavaScript designer, the prototype attribute is used to point to the prototype object. <br/> return new F (); // Finally, the new element is applied to a new object created by F, then the new object is returned as the return value. The clone result returned by the function is an empty object with the given object as the prototype object. <Br/>}

The specific explanation of this function is already in the annotation. Let's take a look at the two variants of this function:

/* Is created as an attribute of the prototyped object, so that any object can use it */<br/> object. prototype. create = function () {<br/> function f () {}< br/> F. prototype = This; <br/> return new F (); <br/>}; <br/> newobject = oldobject. create ();

The following is another variant:

If (typeof object. Create! = 'Function') {<br/> object. create = function (o) {<br/> function f () {}< br/> F. prototype = O; <br/> return new F (); <br/>}; <br/>}< br/> newobject = object. create (oldobject );

I don't want to explain it any more. You must have understood it. If you don't understand it, take a good look at the rhino book.

 

If there is anything wrong with the above article, I hope you can govern more.