Seven methods to implement inheritance in ES5

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.

Tags: Javascript Front-end

Posted on Wed, 17 Nov 2021 02:59:32 -0500 by Fixxer