The inheritance of JavaScript Constructors (reference network)

The first part of the series focuses on how to "encapsulate" data and methods, and how to generate instances from prototype objects.

Today's introduction is about five ways to "inherit" 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 to make "cat" Inherit "animal"?

First, constructor binding

The first method is also the simplest method, using the call or Apply method to bind the parent object's constructor to a child object, adding a line to the child 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); Animals

Second, prototype mode

The second method is more common, using the prototype property.

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

Cat.prototype = new Animal ();

Cat.prototype.constructor = Cat;

var cat1 = new Cat ("Da Mao", "Yellow");

alert (cat1.species); Animals

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

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, and 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, which calls the prototype object's constructor property 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 an inheritance chain disorder (CAT1 is obviously generated with the constructor cat), so we have to manually correct the constructor value of the Cat.prototype object to Cat. This is the meaning of the second line.

This is an important point to be sure to follow when programming. This is followed by the following, that is, if you replace the prototype object,

O.prototype = {};

The next step, then, must be to add the constructor property to the new prototype object and refer to this property back to the original constructor.

O.prototype.constructor = O;

Third, direct succession prototype

The third method is the improvement of the second method. Because of the animal object, the invariant property can be written directly to Animal.prototype. So, we can also let cat () skip Animal () and inherit Animal.prototype directly.

Now, we'll first rewrite the animal object:

function Animal () {}

Animal.prototype.species = "Animal";

Then, the cat's prototype object is then pointed to the animal prototype object, which completes the inheritance.

Cat.prototype = Animal.prototype;

Cat.prototype.constructor = Cat;

var cat1 = new Cat ("Da Mao", "Yellow");

alert (cat1.species); Animals

The advantage of doing this compared to the previous method is that it is more efficient (without having to execute and establish an instance of animal) and saves memory. The disadvantage is that Cat.prototype and Animal.prototype now point to the same object, so any changes to the Cat.prototype will be reflected in the Animal.prototype.

So, the above piece of code is actually problematic. Take a look at the second line

Cat.prototype.constructor = Cat;

This sentence actually changed the constructor attribute of the Animal.prototype object too!

alert (Animal.prototype.constructor); Cat

Iv. use of empty objects as intermediaries

Since the "Direct inheritance prototype" has the disadvantages mentioned above, there is a fourth method, using an empty object as the intermediary.

var F = function () {};

F.prototype = Animal.prototype;

Cat.prototype = new F ();

Cat.prototype.constructor = Cat;

F is an empty object, so it hardly accounts for memory. At this point, modifying the cat's prototype object does not affect the animal prototype object.

alert (Animal.prototype.constructor); Animal

We encapsulate the above method into a function that is easy to use.

function extend (child, Parent) {

var F = function () {};

F.prototype = Parent.prototype;

Child.prototype = new F ();

Child.prototype.constructor = child;

Child.uber = Parent.prototype;

}

When used, the method is as follows

Extend (Cat,animal);

var cat1 = new Cat ("Da Mao", "Yellow");

alert (cat1.species); Animals

This extend function, is how Yui Library implements the method of inheriting.

Also, note that the last line of the function body

Child.uber = Parent.prototype;

It means setting an Uber property for the sub-object, which points directly to the parent object's prototype property. (Uber is a German word that means "up", "up".) This is equivalent to opening a channel on a child object that can call the parent object's method directly. This line is put here, just to achieve the completeness of inheritance, is purely an alternative nature.

V. Copy inheritance

Above is the use of prototype objects, implementation of inheritance. We can also change a way of thinking, purely using the "copy" method to achieve inheritance. Simply put, if you copy all the properties and methods of the parent object into the sub-object, can you also implement inheritance? So we have a fifth method.

First, all the invariant properties of animal are placed on its prototype object.

function Animal () {}

Animal.prototype.species = "Animal";

Then, write a function that implements the purpose of the property copy.

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 to copy the attributes from the parent object's prototype object to the prototype object of the child object. One by one

When used, write this:

Extend2 (Cat, Animal);

var cat1 = new Cat ("Da Mao", "Yellow");

alert (cat1.species); Animals

The inheritance of JavaScript Constructors (reference network)