JS object oriented programming - inheritance

inherit

Class inheritance

// Class inheritance
// Declare a parent class
function SuperClass() {
    this.superValue = true;
}
// Add a common method to the parent class
SuperClass.prototype.getSuperValue = function() {
    return this.superValue;
}
// Declare subclass
function SubClass() {
    this.subValue = false;
}
// Inherit parent class
SubClass.prototype = new SuperClass();
// Add a common method to a subclass
SubClass.prototype.getSubValue = function() {
    return this.subValue;
}

🍋 shortcoming

  • Because the child class instantiates the parent class through its prototype prototype, it inherits the parent class. If the common property in the parent class is of reference type, it will be shared by all instances in the subclass. Therefore, the common property inherited from the constructor of the parent class by the prototype of the subclass changed by the instance of one subclass will directly affect other subclasses
  • Because the subclass instantiates the parent class through its prototype prototype prototype, it is impossible to pass parameters to the parent class when creating the parent class, so when instantiating the parent class, it is also unable to initialize the properties in the constructor of the parent class

Constructor inheritance

// Constructor inheritance
// Declare a parent class
function SuperClass(id) {
    // Reference type common property
    this.books = ['js', 'html', 'css'];
    // Common properties of basic types
    this.id = id;
}
// Parent class declaration prototype method
SuperClass.prototype.showBooks = function() {
    console.log(this.books);
}
// Declare subclass
function SubClass() {
    // Inherit parent class
    SuperClass.call(this, id);
}
// Create an instance of the first subclass
var instance1 = new SubClass(10);
// Who created the second subclass
var instance2 = new SubClass(20);

instance1.books.push('Design patterns');
console.log(instance1.books); // ['design mode', 'JS',' HTML ',' CSS']
console.log(instance1.id); // 10
console.log(instance2.books); // ['js', 'html', 'css']
console.log(instance2.id); // 20

instance1.showBooks(); // TypeError

🍋 shortcoming

  • This type of inheritance does not involve prototype, so the prototype method of the parent class will not be inherited by the child class

Combinatorial inheritance

// Combination inheritance
// Declare a parent class
function SuperClass(name) {
    // Reference type common property
    this.books = ['js', 'html', 'css'];
    // Common properties of basic types
    this.name = name;
}
// Common methods of parent prototypes
SuperClass.prototype.getName = function() {
    console.log(this.name);
}
// Declare subclass
function SubClass(name, time) {
    // Inherit parent class
    SuperClass.call(this, name);
    // New common attribute in subclass
    this.time = time;
}
// Class inheritance subclass prototype inherits parent class
SubClass.prototype = new SuperClass();
// Subclass prototype method
SubClass.prototype.getTime = function() {
    console.log(this.time);
}

var instance1 = new SubClass('js book', 2020);
instance1.books.push('Design patterns');
console.log(instance1.books); // ['js','html','css',' design mode ']
instance1.getName(); // 'js book'
instance1.getTime(); // 2020

var instance2 = new SubClass('css book', 2021);
console.log(instance2.books); // ['js', 'html', 'css']
instance2.getName(); // 'css book'
instance2.getTime(); // 2021

🍋 shortcoming

  • This inheritance method executes the constructor of the parent class once when using the constructor inheritance, and calls the one side parent class constructor when implementing the class inheritance of the subclass prototype

Archetypal inheritance

// Archetypal inheritance
function inheritObject(o) {
    // Declare a transition function object
    function F() {}
    // The prototype chain of the transition object inherits the parent object
    F.prototype = o;
    // Returns an instance of a transition object whose prototype inherits the parent object
    return new F();
}

🍋 shortcoming

  • As with class inheritance, properties of reference types in the parent class are shared

Parasitic inheritance

// Parasitic inheritance
// Declare base object
var book = {
    name: 'js book',
    alikeBook: ['css book', 'html book'],
}
function createBook(obj) {
    // Creating new objects through prototype inheritance
    var o = new inheritObject(obj);
    // Expand new objects
    o.getName = function() {
        console.log(this.name);
    }
    // Return to the expanded new object
    return o;
}

🍋 shortcoming

  • As with class inheritance, properties of reference types in the parent class are shared

Parasitic combinatorial inheritance

/**
  * Prototypes of parasitic inheritance
    * Pass parameter subClass
    * Pass parameter superClass parent class
    **/
function inheritPrototype(subClass, superClass) {
    // Copy a prototype copy of the parent class and save it in the variable
    var p = inheritObject(superClass.prototype);
    // Fixed the subclass' constructor property being modified due to the subclass prototype being rewritten
    p.constructor = subClass;
    // Prototype subclasses
    subClass.prototype = p;
}

// Define parent class
function SuperClass(name) {
    this.name = name;
    this.color = ['red', 'blue', 'green'];
}
// Defining a parent prototype method
SuperClass.prototype.getName = function() {
    console.log(this.name);
}
// Defining subclasses
function SubClass(name, time) {
    // Constructor inheritance
    SuperClass.call(this, name);
    // New attribute of subclass
    this.time = time;
}
// Parasitic inheritance parent prototype
inheritPrototype(SubClass, SuperClass);
// New prototype method of subclass
SubClass.prototype.getTime = function() {
    console.log(this.time);
}
// Create two test methods
var instance1 = new SubClass('js book', 2020);
var instance2 = new SubClass('css book', 2021);

🍋 shortcoming

  • Subclass adding prototype methods must be added one by one in the form of point syntax through prototype. Objects, otherwise the objects inherited from the parent class prototype will be overridden if the objects are given directly

Tags: node.js Attribute

Posted on Mon, 29 Jun 2020 05:33:47 -0400 by RichterBelmont