JavaScript Object-oriented programming (ii) Inheritance of constructors

The first part of this series describes how to "encapsulate" data and methods, and how to generate instances from a prototype object.

Today we are going to introduce five methods of "inheritance" between objects.

For example, there is now a constructor for an "animal" object.

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 the "cat" Inherit the "animal"?

First, constructor binding

The first method is also the easiest way to bind the parent object's constructor to a child object by using the call or Apply method, which is to add a row to the child object constructor:

function Cat (name,color) {

Animal.apply (this, arguments);

THIS.name = name;

This.color = color;

}

var cat1 = new Cat ("hairy", "yellow");

alert (cat1.species); Animals

Second, prototype mode

The second method is more common and uses the prototype property.

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

Cat.prototype = new Animal ();

Cat.prototype.constructor = Cat;

var cat1 = new Cat ("hairy", "yellow");

alert (cat1.species); Animals

The first line of code, we point the cat's prototype object to a animal instance.

Cat.prototype = new Animal ();

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

Cat.prototype.constructor = Cat;

It turns out that any prototype object has a constructor property that points to its constructor. If there is no "Cat.prototype = new Animal ();" In this line, Cat.prototype.constructor is pointing 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 property that invokes the constructor property of the prototype object by default.

Alert (Cat1.constructor = = Cat.prototype.constructor); True

Therefore, in the run "Cat.prototype = new Animal ();" After this line, Cat1.constructor also points to animal!

Alert (Cat1.constructor = = Animal); True

This obviously leads to the disorder of the inheritance chain (CAT1 is obviously generated with the constructor cat), so we have to correct it manually and change the constructor value of the Cat.prototype object to Cat. That's what the second line means.

This is a very important point to be sure to follow when programming. This is followed, that is, if the prototype object is replaced,

O.prototype = {};

The next step, then, is necessarily to add the constructor attribute to the new prototype object and refer back to the original constructor.

O.prototype.constructor = O;