1. JS itself is a programming language based on object-oriented development (features of classes)

  • Encapsulation: A class is also a function that encapsulates an implementation to achieve low coupling and high cohesion

  • Polymorphism: overloading, overwriting

    • Overridden: a method by which a subclass overrides its parent (running with inheritance)

    • Overloading: The same method has different functions due to different parameters or return values. (JS does not have strict overloading. JS overloading: the same method implements different functions according to different parameters.)

  • Inheritance: A subclass inherits methods from its parent class

    • The purpose of inheritance: To allow instances of subclasses to have both the private attributes and public methods of their parent classes

      • The first inheritance scheme in JS:Stereotype inheritance (make the stereotype of a subclass equal to an instance of the parent class)
      // 1. Private and public attribute methods in the parent class are finally made public by the subclass instance
// 2. Stereotype inheritance does not 'copy' the attribute methods of the parent class to the subclass. Instead, the subclass instances find their own attributes and methods based on the __proto__ stereotype chain

function Parent() {
    this.x = 100
}

Parent.prototype.getX = function getX() {
    return this.x
}

function Child() {
    this.y = 200
}

Child.prototype = new Parent // Prototype inheritance

Child.prototype.getY = function getY() {
    return this.y
}

const c1 = new Child

Copy the code
      • The second inheritance scheme in JS:CALL inheritance (can only inherit from private parent classes, not public parent classes)
      function Parent() {
    this.x = 100
}

Parent.prototype.getX = function getX() {
    return this.x
}

function Child() {
    // In the subclass constructor, the parent class is executed as a normal method
    Parent.call(this)
    this.y = 200
}

Child.prototype.getY = function getY() {
    return this.y
}

const c1 = new Child
Copy the code
      • The third type of inheritance in JS:Parasitic combinatorial inheritance
      function Parent() {
    this.x = 100
}

Parent.prototype.getX = function getX() {
    return this.x
}

function Child() {
    this.y = 200
}

// Child. Prototype.__proto__ = Parent. Prototype (IE not allowed)
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

Child.prototype.getY = function getY() {
    return this.y
}

const c1 = new Child
Copy the code
      • The fourth type of inheritance in JS:Classes and Inheritance in ES6 (similar to parasitic composite inheritance)
      class Parent {
    constructor() {
        this.x = 100
    }
    
    getX() {
        return this.x
    }
}

// Extends
// Note: Be sure to add super to the first line of constructor
class Child extends Parent {
    constructor() {
        Call inherits super(100, 200) from Parent's constructor, passing 100 and 200
        super(a)this.y = 200
    }
    
    getY() {
        return this.y
    }
}

const c1 = new Child
console.log(c1)
Copy the code