Understanding JavaScript Object Inheritance _javascript tips

Let's start with a problem and delve into what is JavaScript object inheritance?

For example, we have a constructor for an "animal" object.

  function animal () {
    This.type = ' animal ';
  }

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

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

We know that cats also belong to animals, if this cat object to inherit the properties of animal objects, what should we do?

Constructor bindings
Using constructor bindings is the easiest way to bind a parent object to a self object using call or apply.

 function Cat (name,color) {
    animal.apply (this,arguments);
    this.name = name;
    This.color = color;
  }
  var cat1 = new Cat ("haha", ' red ');
  Console.log (Cat1.type); Animals

But this method is relatively rare.

Copy inheritance
inheritance can also be implemented if all the properties and methods of the parent object are copied into the child object.

  function extend (child, Parent) {
var p = parent.prototype;
var c = child.prototype;
for (var i in P) {
c[i] = p[i];
}
c.uber = p;   Bridge effect
}

How to use:

 Extend (cat, animal);
  var cat1 = new Cat ("haha", "red");
  alert (cat1.type);   Animals

Prototype Inheritance (prototype)
compared to the direct binding above, the prototype inheritance method is more common, for prototype, I briefly summed up a bit.

Each function has a prototype property, which is a reference to an object that inherits properties and methods from the prototype object when a new instance is created using the newer keyword.

That is, if you point the prototype attribute of the "cat" constructor to an "animal" instance, then you create a "cat" object instance that inherits the properties and methods of the "Animal" object.

Inheriting instances

 Cat.prototype = new Animal ();
  Cat.prototype.constructor = cat;
  var cat1 = new Cat ("haha", "red");
  Console.log (Cat1.constructor = = cat);  True
  Console.log (cat1.type);//animal

1. The first line of code, we point the prototype object of the cat function to an instance of a animal object (which contains the animal type attribute).

2. What does the second line of code mean?

1, first, if we do not add this line of code, run

Cat.prototype = new Animal ();
Console.log (Cat.prototype.constructor = = animal); True
In other words, each prototype object has a constructor attribute that points to its constructor.

2), we look at the following code

 Cat.prototype = new Animal ();
  var cat1 = new Cat ("haha", ' red ');
  Console.log (Cat1.constructor = = animal);  True

From the above we see that the constructor of the instance cat1 is animal, so it is obviously wrong ... CAT1 was created by New Cat (), so we should correct it manually. The constructor value of the Cat.prototype object is changed to Cat.

3), so this is also a point we should pay attention to, if we replace the prototype object, we should manually correct the prototype object's constructor property.

O.prototype = {};
O.prototype.constructor = O;
Direct Inheritance Prototype
because in the animal object, the invariant properties can be written directly in the Animal.prototype. Then directly let Cat.prototype point to Animal.prototype also achieve inheritance.

Now let's rewrite the animal object as:

  function animal () {
  }
  animal.prototype.type = ' animal ';

And then implement the inheritance:

 Cat.prototype = Animal.prototype;
  Cat.prototype.constructor = cat;
  var cat1 = new Cat ("haha", "red");
  Console.log (Cat1.type); Animals

This approach is more efficient (without creating animal instances) and saves space than the previous method. But is it the right thing to do? The answer is not correct, we continue to see.

Cat.prototype = Animal.prototype;
This line of code lets Cat.prototype and Animal.prototype point to the same object, so if you change one of the properties of Cat.prototype, it will be reflected on Animal.prototype, which is clearly not what we want to see.

For example, we run:

Console.log (Animal.prototype.constructor = = animal)//false
The result is false, why? Cat.prototype.constructor = cat; This line will also change the Animal.prototype's constructor attribute.

Using empty objects as mediations

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

In combination with the above two methods, because F is a null object, so almost no memory. Modifying the prototype object of CAT will not affect the prototype object of animal.

Console.log (Animal.prototype.constructor = = animal); True
Then we encapsulate the above method:

  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 ("haha", "red");
  Console.log (Cat1.type); Animals

Child.uber = Parent.prototype; This line of code is a bridge, so that the child object's Uber property directly points to the parent object's prototype property, equal to open a channel called Uber from the object, so that the child object's instance can use all the properties and methods of the parent object.

The above is to the JavaScript object inherits my understanding, hoped more or less can help everybody, thanks everybody's reading.