Today I'm going to describe how to build an instance of "inheriting" multiple objects.
For example, there is now a constructor for an "animal" object,
Copy Code code as follows:
function Animal () {
This.species = "Animal";
}
There is also a constructor for the "Cat" object,
Copy Code code as follows:
function Cat (name,color) {
THIS.name = name;
This.color = color;
}
How can the "cat" Inherit the "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, which is to add a row to the child object constructor:
Copy Code code as follows:
function Cat (name,color) {
Animal.apply (this, arguments);
THIS.name = name;
This.color = color;
}
var cat1 = new Cat ("hairy", "yellow");
alert (cat1.species); Animals
2. Prototype mode
A more common practice is to use the prototype property.
If the prototype object of "cat" points to a animal instance, then all instances of "cat" can inherit the animal.
Copy Code code as follows:
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. In other words, cat.prototype the object's constructor attribute, pointing to Cat.
We have deleted 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. That's what the second line means.
In short, 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;
3. Direct Inheritance Prototype
Because of the animal object, immutable properties can be written directly to Animal.prototype. So, we can also let cat () skip Animal () and inherit Animal.prototype directly.
Now, let's rewrite the animal object first:
Copy Code code as follows:
function Animal () {}
Animal.prototype.species = "Animal";
Then, the cat's prototype object is then pointed to the animal prototype object, which completes the inheritance.
Copy Code code as follows:
Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;
var cat1 = new Cat ("hairy", "yellow");
alert (cat1.species); Animals
Compared to the previous method, the advantage of this is that it is more efficient (without executing and establishing animal instances), and compares memory. The disadvantage is that Cat.prototype and Animal.prototype now point to the same object, and any changes to Cat.prototype will be reflected in Animal.prototype.
So, the above section of code is actually problematic. Please look at the second line
Cat.prototype.constructor = Cat;
This sentence actually put the Animal.prototype object's constructor attribute also to get rid of!
alert (Animal.prototype.constructor); Cat
4. Using empty objects as intermediaries
Because of the above disadvantages of "direct inheritance prototype", an empty object can be used as an intermediary.
Copy Code code as follows:
var F = function () {};
F.prototype = Animal.prototype;
Cat.prototype = new F ();
Cat.prototype.constructor = Cat;
F is an empty object, so it hardly takes up memory. At this point, modifying the prototype object of CAT will not affect the animal prototype object.
alert (Animal.prototype.constructor); Animal
5. Encapsulation function of prototype mode
We encapsulate the above method into a function that is easy to use.
Copy Code code as follows:
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
Copy Code code as follows:
Extend (Cat,animal);
var cat1 = new Cat ("hairy", "yellow");
alert (cat1.species); Animals
This extend function, is Yui library How to implement the method of inheritance.
In addition, explain one point. Last line of function body
Child.uber = Parent.prototype;
It means to set a Uber property for the child object, which points directly to the parent object's prototype property. So this opens a channel on the child object that can call the parent object's method directly. This line is placed here only to achieve the completeness of inheritance, and is purely a standby nature.
6. Copy inheritance
Above is the adoption of the prototype object, the 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 a parent object into a child object, can you not inherit it?
First, all the invariant attributes of animal are placed on its prototype object.
Copy Code code as follows:
function Animal () {}
Animal.prototype.species = "Animal";
Then, write a function that implements the purpose of the property copy.
Copy Code code as follows:
function Extend2 (Child, Parent) {
var p = parent.prototype;
var c = Child.prototype;
for (var i in P) {
C[i] = P[i];
}
C.uber = p;
}
The function is to copy the properties of the parent object's prototype object, one by one to the prototype object of the child object.
When used, write like this:
Copy Code code as follows:
Extend2 (Cat, Animal);
var cat1 = new Cat ("hairy", "yellow");
alert (cat1.species); Animals
Not finished, please continue reading the third section, "The inheritance of non-constructors."
Finish
