Warm reminder: If you want to better understand JS inheritance methods, you must understand the concepts of constructors, prototype objects, instantiated objects, prototype chains, etc.
The first: Prototype chain inheritance
Inheriting using the characteristics of the prototype chain
function Parent(){
= 'web frontend';
= ['JS','HTML','CSS'];
}
=function(){
();
}
function Son(){};
= new Parent();
son1 = new Son();
();
The above examples explain:
① Create a constructor called Parent, which is temporarily called the parent constructor, with two attributes name and type
②Set the Say method through the properties of the Parent constructor (i.e., the prototype object). At this time, Parent has 2 properties and 1 method.
③ Create a constructor called Son, temporarily called a subconstructor
④ Set Son's attribute (i.e., prototype object) value to the instance object of the parent constructor Parent, that is, the child constructor Son inherits the parent constructor Parent. At this time, Son also has 2 properties and 1 method.
⑤ Instantiate the Son constructor, and assign the result to the variable son1, that is, son1 is an instantiated object, and also has 2 attributes and 1 method.
⑥The Say method outputs son1, and the result is "web front-end"
Advantages: Inheritance can be realized
shortcoming:
① Because (i.e., the prototype object) inherits the Parent instantiation object, this leads to the same Son instantiation object, and all the properties and methods of the prototype object are shared. The code is as follows:
son1 = new Son();
son2 = new Son();
('VUE');
();//['JS','HTML','CSS','VUE']
();//['JS','HTML','CSS','VUE']
As a result, son1 and son2 are both ['JS','HTML','CSS','VUE']
②Son constructor instantiated object cannot pass parameters
The second type: constructor inheritance
Inherit through the constructor call method, look at the code directly:
function Parent(){
= 'web frontend';
= ['JS','HTML','CSS'];
}
function Son(){
(this);
}
son1 = new Son();
('VUE');
();//['JS','HTML','CSS','VUE']
son2 = new Son();
();//['JS','HTML','CSS']
The above examples explain:
① Create parent constructor Parent, with two attributes: name and type
② Create a child constructor Son, and call the parent constructor Parent through the call method to realize inheritance
③ Create two instantiated objects of Son, son1 and son2, respectively, add new elements to the type attribute of son1, and no new ones, son2, and the results are different, indicating that independence is achieved
advantage:
① Implement the independence of instantiated objects;
② You can also add parameters to instantiated objects
function Parent(name){
= name;
}
function Son(name){
(this,name);
}
son1 = new Son('JS');
(son1);//JS
son2 = new Son('HTML');
(son2);//HTML
shortcoming:
①The methods are all defined in the constructor. Each time the object is instantiated, the method must be created, and function multiplexing is basically impossible.
②The call method only calls the properties and methods of the parent constructor, and there is no way to call the methods of the parent constructor prototype object.
The third type: combination inheritance
To use the respective advantages of prototype chain inheritance and constructor inheritance for combination, or to look at the code:
function Parent(name){
= name;
= ['JS','HTML','CSS'];
}
=function(){
();
}
function Son(name){
(this,name);
}
= new Parent();
son1 = new Son('Zhang San');
son2 = new Son('Li Si');
('VUE');
('PHP');
();//['JS','HTML','CSS','VUE']
();//['JS','HTML','CSS','PHP']
();//Zhang San();//Li Si
The above examples explain:
① Create a constructor called Parent, which contains two attributes name and type
②Set the Say method through the properties of the Parent constructor (i.e., the prototype object). At this time, Parent has 2 properties and 1 method.
③ Create a child constructor Son, and call the parent constructor Parent through the call method to realize inheritance
④Subconstructor Son inherits the parent constructor Parent. At this time, Son also has 2 properties and 1 method.
⑤ Create two instantiated objects son1 and son2 of the constructor Son, pass different parameters, add different elements to the type attribute, and call the prototype object Say method
advantage:
①Use prototype chain inheritance to realize the inheritance of prototype object methods
②Use constructor inheritance to realize attribute inheritance, and can also be parameterized
Combined functions basically satisfy JS inheritance and are more commonly used
shortcoming:
In any case, the parent constructor is called twice: once when creating a child prototype, and the other time inside the child constructor
Fourth: Prototype inheritance
Create a function that uses parameters as a prototype object
function fun(obj) {
function Son(){};
= obj;
return new Son();
}
var parent = {
name:'Zhang San'
}
var son1 = fun(parent);
var son2 = fun(parent);
();//Zhang San();//Zhang San
The above examples explain:
① Create a function fun, define a constructor Son internally
②Set Son's prototype object as a parameter, the parameter is an object, and completes inheritance
③Return after instantiating Son, that is, it is an instantiated object
Advantages and disadvantages: Similar to prototype chain
The fifth type: parasitic inheritance
Based on prototype inheritance, enrich objects within the function
function fun(obj) {
function Son() { };
= obj;
return new Son();
}
function JiSheng(obj) {
var clone = fun(obj);
= function () {
('I'm a new method');
}
return clone;
}
var parent = {
name: 'Zhang San'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
(==);// false
The above examples explain:
① Based on prototype inheritance, encapsulate a JiSheng function
② Enhance the object returned by the fun function, add a new Say method, and finally return it
③ Call JiSheng function twice, assign value to variables parent1 and parent2 respectively
④Compare parent1 and parent2, the result is false, realizing independence
Advantages and Disadvantages: Similar to constructor inheritance, you have to create a method after calling a function. It cannot realize function reuse and is less efficient.
Here is a knowledge point. ES5 has a new method (), which is equivalent to encapsulating prototype inheritance. This method can receive two parameters: the first is the prototype object of the new object (optional), and the second is the new attributes added to the new object, so the above code can also be as follows:
function JiSheng(obj) {
var clone = (obj);
= function () {
('I'm a new method');
}
return clone;
}
var parent = {
name: 'Zhang San'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
(==);// false
Sixth type: Parasitic combination inheritance
Take advantage of the advantages of combining inheritance and parasitic inheritance
We have already mentioned the combination inheritance method. Its disadvantage is that the parent constructor is called twice, one is when creating a child prototype, and the other is inside the child constructor. So we only need to optimize this problem, that is, we can reduce the call to the parent constructor once, and just use the characteristics of parasitic inheritance to inherit the parent constructor prototype to create a child prototype.
function JiSheng(son,parent) {
var clone = ();//Create an object = clone; //Specify the object = son; //Enhanced Object}
function Parent(name){
= name;
= ['JS','HTML','CSS'];
}
=function(){
();
}
function Son(name){
(this,name);
}
JiSheng(Son,Parent);
son1 = new Son('Zhang San');
son2 = new Son('Li Si');
('VUE');
('PHP');
();//['JS','HTML','CSS','VUE']
();//['JS','HTML','CSS','PHP']
();//Zhang San();//Li Si
The above examples explain:
①Encapsulate a function, two parameters, parameter 1 is the child constructor, and parameter 2 is the parent constructor
②Use() to clone the parent constructor prototype into a copy clone
③ Use this copy as a prototype of the child constructor
④ Add constructor attribute to this copy, because the modification of the prototype in ③ causes the copy to lose its default attributes.
Pros and cons:
The advantages of combination inheritance and parasitic inheritance are the points. Currently, this inheritance method is used in JS inheritance.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.