Javascript Object-Oriented Programming 2: Inheritance of constructors

The first part of the series focuses on how to "encapsulate" data and methods, and how to generate instances from prototype objects.
Five ways to "inherit" between objects.
For example, there is now a constructor for an "animal" object.

function Animal () {    

There is also a constructor for the "Cat" object.

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

How do you get the cat to inherit the 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

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

V. Copy inheritance

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 () {} 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

Javascript Object-Oriented Programming 2: Inheritance of constructors