JavaScript Object-oriented (inheritance)

Questions:

　　Now there is 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

Take a look at the code first:

  function ClassA (scolor) {        this.color=scolor;        This.saycolor=function () {            alert (this.color);        };    }      function ClassB (scolor,sname) {        This.newmethod=classa;        This.newmethod (Scolor);        Delete This.newmethod;  Remove the reference to the ClassA so that it cannot be called later. All new properties and new methods must be defined after removing the code of the new method, otherwise overriding the relevant properties and methods of the superclass            This.name=sname;        This.sayname=function () {            alert (this.name);        };    }  

　　

This approach seems very complex, in fact, it is very simple, in the inherited function, a new variable newmethod, and then the ClassA pointer to the variable, and then call this method in ClassB, This actually newmethod the scope of the reference, which means that this point is the object ClassB instantiated.

To prove the validity of the front, run the following example

    var obja = new ClassA ("Red");    var objb = new ClassB ("Blue", "Nicholas");    Obja.saycolor ();  Red    objb.saycolor ();  Blue    objb.sayname ();   Nicholas

Because of the popularity of this inheritance method,ECMAScript adds two new methods to the function object, called Call () and apply (), so the method above can be overridden using the call or apply method. , bind the parent object's constructor to the child object, adding a line to the child object constructor:

    function ClassB (scolor,sname) {        //this.newmethod=classa;        This.newmethod (Scolor);        Delete This.newmethod;        Classa.call (This,scolor);            This.name=sname;        This.sayname=function () {            alert (this.name);        };    }   

　　

As can be seen here, the first three lines of code directly changed to the call method, so for the top example, we change to the following look, we can directly implement the inherited

    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

　　Inheritance using the prototype property is more common

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

   Cat.prototype = new Animal ();   Point the Cat's prototype object to an instance of animal. It is equivalent to completely removing the original value of the prototype object and then assigning a new value.    Cat.prototype.constructor = Cat;   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    var cat1 = new Cat ("Da Mao", "Yellow");    alert (cat1.species); Animals  

　　

Each instance also has a constructor property, which calls the prototype object's constructor property by default.

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

　　

On 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 will explain the meaning of the second line in the code above.

Third, Direct inheritance 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:

    function 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 this is that it is more efficient (without executing and establishing 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 this sentence Cat.prototype.constructor = Cat; Actually the constructor attribute of the Animal.prototype object is also changed! alert (Animal.prototype.constructor); Cat

Four, using an empty object as an intermediary

take a look at the following code:

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

　　

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  

The above method is encapsulated into a function for ease of 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

　　

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.

Five, Copy inheritance

Implement inheritance purely using the "copy" method. Simply put, if you copy all the properties and methods of the parent object into the child object, you can also implement inheritance.

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

    function 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

　　

JavaScript Object-oriented (inheritance)