Understand javascript object inheritance

Let’s first study the question in depth. What is javascript object inheritance?

For example, we have a constructor of 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 wants to inherit the properties of the animal object, what should we do?

Constructor binding

Using constructor binding is the easiest way, just use call or apply to bind the parent object to the own 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); //Animals

However, this method is relatively rare.

Copy Inheritance

If all the properties and methods of the parent object are copied into the child object, inheritance can also be achieved.

 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}

How to use:

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

Prototype inheritance (prototype)

Compared with the direct binding above, the method of prototype inheritance is more common. I have briefly summarized the prototype myself.

Each function has a prototype attribute, which is a reference to an object. When creating a new instance using the new keyword, this instance object will inherit attributes and methods from the prototype object.

That is to say, if the prototype attribute of the "cat" constructor is pointed to an "animal" instance, then when the "cat" object instance is created, the properties and methods of the "animal" object are inherited.

Inheritance example

 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 point the prototype object of the cat function to an instance of an animal object (which contains the type attribute of animal).

2. What does the second line of the code mean?

1) First, if we don't add this line of code, run

cat.prototype = new animal();

console.log(cat.prototype.constructor == animal); //true

In other words, in fact, each prototype object has a constructor attribute pointing to its constructor function.

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 see that the constructor of instance cat1 is animal, so it is obviously wrong. . . cat1 is clearly generated 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 constructor attribute of the prototype object.

o.prototype = {};

o.prototype.constructor = o;

Directly inherit prototype

Since in animal objects, unchanged properties can be written directly in animal.prototype. Then let cat.prototype point to animal.prototype, which realizes inheritance.

Now let's rewrite the animal object first as:

 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); // Animals

Compared to the previous method, this method appears to be more efficient (no animal instances are created), saving space. But is this correct? The answer is incorrect, let's continue reading.

cat.prototype = animal.prototype;

This line of code allows cat.prototype and animal.prototype to point to the same object, so if a certain property of cat.prototype is changed, it will be reflected on animal.prototype, which is obviously not what we want to see.

For example, we run:

console.log(animal.prototype.constructor == animal) //false

It turned out to be false, why? cat.prototype.constructor = cat; This line will also change the constructor property of animal.prototype.

Use empty objects as intermediary

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

Combining the above two methods, because F is an empty object, it almost does not occupy memory. Modifying cat's prototype object at this time will not affect animal's prototype object.

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 using it, 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 is a bridge function, allowing the uber attribute of the child object to point directly to the prototype attribute of the parent object, which is equivalent to opening a channel called uber on the own object, so that the instance of the child object can use all the properties and methods of the parent object.

The above is my understanding of inheriting JavaScript objects. I hope it can help you more or less. Thank you for your reading.