inherit

Inheritance is a particularly important concept in object-oriented languages. Inheritance of js is mainly achieved by prototype chains.

Prototype Chain!!!

Did you see that I gave the title three exclamation marks? This is really important!It really matters here!It really matters here!js describes the concept of prototype chain and uses it as the main method to achieve inheritance. The basic idea is to let one reference type inherit the properties and methods of another.Look at the code

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
}

function SubType () {
    this.Subproperty = false;
}

SubType.prototype = new SuperType();

SuperType.prototype.getSubValue = function () {
    return this.subproperty;
}

var instance = new SubType();
console.log(instance.getSuperValue())

Continue with my soul painting below:

Say nothing more. The principles are all in the picture. You already know what you believe is smart.In the code above, instead of using the prototype that SubType provides by default, we replaced it with a new one.This prototype is an instance of the parent class. The new prototype has all the properties and methods, and now exists in the prototype of the subclass.

Through prototype chains, prototype search mechanisms are essentially extended.The instance.getSuperValue() call goes through three search steps

1. Search Instances

2. Search for prototype objects

3. Search for parent prototype objects

Search up loops until the end of the prototype chain stops.But where did the valueOf methods on our subclasses come from?The parent does not show declarations of these methods, so continue with the above image below.

SubType inherits SuperType,SuperType inherits Object, and when the instance.valueOf() method is called, it actually calls the method saved in Object.prototype.

Problem with prototype chains

The chain of prototypes is so strong that it can also cause problems.The main problem comes from prototypes that contain reference types.Although prototype attributes of reference types are shared by instances, when inheritance is achieved through prototypes, the prototype becomes an instance of another type, and the original instance attributes naturally become prototype attributes now.

function SuperType () {
    this.colors = ['red', 'blue', 'green'];
}

function SubType () {
    
}


SubType.prototype = new SuperType();

var instance1 = new SubType();

instance1.colors.push('black');

console.log(instance1.colors)

var instance2 = new SubType();

console.log(instance2.colors)

Another problem is that a constructor of a parent type cannot pass parameters when creating subclasses.So we rarely use prototype chains alone.

Borrow Constructor

function SuperType () {
    this.colors = ['red', 'blue', 'green'];
}

function SubType () {
    // Inherited SuperType
    SuperType.call(this);
}

var instance1 = new SubType();

instance1.colors.push('black');

console.log(instance1.colors);


var instance2 = new SubType();
console.log(instance2.colors);

You can also pass parameters

 function SuperType (name) {
    this.name = name;
}

function SubType () {
    // Inherited SuperType
    SuperType.call(this, 'Plum floret');
}

var instance1 = new SubType();
console.log(instance1.name)
//However, it is also obvious that methods can only be defined in constructors, and methods defined on prototypes cannot be inherited.Techniques that borrow constructors are also rarely used.

Combinatorial Inheritance

Let's take an example of an inheritance pattern that combines a prototype chain with a borrowed constructor.

   function SuperType (name) {
    this.name = name;
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
};

function SubType (name, age) {
    // Inherited SuperType
    SuperType.call(this, name);

    this.age = age;
}
SubType.prototype = new SuperType();

var instance1 = new SubType();
console.log(instance1.name)
//Combinatorial inheritance is the most common inheritance mode for js.