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() {
= 'animal';
}
There is also a constructor for the "cat" object.
function cat(name,color) {
= name;
= 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) {
(this,arguments);
= name;
= color;
}
var cat1 = new cat("haha", 'red');
(); //animal
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 = ;
var c = ;
for (var i in p) {
c[i] = p[i];
}
= p; //Bridge function}
How to use:
extend(cat, animal);
var cat1 = new cat("haha","red");
alert(); // animal
Prototype inheritance
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
= new animal();
= cat;
var cat1 = new cat("haha","red");
( == cat); //true
(); // 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
= new animal();
( == 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
= new animal();
var cat1 = new cat("haha", 'red');
( == 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. Change the constructor value of the object 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;
Directly inherit prototype
Since in animal objects, unchanged properties can be written directly in. Then, directly letting the pointer realize inheritance.
Now let's rewrite the animal object first as:
function animal() {
}
= 'animal';
Then implement inheritance:
= ;
= cat;
var cat1 = new cat("haha","red");
(); // animal
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.
= ;
This line of code points to the same object, so if a certain property is changed, it will be reflected on it, which is obviously not what we want to see.
For example, we run:
( == animal) //false
It turned out to be false, why? = cat; This line will also change the constructor attribute.
Use empty objects as intermediary
var F = function(){};
= ;
= new F();
= 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.
( == animal); // true
Then we encapsulate the above method:
function extend(Child, Parent) {
var F = function(){};
= ;
= new F();
= Child;
= ;
}
When using it, the method is as follows:
extend(cat,animal);
var cat1 = new cat("haha","red");
(); // animal
= ; 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, allowing instances of the child object to 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.