To implement inheritance, you must have a parent class, and for demonstration purposes, this article will use a unified definition of the parent class

function Person (name, age) {
    this.name = name;
    this.age = age
}
// Add the skin attribute to the parent stereotype
Person.prototype.skin = 'yellow'
Copy the code

Prototype chain inheritance

function People (name) {
    this.name = name
}
People.prototype = new Person()          // The main operation: use the parent instance object as the prototype of the subclass

let people = new People('zs')
console.log(people.skin)                 // yellow
console.log(people instanceof Person)    // true
Copy the code

Features:

  1. You can only inherit properties and methods from the parent stereotype
  2. All instances of subclasses share the attributes and methods of the parent stereotype

Constructor inheritance

function People() {
    Person.call(this.'zs'.18)   // Copy the parent function into a subclass function
    this.age = 19
}
let people = new People()
console.log(people.name)                // zs
console.log(people.age)                 / / 19
console.log(people.skin)                // undefined
console.log(people instanceof Person)   // false
Copy the code

Features:

  1. Only the attributes of the parent constructor are inherited, not the attributes of the parent stereotype
  2. You can pass arguments to a parent class

Combinatorial inheritance (common)

Combination stereotype chain inheritance and constructor inheritance

function People () {
    Person.call(this.'lisi'.20)  // Main operation: constructor mode
}
People.prototype = new Person()    // Main operation: prototype chain mode

let people = new People()
console.log(people.name)                  // lisi
console.log(people.age)                   / / 20
console.log(people.skin)                  // yellow
console.log(people instanceof Person)     // true
Copy the code

Features:

  1. Can pass, can also reuse, commonly used a kind of inheritance
  2. The attributes of each instance are private
  3. The constructor of the subclass replaces the constructor of the parent class on the prototype

Primary inheritance

function People (obj) {
    function Son () {}
    Son.prototype = obj     // The main operation is to point the prototype of the subclass to the instance object of the parent class
    return new Son()
}
let f = new Person()        // Instantiate the parent class
let people = People(f)
console.log(people.skin)                 // yellow
console.log(people instanceof Person)    // true
Copy the code

Features:

  1. Similar to stereotype chain inheritance, you can only inherit properties from superclass archetypes
  2. All instances inherit methods from the superclass stereotype

Parasitic inheritance

function People (obj) {
    function Son () {}
    Son.prototype = obj     // The main operation is to point the prototype of the subclass to the instance object of the parent class
    return new Son()
}

function Merge(obj) {
    let merge = People(obj)  // Call the function to create an object
    merge.gender = 'male'      // You can add attributes here
    return merge
}

let people = Merge(new Person('zs'.20))   // Inherits the attributes of the parent constructor
console.log(people.name)                   // zs
console.log(people.age)                    / / 20
console.log(people.gender)                 / / male
console.log(people.skin)                   // yellow
console.log(people instanceof Person)      // true
Copy the code

Features:

  1. It’s like primitive inheritance, but with a function on top of it
  2. Properties that can be inherited from superclass constructors and stereotypes

Parasitic combinatorial inheritance (common)

function people (obj) {
    function Son () {}
    Son.prototype = obj
    return new Son()
}

let f = people(Person.prototype)    // The f instance inherits the attributes of the superclass stereotype

function Merge() {
    Person.call(this.'zs'.'20')   // The attributes of the parent constructor are inherited
}

Merge.prototype = f                 // The composite constructor inherits the attributes of the superclass stereotype
f.constructor = Merge               // Fix the instance

let peo = new Merge()
console.log(peo.name)               // zs
console.log(peo.age)                / / 20
console.log(peo.skin)               // yellow
console.log(peo instanceof Person)  // true
Copy the code

Features:

  1. You can pass arguments to a parent class
  2. Subclass instances can inherit properties from superclass stereotypes
  3. You can reuse

Inheritance in ES6

// Define a parent class
class Person {
    constructor (uname, age, sex) {
        this.uname = uname
        this.age = age
        this.sex = sex
    }
    sayHi() {
        console.log('hello')}}// Subclasses inherit from their parent class
class Chinese extends Person {
    constructor (uname, age, sex, score) {
        // Call the parent class constructor with super
        super(uname, age, sex)
        this.score = score
    }
    sayHi() {
        super.sayHi()
    }
}
// instantiate the subclass
let person = new Chinese('Joe'.22.'male'.99)
console.log(person.uname)     / / zhang SAN
console.log(person.age)       / / 22
console.log(person.sex)       / / male
console.log(person.score)     / / 99
person.sayHi()                // hello 
Copy the code

If a subclass has its own constructor, it must call a member of its parent class via super