ES5 inheritance
ES5 has no concept of classes, so classes are written with functions, so inheritance uses a prototype chain to carry out an inheritance.
In fact, these inheritances are not difficult, and you can generally understand them after you have typed them. The problem is that they are easy to forget, because they are not used at all, so it is convenient to record and forget them afterwards.
1 Prototype chain inheritance
2 Constructor inheritance
3 Combination inheritance
4 Prototype chain inheritance
5 Parasitic combined inheritance (recommended)
1 Prototype chain inheritance
As the name suggests, it is to inherit the prototype. It is
simple and rude to look at the picture. The instance of the parent class is used as the prototype of the subclass.
The result is
strange, what we added is the color array of s, how to print d has changed.
This is the shortcoming of prototype chain inheritance: as shown in the figure, we have no place to pass parameters to the husband class, so the first shortcoming is that you cannot call the constructor of the parent class, that is, you cannot pass the value to the parent class and then inherit the prototype In the chain method, because Son.prototype integrates the same object, the colors address is also the same, so changing one of them will cause other changes.
2 constructor inheritance
It is to use the constructor of the parent class as an enhancement of the subclass instance. This can be a bit awkward. Looking at the code,
simply put, when you new Son, he immediately calls the Father function and changes its this point. Now you can The value is passed to the father. Everyone knows how to pass the call.
Disadvantages: As shown in the figure, there is no shadow of prototype. Son's prototype has no relationship with the parent class. So his first disadvantage is that he cannot inherit the methods and properties on the prototype chain of the parent class, as shown in the figure.
3 Combination inheritance, this inheritance is 1+2 inheritance, which is prototype chain + constructor inheritance
Look at the picture
This time there is nothing to say, the prototype is also there, the structure is also there, and the value can be passed to the parent class, but! ! !
In fact, he has called the constructor of the parent class twice, the first time when Father.call, and the second time when new Father.
This is also his shortcoming
4 Prototype inheritance
The third optimization method. Doesn’t the third one say that the constructor of the parent class will be called twice? I will write an empty object and let the prototype of the empty object point to the prototype of the parent class
. Call the constructor of A, even if A is an empty object.
5 Parasitic combination inheritance, similar to the fourth type, except that there is no need for an intermediary, directly use object.create()
It just changed a little. But new is not needed, so this method is generally the most recommended method.
The Object.creat(obj [,props]) method is used to create an empty object, and the prototype points to obj. The second parameter is the same as the second parameter of object.defineProperties. You can go and learn.
ES6 mainly uses super plus extends inheritance
Super is used to call the constructor and method of the parent class. The super of the constructor is necessary. Why? Because super is used to call the constructor of the parent class, if there is a value in the constructor of the parent class that needs to be assigned, and you have not called, there will be a problem of not getting the value, so ES6 stipulates that we have a counstructor. To write super.
Personal opinion, if there is any mistake, please point it out.