Inheritance JavaScript constructor

There is now a "animal" object constructor.

function Animal(){
    this.species = "动物";
}

There is also a constructor "cat" object.

function Cat(name,color){
    this.name = name;
    this.color = color;
}

How can the "cat" inherit "the animal" mean?

First, the constructor binding

The method of using the call or apply, the parent object constructor is bound to the child object, the child object that is added to a row in the constructor:

function Cat(name,color){
    Animal.apply(this, arguments);
    this.name = name;
    this.color = color;
}
var cat1 = new Cat("AA猫","黑色");
alert(cat1.species);    // 动物

Two, prototype mode

If the "cat" prototype object, point to an instance of Animal, then all instances of "cat", will be able to inherit the Animal.

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("AA猫","黑色");
alert(cat1.species);    // 动物

Above, we point to the Cat prototype object is an instance of Animal.

Cat.prototype = new Animal();

It is equivalent to completely remove the original value of the prototype object, and then assign a new value.

Cat.prototype.constructor = Cat;

Any prototype object has a constructor property, point to its constructor.

If no Cat.prototype = new Animal (); This line, Cat.prototype.constructor Cat is directed to, after the addition of this line, Cat.prototype.constructor point Animal.

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

In addition, each instance also has a constructor property, called by default prototype object's constructor property.

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

Thus, in operation Cat.prototype = new Animal (); after this line, cat1.constructor also point Animal.

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

This obviously leads inherited disorder chain (Cat CAT1 obviously generated by the constructor), it is necessary to manually correct the value to the object constructor Cat.prototype Cat.

If you replace the prototype object,

o.prototype = {};

So, the next step is to add a new prototype object constructor property, and this property refers back to the original constructor.

o.prototype.constructor = o;

Third, the direct successor to the prototype

Since the Animal object, the same property can be written Animal.prototype directly.

So, we can let the Cat () to skip the Animal (), inherited directly Animal.prototype.

First Animal objects rewrite:

function Animal(){ }
Animal.prototype.species = "动物";

Then, the Cat's prototype object, point to Animal prototype object, thus completing the inheritance.

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;
var cat1 = new Cat("AA猫","黑色");
alert(cat1.species);    // 动物

Compared with the previous method, this more efficient (and do not create an instance of Animal execution of), but also save memory.

But Cat.prototype and Animal.prototype now point to the same object, then any changes to the Cat.prototype, will be reflected in the Animal.prototype.

Therefore, the above second line of code is actually a problem:

Cat.prototype.constructor = Cat;

Here in fact the object's constructor property Animal.prototype also get rid of!

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

Fourth, the use of space object as intermediary

As the "direct successor prototype" presence of the above drawbacks, so there is a fourth method, using as an intermediary a null object.

var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;

F is an empty object, accounting for almost no memory.

Then, modify the Cat prototype object, the object will not affect the prototype of Animal.

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

We above method, the package as a function, 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 following method

Extend (Cat, Animal);
 var CAT1 = new new Cat ( "AA cat", "black" ); 
Alert (cat1.species);     // Animal

The extend function is how to achieve the YUI library inherited method.

Further, the last line in the function body

Child.uber = Parent.prototype;

Means for setting a sub-object uber attribute, prototype property directly to the parent object.

This corresponds to open a passage in the child object, the parent object can be called direct method.

This line on here, just to achieve completeness inheritance, purely residual nature.

Five copies of inheritance

If all the properties and methods of the parent object, the child object is copied into, inheritance can be realized.

First, all of the same attributes Animal, are placed on its prototype object.

function Animal(){}
Animal.prototype.species = "动物";

Then, a write function, object attribute copy achieved.

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 role of this function is to parent object prototype object attributes, all copies of the prototype object to Child object.

When using write:

extend2 (Cat, Animal);
 var CAT1 = new new Cat ( "AA cat", "black" ); 
Alert (cat1.species);     // Animal