Understanding javascript Object Inheritance, and javascript Object Inheritance

Understanding javascript Object Inheritance, and javascript Object Inheritance

First, I will study it from a question. 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 a cat object wants to inherit the attributes of an animal object, what should we do?

Constructor binding
It is the easiest way to bind a constructor. Use call or apply to bind the parent object to the self-object.

Function cat (name, color) {animal. apply (this, arguments); this. name = name; this. color = color;} var cat1 = new cat ("haha", 'red'); console. log (cat1.type); // animal

However, this method is rare.

Copy inheritance
If all attributes and methods of the parent object are copied to the sub-object, inheritance can also be implemented.

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 Function}

Usage:

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

Prototype)
Compared with the above direct binding, prototype inheritance is more common. For prototype, I have simply summarized it.

Each function has a prototype attribute that points to an object reference. When a new instance is created using the new keyword, the instance object inherits the attributes and methods from the prototype object.

That is to say, if you point the prototype attribute of the "cat" constructor to an "animal" instance, when you create a "cat" object instance, it inherits the attributes and methods of the "animal" object.

Inherited instance

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. In the first line of the code, we direct the prototype object of the cat function to an animal object instance (which includes 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
That is to say, each prototype object has a constructor attribute pointing to its constructor.

2) Let's 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 can see that the constructor of the Instance cat1 is animal, so it is obviously incorrect... Cat1 is generated only when it is new cat (), so we should manually correct it. Change the constructor value of the cat. prototype object to cat.

3). So this is also worth noting. If we replace the prototype object, we should manually correct the constructor attribute of the prototype object.

O. prototype = {};
O. prototype. constructor = o;
Directly inherit prototype
Because in animal objects, constant attributes can be directly written in animal. prototype. Then, direct cat. prototype to animal. prototype to realize inheritance.

Now we will first rewrite the animal object:

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

Then implement inheritance:

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

Compared with the previous method, this method is more efficient (no animal instance is created), saving space. But is this correct? The answer is incorrect. Let's continue.

Cat. prototype = animal. prototype;
This line of code allows cat. prototype and animal. prototype points to the same object, so if cat is changed. A prototype attribute is reflected in animal. on prototype, this is obviously 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 constructor attribute of animal. prototype.

Use empty objects as intermediary

  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, it hardly occupies the memory. Modifying the prototype object of cat does 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;　　}

The method is as follows:

Extend (cat, animal); var cat1 = new cat ("haha", "red"); console. log (cat1.type); // animal

Child. uber = Parent. prototype; this line of code serves as a bridge to direct the uber attribute of the sub-object to the prototype attribute of the parent object. It is equivalent to opening a channel called uber on the Self-object, allows the sub-object instance to use all attributes and methods of the parent object.

The above is my understanding of the inheritance of javascript objects, hoping to help you more or less. Thank you for reading this article.