Inheritance is a very important means when we implement object-oriented programming. Although we say that we cannot over-inheritate and use more combinations instead of inheritance, inheritance is always inevitable. What we want to discuss here is the inheritance mechanism in Javascript.
There is actually no concept of inheritance in Javascript, but we can imitate it through some means. This inheritance actually copies one object into another. You need to note that all local and host classes cannot be inherited as base classes, mainly for security considerations.
There are about three categories of inheritance in Javascript: 1. Object impersonation; 2. Prototype inheritance; 3. Mixing of the two.
1. Imitation of the object
In fact, object impersonation is closely related to this keyword (so it is important to fully understand this keyword in Javascript:P). The constructor uses this to assign values to attributes and methods, and the constructor can also be regarded as an ordinary function, so we can make the constructor of our base class a constructor of the subclass, and then call this function inside the subclass, and the subclass will get the properties and methods of the parent class.
The principle is very simple, so how do we implement it? Let’s take a practical operation using the code example.
Implementation method 1 of the object impersonation , our most commonly used method of creating new objects:
The code copy is as follows:
var classA = function(name){
this.name = name;
this.alertName = function(){
alert(this.name);
}
}
var classB = function(name,age){
this.myConstructor = classA;
this.myConstructor(name);
delete this.myConstructor;
this.age = age;
this.alertAge = function(){
alert(this.age);
}
}
In order to verify whether the above method is correct, you can test it yourself. I will write the code used for the test below:
The code copy is as follows:
var objA = new classA('DK');
objA.alertName();//DK
var objB = new classB('DS',20);
objB.alertName();//DS
objB.alertAge();//20
This is called object impersonation. In addition, there are two other ways to implement object impersonation. Although their implementation methods are different, their principles are the same.
Object impersonation implementation method 2 , use call method:
The code copy is as follows:
var classA = function(name){
this.name = name;
this.alertName = function(){
alert(this.name);
}
}
var classB = function(name,age){
classA.call(this,name);
this.age = age;
this.alertAge = function(){
alert(this.age);
}
}
It can also be seen through the code that in the first method, we created a new function pointer to point to the parent class, called the function, and then deleted the pointer. Here we use the call method to run the constructor of the parent class under this object, achieving the same purpose. In addition, the call method is the apply method.
Object impersonation implementation method three , use the apply method:
The code copy is as follows:
var classA = function(name){
this.name = name;
this.alertName = function(){
alert(this.name);
}
}
var classB = function(name,age){
classA.apply(this,new Array(name));
this.age = age;
this.alertAge = function(){
alert(this.age);
}
}
In fact, you can see that the apply method is very similar to the call method, except that the parameters are slightly different.
2. Prototype inheritance
Everyone should have some understanding of the prototype object. All properties and methods on the prototype object will be passed to all instances of the class. All the properties and methods of the parent class are paid to the prototype object of the child class, which is equivalent to realizing our inheritance.
If a subclass wants to obtain all the properties and methods of the parent class, then we will directly pay an instance of the parent class to the prototype object of the subclass. Then isn't our subclass equivalent to obtaining all the objects and methods of the parent class?
Code sample service:
The code copy is as follows:
var classA = function(){
this.name = 'DK';
this.alertName = function(){
alert(this.name);
}
}
var classB = function(name,age){
this.name = name;
this.age = age;
}
classB.prototype = new classA();
classB.prototype.alertAge = function(){
alert(this.age);
}
Note that the constructor of the parent class here needs to ensure that there are no parameters. Because even if there are constructor parameters that you cannot pass =.= when implementing prototype inheritance!
3. Mixed inheritance
As the name suggests, hybrid inheritance is the mixed use of the first two methods.
The code copy is as follows:
var classA = function(name){
this.name = name;
}
classA.prototype.alertName = function(){
alert(this.name);
}
var classB = function(name,age){
classA.call(this,name);
this.age = age;
}
classB.prototype = new classA();
classB.prototype.alertAge = function(){
alert(this.age);
}
Using object impersonation implements passing parameters to the parent class, and using prototype inheritance implements inheritance to public methods.
After talking about the inheritance methods in these three areas, it’s time to talk about the problem below.
You may be puzzled, why do you need to create a mixed inheritance with object impersonation and prototype inheritance? Yes, the most important thing is this question.
1. If you actually test it, you will find that the inheritance implemented by object impersonation, and the subclass cannot access the methods on the parent class's prototype chain.
2. Inheriting with prototypes will turn all attributes into shared attributes. If you implement two instances in the same subclass, you will find that all your instances share all attributes.
3. But this is definitely inappropriate. So there is a method of hybrid inheritance, which allows attributes to remain private and allows subclasses to access the prototype chain of the parent class.
You can try it yourself. When the object is impersonating inheritance, the subclass cannot access the prototype chain method of the parent class. All instances of the prototype chain inheritance subclass share all parent class attributes. I won't write examples here.