1. Borrowing constructor to inherit parent class properties
step
1) Execute the constructor of the parent class in the constructor of the child class and bind this of the child class for it.
2) Through the call() function, change the point of this pointer and let the constructor of the parent class hang the member properties and methods to this of the child class.
Implementation example
function Father(name,age){// The Father constructor is the parent class this.name = name; this.age = age; this.say = function(){ console.log('study hard'); } } //Constructor inheritance. Subclasses cannot inherit properties and methods on the parent class prototype Father.prototype.getName=function(){console.log('Method on Prototype')} function Son(name,age,sourse){// The Son constructor is a subclass // Execute the parent class construction method and bind the this of the child class, so that the attributes in the parent class can be assigned to the this of the child class Father.call(this,name,age);// The subclass inherits the properties of the parent class this.sourse = sourse;// Subclasses can have their own unique properties } var f1 = new Father('Zhang San',45); var s1 = new Son('Li Si',18,60); console.log(f1); console.log(s1); f1.getName(); s1.say(); // s1.getName();// An error is reported because the property on the prototype of the parent class cannot be inherited.
Advantages and disadvantages
Advantages: avoid sharing a prototype instance between instances, and can pass parameters to the parent class constructor.
Disadvantages: you cannot inherit the properties and methods on the parent class prototype.
2. Using prototype object to inherit parent class method
step
1) Direct the prototype object of the child class to the parent class instance. When the child class instance cannot find the corresponding properties and methods, it will look for its prototype object, that is, the parent class instance, so as to inherit the properties and methods of the parent class.
Implementation example
function Father(){ this.name = 'Zhang San' } // Prototype method of parent class Father.prototype.getName = function(){ console.log(this.name) }; function Son(){}; //Let the prototype object of the subclass point to the instance of the parent class Son.prototype = new Father(); //Bind the constructor according to the rules of the prototype chain. This step does not affect inheritance, but will be required when using the constructor Son.prototype.constructor = Son; //Subclass method Son.prototype.sourse= function(){console.log(60)} var s1 = new Son(); console.log(s1.__proto__); console.log(s1) s1.getName(); s1.sourse();
Advantages and disadvantages
Advantages: through prototype chain inheritance, all properties and methods previously existing in the instance of the parent type can now exist in the prototype of the child type.
Disadvantages:
1) Since all subclass instance prototypes point to the same parent instance, modifying the parent reference type variable of a subclass instance will affect all subclass instances.
2) When creating a subclass instance, you cannot pass parameters to the parent class constructor, that is, you do not implement the function of super().
3. Combinatorial inheritance
step
1) Composite inheritance is a way to integrate the above two methods to realize inheritance.
Implementation example
function Father(name,age){ this.name = name; this.age = age; } Father.prototype.say = function(){ console.log('hello'); } function Son(name,age,sourse){ Father.call(this,name,age); this.sourse = sourse; } Son.prototype = new Father(); Son.prototype.said = function(){ console.log('hi'); } var s1 = new Son('Li Si',18,60); console.log(Son.prototype); console.log(s1.__proto__); console.log(s1); s1.say(); s1.said();
Advantages and disadvantages
Disadvantages: constructors (Father.call() and new Father()) are executed twice each time a subclass instance is created.
Advantages: composite inheritance has the advantages of the above two methods. At the same time, the disadvantages of the above two methods can be avoided.
4. Parasitic inheritance
step
1) Create an object based on an object or some information, then enhance the object, and finally return the object.
2) Instantiate a temporary copy to implement the same prototype chain inheritance.
Implementation example
function object(o){ function Father(){}; Father.prototype = o; return new Father; } function Son(o){ var cons = object(o); cons.say = function(){ console.log('hello'); } return cons; } var Person = { name:'Zhang San', age:18 } var s1 = Son(Person); console.log(s1); console.log(s1.name); console.log(s1.age); s1.say();
Advantages and disadvantages
Advantages: it solves the problem that the constructor is executed twice every time a subclass instance is created in composite inheritance
Disadvantages:
1) He has all the shortcomings of prototype inheritance.
2) Using parasitic inheritance to add methods to objects will reduce efficiency due to the inability to reuse methods, which is similar to the constructor pattern.
5. Parasitic combinatorial inheritance
Definition: the so-called parasitic combinatorial inheritance is to inherit attributes by borrowing constructors and methods by mixing prototype chains.
Basic idea: instead of calling the constructor of the supertype to specify the prototype of the subtype, what we need is a copy of the prototype of the supertype.
step
1) Use parasitic inheritance to inherit the prototype of a supertype.
2) Assign the result to the prototype of the subtype.
Implementation example
function Father(name){ this.name = name; } Father.prototype.getName=function(){ console.log(this.name); } function inherit(son,father){ function F(){}; F.prototype = father.prototype; var prototype = new F; prototype.constructor = son; //Point the prototype of the child class to a copy of the prototype of the parent class son.prototype = prototype; } function Son(name,age){ Father.call(this,name); this.age = age; } //Point the prototype of the subclass Son to a copy of the parent prototype //Note: the method can only be defined on the prototype of Son after this action is executed, otherwise it is useless inherit(Son,Father); Son.prototype.getAge=function(){ console.log(this.age); } var s1 =new Son('Zhang San',18); console.log(s1); s1.getName(); s1.getAge();
Advantages and disadvantages
advantage:
1) Integrating the advantages of parasitic inheritance and combinatorial inheritance, it is the most effective method to realize basic type inheritance.
2) The parent class (father) is called only once, and unnecessary attributes created on (subclass prototype) son.prototype are avoided, while the prototype chain remains unchanged.
6. Directly inherit prototype
step
1) On the basis of composite inheritance, we change pointing to the parent class instance to pointing to the parent class prototype.
Implementation example
function Father(name,age){// The Father constructor is the parent class this.name = name; this.age = age; } Father.prototype.getName=function(){console.log(this.name)} function Son(name,age,sourse){ Father.call(this,name,age); this.sourse = sourse; } Son.prototype = Father.prototype; Son.prototype.constrcutor = Son; Son.prototype.getAge=function(){ console.log(this.age); } var f1 = new Father('Zhang San',45); var s1 = new Son('Li Si',18,60); console.log(s1); console.log(f1); s1.getName(); s1.getAge(); f1.getAge();
Advantages and disadvantages
Advantages: high efficiency.
Disadvantages: when adding a method to a child class, the parent class will also add the same method as the child class, because the child class prototype and parent class prototype point to
For the same object, our operation on the child class prototype will affect the parent class prototype.
7. Improved direct inheritance prototype
We don't want subclass methods to affect the parent class. What should we do?
step
We can make a shallow copy of the Parent.prototype.
Implementation example
function Father(name,age){// The Father constructor is the parent class this.name = name; this.age = age; } Father.prototype.getName=function(){console.log(this.name)} function Son(name,age,sourse){ Father.call(this,name,age); this.sourse = sourse; } Son.prototype = Object.create(Father.prototype); Son.prototype.constrcutor = Son; Son.prototype.getAge=function(){ console.log(this.age); } var f1 = new Father('Zhang San',45); var s1 = new Son('Li Si',18,60); console.log(s1); console.log(f1); s1.getName(); s1.getAge(); f1.getAge();
Advantages and disadvantages
Advantages: it solves the problem that the subclass affects the parent class.