JavaScript in-depth analysis of object-oriented programming

Two. Javascript Object-Oriented programming: inheritance of constructors

This section focuses on how to generate an instance of "Inherit" multiple objects.

For example, there is now a constructor for 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 to make "cat" Inherit "animal"?

1. Constructor binding

The simplest method, presumably, is to use the call or Apply method to bind the parent object's constructor to a child object, that is, to add a line to the child 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

The more common practice is to use the prototype property.

If the prototype object of "cat" points to an instance of animal, then all instances of "cat" 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 point the cat's prototype object to an instance of animal.

1. 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?

1. Cat.prototype.constructor = Cat;

It turns out that any prototype object has a constructor property that points to its constructor. In other words, the constructor property of the Cat.prototype object is pointing to the Cat.

We have removed the original value of this prototype object in the previous step, so the new prototype object has no constructor attribute, so we have to add it manually, otherwise the "inheritance chain" will go wrong. This is the meaning of the second line.

In short, 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,

1. 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.

1. O.prototype.constructor = O;

3. Direct succession to prototype

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:

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

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

1. Cat.prototype = Animal.prototype;
2. CatCat.prototype.constructor = cat;
3. var cat1 = new Cat ("Da Mao", "Yellow");
4. 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

1. Cat.prototype.constructor = Cat;

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

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

4. Using an empty object as an intermediary

Since the "Direct inheritance prototype" has these drawbacks, 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 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.

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

5. Encapsulation function for prototype mode

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

1. function extend (child, Parent) {
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. }

When used, 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 Yui Library implements the method of inheriting.

Also, one point. Last line of function body

1. Child.uber = Parent.prototype;

It means setting an Uber property for the sub-object, which points directly to the parent object's prototype property. This then opens a channel on the 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.

6. 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?

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

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

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

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 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:

1. Extend2 (Cat, Animal);
2. var cat1 = New Cat ("Da Mao","yellow");
3. alert (cat1.species); //Animal

JavaScript in-depth analysis of object-oriented programming