In-depth analysis of JavaScript Object-Oriented Programming and Object-Oriented Programming

In-depth analysis of JavaScript Object-Oriented Programming and Object-Oriented Programming

Ii. Javascript Object-Oriented Programming: inheritance of Constructors

This section describes how to generate an instance that "inherits" multiple objects.

For example, there is a constructor of an "animal" object,

1. Function Animal (){
2. This. species = "animal ";
3. }

There is also a constructor for the "cat" object,

1. Function Cat (name, color ){
2. This. name = name;
3. This. color = color;
4. }

How can we inherit "Animals" from "Cats?

1. constructor binding

The simplest method is to use the call or apply method to bind the constructor of the parent object to the sub-object, that is, to add a row to the sub-object constructor:

1. Function Cat (name, color ){
2. Animal. apply (this, arguments );
3. This. name = name;
4. This. color = color;
5. }
6. Var cat1 = new Cat ("Da Mao", "yellow ");
7. Alert (cat1.species); // animal

2. prototype mode

A more common practice is to use the prototype attribute.

If the prototype object of "cat" points to an Animal instance, then all "cat" instances can inherit Animal.

1. Cat. prototype = new Animal ();
2. Cat. prototype. constructor = Cat;
3. Var cat1 = new Cat ("Da Mao", "yellow ");
4. Alert (cat1.species); // animal

In the first line of the code, we direct the prototype object of Cat to an Animal instance.

1. Cat. prototype = new Animal ();

It is equivalent to deleting the original value of the prototype object and then assigning a new value. But what does the second line mean?

1. Cat. prototype. constructor = Cat;

Originally, any prototype object has a constructor attribute pointing to its constructor. That is to say, the constructor attribute of the Cat. prototype object directs to Cat.

We have deleted the original value of this prototype object in the previous step. Therefore, the new prototype object does not have the constructor attribute. Therefore, we must manually add it. Otherwise, the "inheritance chain" in the future may cause problems. This is what the second line means.

In short, this is a very important point, which must be followed in programming. This is observed in the following sections, that is, if the prototype object is replaced,

1. O. prototype = {};

Then, the next step is to add the constructor attribute to the new prototype object and direct the attribute back to the original constructor.

1. O. prototype. constructor = o;

3. inherit prototype directly

Because Animal objects can directly write unchanged attributes to Animal. prototype. Therefore, we can also let Cat () skip Animal () and inherit Animal. prototype directly.

Now, we will first rewrite the Animal object:

1. Function Animal (){}
2. Animal. prototype. species = "Animal ";

Next, point the prototype object of Cat to the prototype object of Animal to complete inheritance.

1. Cat. prototype = Animal. prototype;
2. CatCat. prototype. constructor = Cat;
3. Var cat1 = new Cat ("Da Mao", "yellow ");
4. Alert (cat1.species); // animal

Compared with the previous method, this method is more efficient (you do not need to execute or create an Animal instance) and saves memory. The disadvantage is that Cat. prototype and Animal. prototype point to the same object. Any modifications to Cat. prototype will be reflected in Animal. prototype.

Therefore, the above Code is actually problematic. See the second line.

1. Cat. prototype. constructor = Cat;

In fact, the constructor attribute of the Animal. prototype object is also removed!

1. Alert (Animal. prototype. constructor); // Cat

4. Use empty objects as intermediary

Because "directly inheriting prototype" has the preceding disadvantages, an empty object can be used as an intermediary.

1. Var F = function (){};
2. F. prototype = Animal. prototype;
3. Cat. prototype = new F ();
4. Cat. prototype. constructor = Cat;

F is a null object, so it hardly occupies memory. In this case, modifying the prototype object of Cat will not affect the prototype object of Animal.

1. Alert (Animal. prototype. constructor); // Animal

5. encapsulation functions in prototype mode

We encapsulate the above method into a function for ease of use.

1. Function extend (Child, Parent ){
2.  
3. Var F = function (){};
4. F. prototype = Parent. prototype;
5. Child. prototype = new F ();
6. Child. prototype. constructor = Child;
7. Child. uber = Parent. prototype;
8. }

The method is as follows:

1. Extend (Cat, Animal );
2. Var cat1 = new Cat ("Da Mao", "yellow ");
3. Alert (cat1.species); // animal

This extend function is how the YUI library implements inheritance.

Note. Last line of function body

1. Child. uber = Parent. prototype;

This parameter sets an uber attribute for the sub-object. This attribute directly points to the prototype attribute of the parent object. Therefore, you can open a channel on the sub-object to directly call the method of the parent object. This line is put here only to realize the completeness of inheritance, which is purely standby.

6. Copy inheritance

The above uses prototype objects to implement inheritance. We can also use the "copy" method to implement inheritance. Simply put, if we copy all the attributes and methods of the parent object into the sub-object, can we still implement inheritance?

First, put all the unchanged attributes of Animal on its prototype object.

1. Function Animal (){}
2. Animal. prototype. species = "Animal ";

Then, write a function to copy the attributes.

1. Function extend2 (Child, Parent ){
2. Var p = Parent. prototype;
3. Var c = Child. prototype;
4. For (var I in p ){
5. C [I] = p [I];
6. }
7. C. uber = p;
8. }

This function is used to copy the attributes of the prototype object of the parent object to the prototype object of the Child object.

Write as follows:

1. Extend2 (Cat, Animal );
2. Var cat1 = new Cat ("Da Mao", "yellow ");
3. Alert (cat1.species); // animal