Inheritance of javascript against object programming

The previous blog introduced the encapsulation of javascript object-oriented programming principles. Today, we will introduce inheritance to you. There is no class concept in javascript, and it cannot be like c # or java, directly use classes to inherit classes. For example, there is an "animal" object constructor.

Function Animal (){

This. species = "animal ";

}

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

Function Cat (name, color ){

This. name = name;

This. color = color;

}

How can we make this cat have the characteristics of animals? That is to say, how can we make it inherit from animals? Five methods are provided below! Let's ask you about inheritance!

I. constructor binding

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

Function Cat (name, color ){

Animal. apply (this, arguments );

This. name = name;

This. color = color;

}

Var cat1 = new Cat ("Da Mao", "yellow ");

Alert (cat1.species); // The output is: Animal

In this way, cats can inherit the attributes of animals!

Ii. prototype mode

This method is more common and uses the prototype attribute.

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

Cat. prototype = new Animal ();

Cat. prototype. constructor = Cat;

Var cat1 = new Cat ("Da Mao", "yellow ");

Alert (cat1.species); // animal

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

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?

Cat. prototype. constructor = Cat;

Originally, any prototype object has a constructor attribute pointing to its constructor. If there is no "Cat. prototype = new Animal ();" line, Cat. prototype. constructor points to Cat. After adding this line, Cat. prototype. constructor points to Animal.

Alert (Cat. prototype. constructor = Animal); // true

More importantly, each instance also has a constructor attribute. By default, the constructor attribute of the prototype object is called.

Alert (cat1.constructor = Cat. prototype. constructor); // true

Therefore, after running "Cat. prototype = new Animal ();", cat1.constructor also points to Animal!

Alert (cat1.constructor = Animal); // true

This obviously leads to the disorder of the inheritance chain (cat1 is generated by the constructor of the Cat. prototype object). Therefore, we must manually correct the constructor value of the Cat. prototype object to Cat. This is what the second line means.

This is a very important point. It is essential to comply with programming. This is observed in the following sections, that is, if the prototype object is replaced,

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.

O. prototype. constructor = o;

If you do not understand prototype and constructor very well, read the following blog about the underlying principles of constructor/prototype in Javascript attributes:

Iii. inherit prototype directly

The third method is to improve the second method. 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:

Function Animal (){}

Animal. prototype. species = "Animal ";

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

Cat. prototype = Animal. prototype;

Cat. prototype. constructor = Cat;

Var cat1 = new Cat ("Da Mao", "yellow ");

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.

Cat. prototype. constructor = Cat;

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

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

4. Use empty objects as intermediary

Because "directly inheriting prototype" has the preceding disadvantages, there is a fourth method that uses an empty object as an intermediary.

Var F = function (){};

F. prototype = Animal. prototype;

Cat. prototype = new F ();

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.

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

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

Function extend (Child, Parent ){

Var F = function (){};

F. prototype = Parent. prototype;

Child. prototype = new F ();

Child. prototype. constructor = Child;

Child. uber = Parent. prototype;

}

The method is as follows:

Extend (Cat, Animal );

Var cat1 = new Cat ("Da Mao", "yellow ");

Alert (cat1.species); // animal

This extend function is how the YUI library implements inheritance.

In addition, one note is that the last row of the function body

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. (Uber means "up" and "up ".) This is equivalent to opening a channel on the sub-object. You can directly call the method of the parent object. This line is put here only to realize the completeness of inheritance, which is purely standby.

V. 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? In this way, we have the fifth method.

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

Function Animal (){}

Animal. prototype. species = "Animal ";

Then, write a function to copy the attributes.

Function extend2 (Child, Parent ){

Var p = Parent. prototype;

Var c = Child. prototype;

For (var I in p ){

C [I] = p [I];

}

C. uber = p;

}

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:

Extend2 (Cat, Animal );

Var cat1 = new Cat ("Da Mao", "yellow ");

Alert (cat1.species); // animal

In summary, inheritance can inherit attributes, and pages can inherit methods, but there is no concept of method in scripting! The Inheritance Mechanism in javascript only relies on simulation. In some object-oriented languages, it is rough and has some defects. But in general, javascript is a very good small language, it is worth learning !.