JS Learning Notes (Chapter 6) (Several Ways to Achieve Inheritance)

Keywords: Javascript

1. Implementing Inheritance by Prototype Chain

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

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

//Inherited SuperType
SubType.prototype = new SuperType();

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

var instance = new SubType();
alert(instance.getSuperValue());   //true

2. Borrowing constructors

The problem with prototype chains is that object instances share all inherited attributes and methods, so they are not suitable for use alone. The technique to solve this problem is to borrow a constructor, which calls a supertype constructor inside a subtype constructor. This allows each instance to have its own attributes and ensures that only constructor patterns are used to define types.

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

function SubType(){
    //Inheriting SuperType,
    SuperType.call(this);//Calling a supertype constructor inside a subtype constructor
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);   //"red,blue,green,black"

var instance2 = new SuperType();
alert(instance2.colors);   //"red,blue,green"

3. Combinatorial Inheritance

Idea: Call a supertype constructor inside a subtype constructor. The most frequently used inheritance pattern is combinatorial inheritance, which uses prototype chains to inherit shared attributes and methods while borrowing constructors to inherit instance attributes.

function SuperType(name) {
    this.name = name;
    this.color = ["red","blue","green"];
}

SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name ,age) {
    //Inheritance property
    SuperType.call(this,name);//Calling a supertype constructor inside a subtype constructor
    this.age = age;
}
//Inheritance method
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;  //Pointing constructor
SubType.prototype.sayAge = function() {
    alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);   //"red,blue,green,black"
instance1.sayName();  //"Nicholas"
instance1.sayAge();  //29

var instance2 = new SubType("Greg" ,27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();  //"Greg"
instance2.sayAge();  //27

4. Prototype Inheritance

(1) With prototypes, new objects can be created based on existing objects without creating custom types.
(2) Within the object() function, a temporary constructor is created, then the incoming object is used as the prototype of the constructor, and finally a new instance of the temporary type is returned.
(3) Prototype inheritance can be realized without pre-defining constructors. Its essence is to perform shallow replication of a given object. The copies can be further improved.

var person = {
    name : "Nicholas",
    friends : ["Shelby", "Court", "Van"]
};

var anotherPerson = object(perosn);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAbotherPerson = object(perosn);
yetAbotherPerson.name = "Linda";
yetAbotherPerson.firends.push("Barbie");

alert(person.friends);  //"Shelby, Court, Van, Greg, Linda"

5. Parasitic Inheritance

Similar to prototype inheritance, it creates an object based on an object or some information, enhances the object, and finally returns the object. In order to solve the inefficiency of the combined inheritance pattern caused by multiple calls to supertype functions, this pattern can be used together with the combined inheritance.

function creatAnother(original) {
    var clone = object(original);   //Create a new object by calling a function
    clone.sayHi = function() {      //Enhance the object in some way
        alert("hi");
    };
    return clone;  //Return this object
}
var person = {
   name : "Nicholas",
   friends : ["Shelby", "Court", "Van"]
};

var anotherPerson = creatAnother(person);
anotherPerson.sayHi();  //"hi"

6. Parasitic combination inheritance

(1) The combination of parasitic inheritance and combinatorial inheritance is the most effective way to realize type-based inheritance. It can solve the problem that the subclass will eventually contain all the instance attributes of the superclass object due to the combination inheritance calling the constructor twice.
(2) Parasitic combinatorial inheritance means inheriting attributes by borrowing constructors and inheriting methods by mixing prototype chains. The idea is that instead of calling a supertype constructor to specify a prototype of a subtype, all we need is a copy of the supertype prototype. Essentially, parasitic inheritance is used to inherit the prototype of the supertype, and then the result is assigned to the prototype of the subtype. Its basic model is as follows:

function inheritPrototype(SubType,superType) {
    var prototype = object(superType.prototype);   //create object
    prototype.constructor = subType;               //Enhanced Objects
    subType.prototype = prototype;                 //Specified object
}

This function takes two parameters: a subtype constructor and a supertype constructor.
The first step is to create a copy of the supertype prototype.
The second step is to add constructor attributes to the created copy to compensate for the default constructor attributes lost by rewriting the prototype.
The third step assigns the newly created object (i.e., copy) to the prototype of the subtype.

function inheritPrototype(SubType,superType) {
    var prototype = object(superType.prototype);   //create object
    prototype.constructor = subType;               //Enhanced Objects
    subType.prototype = prototype;                 //Specified object
}

function SuperType(name) {
    this.name = name;
    this.color = ["red","blue","green"];
}

SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name ,age) {
    //Inheritance property
    SuperType.call(this.name);      
    this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function() {
    alert(this.age);
};

Posted by alex clone on Tue, 23 Jul 2019 07:13:36 -0700