Object-Oriented Programming (Inheritance)

How to realize inheritance?

Our JavaScript is quite special, mainly through prototype chains to achieve inheritance.

Following are various ways to realize inheritance: prototype chain inheritance, borrowing constructors, combination inheritance, prototype inheritance, parasitic inheritance and parasitic combination inheritance.

II. Realizing the Way of Inheritance

1. Prototype Chain Approach

a. Code:

//Create a parent constructor
function Father(){
    this.fristName = "Father";
}
//Adding methods to prototype objects of parent classes
Father.prototype.getFatherName = function(){
    return this.fristName ;
}

//Create subclass constructors
function Son(){
    this.name = 'jack';
}
//The key line is to point the prototype object of the subclass to the parent class instance for inheritance
Son.prototype = new Father();

//We can also add prototype methods for subclasses
Son.prototype.getName = function(){
    return this.name;
}

//Test it and create an instance of a subclass
var s1 = Son();
s1.getFaterName();  //Father inherited his father's name!

b. Some special points of attention:

1. We saw above that getName is added to the subclass prototype. After the subclass prototype object points to the parent class instance, it must be followed by this sentence. If it is before, the method will be overwritten. Because a child prototype object points to a parent instance, it is equivalent to rewriting the child prototype object.
2. Adding a method to a subclass prototype cannot be literal, which overrides the prototype object that has inherited the parent class.

c. Inheritance of prototype chains:

Obviously, the inherited attribute methods are all in the prototype objects of the subclasses, so the attribute methods are shared, which obviously does not meet our usual requirements.

2. Borrowing constructors

Code demo:

//The parent class (the parent class is relatively speaking, everybody pays attention to oh)
function Father(){
    this.colors = ['red','green'];
}
//Subclass
function Son(){
    //The key line: Invoke the parent constructor internally, and this is an instance of creating Son in the future
    Father.call(this);
}

//Test it, inherit the attributes of the parent class, and the attributes will not be shared oh
var s1 = new Son();
s1.colors.push('blue');
console.log(s1.colors); ['red','green','blue']

//The colors of the s2 instance will not be affected
var s2 = new Son();
console.log(s2.colors); ['red','green']

3. Combinatorial inheritance (most commonly used)

Code demo:

//Parent class
function Father(name){
    this.name = name;
    this.colors = ['red','green'];
}
//Parent prototype object
Father.pototype.sayName = function(){
    console.log(this.name);
}
//Subclass
function Son(name,age){
    //Borrowing a parent constructor
    Father.call(this,name);
    this.age = age;
}
//Subclass prototypes point to parent instances, prototype chain inheritance
Son.prototype = new Father();
Son.prototype.constructor = Son;   //Let prototypes of subclasses construct functions only to subclasses
Son.prototype.sayAge = function(){
    console.log(this.age);
}

//Create instance objects
var s1 = new Son('Mc ry',22);
var s2 = new Son('yy',20);
//The parent method is inherited and sayName is shared
s1.sayName(); //mc ry
s2.sayName(); //yy
//Inherit colors, each instance private
s1.colors.push('blue');
console.log(s1.colors); ['red','green','blue']
console.log(s2.colors); ['red','green']

4. Prototype Inheritance

Code demo:

//Object function, passing in an object
function object(o){
    //Create an empty constructor
    function F(){};
    //The prototype object of this empty constructor points to o.
    F.prototype = o ;
    //Returns the instance object of F
    return new F();
}

//An object
var person = {
    name : 'ry',
    sayName : function(){
        console.log(this.name);
    }
}

//children object inherits all attribute methods of person object
var children = object(person);

5. Parasitic Inheritance

function creatAnother(o){
    //Invoke object inheritance o
     var obj = object(o);
     //You can also add the method you want
     obj.sayHi = function (){
         console.log('hi');
     }
     //Return this object
     retrun obj;
 }
 //The new object inherits person
 var anotherPerson = creatAnother(person);
 //The method of person can be used after inheritance
 anotherPerson.sayHi(); //"hi"

6. Parasitic Combinatorial Inheritance (Ideal)

So the parasitic combination method solves the above problem by replacing the prototype chain inheritance in the combination method with a function.

Code demo:

//It's mainly this function that implements child prototype objects that inherit only attributes from parent prototype objects.
function inheritPrototype(subType,superType){
    //Using the Object function above, the prototype of the parent class is assigned to the prototype variable
    var prototype = object(superType.prototype);
    //Redirect the prototype constructor to a subclass
    prototype.constructor = subType;
    //Give prototype to sub prototype object
    subType.prototype = prototype;
}

//Rewrite the previous combination inheritance
//Parent class
function Father(name){
    this.name = name;
    this.colors = ['red','green'];
}
//Parent prototype object
Father.pototype.sayName = function(){
    console.log(this.name);
}
//Subclass
function Son(name,age){
    //Borrowing a parent constructor
    Father.call(this,name);
    this.age = age;
}
//(This line is replaced by inheritPrototype function) Subclass prototype points to parent instance, prototype chain inheritance
inheritPrototype(Son, Father);
Son.prototype.sayAge = function(){
    console.log(this.age);
}

Three, summary

• Careful friends may find that I have changed the style of the article, similar to the Markdown style, which looks more refreshing and comfortable.