There are a total of six inheritance modes in JS, including prototype chain, borrowed constructor, combination inheritance, prototype inheritance parasitic inheritance and parasitic combination inheritance. In order to facilitate understanding and memory, I imagined a process and briefly explained the pattern in 6.
A very long story, let’s name it Nuwa creates humans.
Create an object
Nuwa pinched people one by one (creating objects), which was too slow, so she designed a machine (function) to create what she wanted to create, and tell him what characteristics and functions this person has, and the machine will create it. This is the factory pattern (using the same interface to create objects, and then generate a lot of repeated code, thus inventing a function (mold)).
But it is also more troublesome to build people by machines (digging soil, mud, pinching eyes, pinching nose...), so the idea of encapsulation comes, pinching noses and eyes in advance, and transforming the machine to tell the person to build what kind of eyes and noses. The machine can be installed directly. This machine is the constructor.
There are still problems like this. Assuming that if you want to make everyone who is pinched, the machine needs to install a "run" function for everyone. This process is too slow and there may be errors. Find a third party (the function method is defined outside the constructor, in the global scope). The third party is responsible for installing the running function for me. I will put it on the machine and save every time I process it. OK, everyone can run away, it is very convenient, but the problem arises again. People who create it also need N functions of "jumping" and "going". You can't find N third parties anymore, so it's meaningless to build a machine like this. So Nuwa (developer) created the prototype mode long ago... It made me so amazing.
Each function in the prototype mode has a prototype attribute, which is a pointer, pointing to the prototype object. The prototype object contains properties and methods that can be shared by all instances. This prototype object has a constructor attribute, which contains a pointer to the function where the prototype attribute is located.
It seems a bit confusing, but from the perspective of Nuwa, it is easy to understand: the creator Nuwa also invented a variety of molds (prototype objects), and we are about to start creating: 1. Create a type of human being --> Use it to create a mold for such human beings. After all, you can create everything and use whatever mold. All human-making machines (functions) have their own unique mold (prototype object), and the machine has a label [prototype] pointing to the mold. This mold has the [constructor] attribute that can be affixed with production marks, pointing to this machine, indicating that it is the mold production of this machine. Therefore, to create a type of person, you just need to change the mold. This is the benefit of prototype objects, which is convenient and fast.
The production process is as follows:
1Making Machine A:function jqA(){}; //There is a prototype attribute pointing to the mold (prototype object)
2 mold making:={
constructor: jqA, //equivalent to labeling, produced by A machine,
name:'lily',
skin:'white',
run: function(){
alert(+'run');}
This mold is responsible for creating people with a name called lili, skin white, and can run.
3. Create a person of this type var person1=new jqA();
Create another person of this type var person2=new jaA();
person1 and person2 both have a [[prototype]] attribute, indicating that it has been processed by template A and points to template A.
It's perfect, and the problem comes again. The people who produce this way are the same. Five exactly the same white-skinned beauties walked towards them, and then five same short and ugly figures, which is so terrible. Therefore, while using the template, machine A can also make the created people with different characteristics according to female instructions, such as: this blue eyes and that fat spot. . This extra function is implemented through the constructor---》 combines the constructor and prototype pattern
The production process is as follows:
//Use a combination of constructor mode and prototype mode
function Person(name,skill,country) {
=name;
=skill;
=country;
=["Liu Feng","Liu Chan"];
} //The machine can listen to the command
={
constructor:Person,
sayName:function () {
alert();
}
} //You can also use templates
var person1=new Person('Ma Chao','Iron Cavalry','Shu Kingdom');
var person2=new Person('Liu Bei','Benevolence','Shu Kingdom');
At this time, Nuwa was too lazy to take care of the machine and the template, so she installed the template directly in the machine: Initialize the prototype object in the constructor---》Dynamic prototype mode is more convenient
The production process is as follows:
function Person(name,skill,country) {
=name;
=skill;
=country;
if(typeof !=undefined){
=function () {
alert();
};
}
}
var friend=new Person('Zhang Fei','roar','Shu Kingdom');
();
Still have problems? OK, provide a parasitic constructor mode: add an internal machine to the machine, which is responsible for production, and the production person provides it to the external machine, and the external machine provides such people to the outside. (It's not usually used...)
Inheritance (my understanding—_—)
Question: Nuwa is going to create another group of people B. The template B of these people has been created, but what should I do if this group of people I have created before? Let these people filter the previous template A first, and make it OK if it is placed in B. In this way, the "B people" inherit the characteristics of the "A" type of people. How to filter: Parent example = child prototype Create B's template and create a. This a must filter A template, so let B's template equal a, and the problem is solved.
// Parent function, machine A, type A person. In its instance a, there is the [[Prototype]] property and the customized property property
function SuperType(){
=true;
}
//Add getSuperValue method in SuperType prototype object (mold A)
=function(){
return
}
//Subfunction, machine B, B type human. The constructor SubType, its instance has the [[Prototype]] attribute and the customized subproperty attribute
function SubType(){
=false;
}
//Inherited SuperType (prototype chain)
=new SuperType(); //Machine B=a
//Add getSubValue method in SubType prototype object (mold B)
=function(){
return ;
}；
var insatance=new SubType();
alert(()); //true
question:The reference type value changes because the instance shares properties, and the same problem as in the prototype pattern
Solution: Classic inheritance (borrow constructor): In fact, it is to design mold A into machine B, but it is no longer a template. Machine B will add these properties and methods in A to the produced b, but it can be controlled manually. Nuwa also commands machine B to produce different b according to the commands passed.
Calling the superclass constructor inside the subclass constructor
Is it equivalent to instantiating the attributes of the parent class into the subclass? There is a question about super() in Java
function SuperType(){
=['red','blue','green'];
}
function SubType(){
//Inherited SuperTYpe
(this);
}
var insatance1=new SubType();
('black');
alert();// 'red,blue,green,black'
var insatance2=new SubType();
alert();//'red,blue,green'
1 Pass parameters:
Borrowing construct parameters can pass parameters to supertype construct parameters in subtype construct parameters.
function SuperType(name){
=name;
}
function SubType(){
//Inherited SuperTYpe, and also passed parameters
(this，'Zhao Yun');
//Instance properties
=29；
}
var insatance=new SubType();
alert(); //Zhao Yun
alert(); //29
To ensure that the SuperType constructor does not override the properties of the subtype, you can add the properties that should be defined in the subtype after calling the supertype constructor.
question:If you waste labor and create the functions and properties of A in the machine, then the A template will be useless, which is equivalent to returning to factory mode, with lighters, do you still need to drill wood to make fire...
Solution: Combination Inheritance
There is nothing to do when working overtime in the company. Now I am rushing to get off work. The story can't be compiled anymore. Let's move the previous records of the inheritance model...
The prototype chain and constructor technology are combined together, and the prototype chain is used to implement the inheritance of prototype properties and methods, and the constructor is used to implement the inheritance of instance properties. This way, function reuse is achieved by defining methods on the prototype, which can ensure that each instance has its own attributes
Prototype inheritance:Methods are OK, but instance attributes cannot be inherited; borrow constructor: instance attributes are OK, but method cannot be implemented. Use together, perfect.
function SuperType(name){
=name;
=['red','blue','green'];
}
=function(){
alert();
};
function SubType(name，age){
//Inheritance attributes
(this,name);
=age；
}
//Inheritance method
=new SuperType();
=function(){
alert();
}
var instance1=new SubType('zhaoyun',29);
('black');
alert(); //'red,blue,green,black'
();//zhaoyun
();//29
var insatance2=new SubType('Zhuge Jin'，25)；
alert();'red,blue,green'
();//Zhuge Jin
();//25
The above is the brief discussion on the creation of js objects and their understanding and imagination of 6 inheritance models that the editor brings to you. I hope everyone supports me~