Five ways of inheritance

Keywords: Javascript Front-end

Several ways of inheritance:
1. Borrow constructor
2. Combination inheritance
3. Prototype inheritance
4. Parasitic inheritance
5. Parasitic combinatorial inheritance

1. Borrow constructor
// Define SupTyp constructor
function SupType() {
    this.colors = ['red', 'yellow', 'blue']
}
function SubType() {
    // Inherited SuperType 
    SupType.call(this) 
}
let instancel = new SubType()
instancel.colors.push('black')
console.log(instancel.colors); // ['red', 'yellow', 'blue', 'black']
let instancel2 = new SubType()
console.log(instancel2.colors); // ['red', 'yellow', 'blue']
  • SupType.call(this) seconded the constructor of the supertype
  • By using the call() and apply() methods, the SupType constructor is actually called in the context of the newly created SubType instance
  • Execute all object initialization codes defined in the SupType() function on the new SubType object
  • So each instance of SubType will have its own copy of the colors attribute

Borrowing constructor parameters

jsfunction SupType(name){
    this.name = name
}
function SubType(){
    SupType.call(this,'jack')
    this.age = 18
}
let instance = new SubType()
console.log(instance.name); // jack
console.log(instance.age); // 18
  • Suptype only accepts one parameter name, and the parameter value will directly assign an attribute
  • When you call SupType to construct fir tree inside SubType, you actually set the name attribute for the instance of SubType
2. Combinatorial inheritance (pseudo classical inheritance)

A simple summary: try to combine the prototype chain with the borrowed constructor

function SupType(name){
    this.name = name;
    this.colors = ['red','yellow']
}
// The supType prototype defines the sayName method
SupType.prototype.sayName = function (){
    console.log(this.name);
}
function SubType(){
    // Inheritance properties
    SupType.call(this,name)
    this.age = age
}
// The prototype of the SubType constructor is used as an instance of the SubType constructor
SubType.prototype = new SubType()
SubType.prototype.constructor = SubType;
// Adding sayAge method to subType constructor prototype
SubType.prototype.sayAge = function(){
    console.log(this.age);
}
// Instantiate subtype and pass parameters
let instancel = new SubType('jack',18)
// Add color to color array
instancel.colors.push('blue')
console.log(instancel.colors); // ['red','yellow','blue']
instancel.sayName() // jack
instancel.sayAge() // 19
// Instantiate subtype and pass parameters
let instancel2 = new SubType('shredded meat',16)
console.log(instancel2.colors);
instancel2.sayName() // shredded meat
instancel2.sayAge()  // 16
  • The constructor SupType defines two properties: name and colors
  • The SupType prototype defines a sayName() method
  • The SubType constructor passes in the name parameter when calling the SupType constructor, and then defines the sayAge() method
  • Two different SubType instances have their own attributes, including the colors attribute, and can use the same method
3. Prototype inheritance

Prototypes allow you to create new objects based on existing objects without having to create custom types

function object(o){
    function F (){}
    F.prototype = o
    return new F(o)
}

**Inside the object, a temporary constructor is created first, and the incoming object is used as the prototype of the constructor. Finally, a new instance of the temporary type is returned, and the object makes a shallow copy of the incoming object**

let person  = {
    name :'Crayon Shin Chan',
    fridens:['Ah Dai','due south',]
    
}
let anotherPerson = object(person)
anotherPerson.name = 'NINI'
anotherPerson.fridens.push('Xiaobai')
let yetAnotherPerson = object(person)
yetAnotherPerson.name = 'Meiya'
yetAnotherPerson.fridens.push('Guangzhi')
console.log(person.fridens); //  ['ah Dai', 'Zhengnan', 'Xiaobai', 'Guangzhi']
  • This prototype inheritance requires that one object can be used as the basis of another object,
  • You can pass it to the object() function and modify it according to the obtained object
    **Summary: * * in the above example, the person object can be used as the basis of another object. Pass the person object into the object() function, and then the object() object will return a new object. This new object takes person as the prototype, so the prototype contains a basic type attribute and a reference type value attribute. This means that person.friends is not only owned by person, It will be shared by otherperson and yetAnotherPerson, which is equivalent to creating two copies of the person object

Posted by trufla on Sat, 23 Oct 2021 02:36:10 -0700