7 ways to Inherit

  1. Prototype chain inheritance
  2. Constructor inheritance
  3. Combination of inheritance
  4. Primary inheritance
  5. Parasitic inheritance
  6. Parasitic combinatorial inheritance
  7. Es6 class extends inheritance

Prototype chain inheritance:

Use the father’s example as the model for the child.

  • Advantages: The parent method can be reused by subclasses
  • Disadvantages:
    1. All attributes of the parent class are shared by the subclasses, and if you change the attributes of one subclass, the attributes of the other subclasses are also changed.
    2. Instances of subclasses cannot pass arguments to their parent classes.
function father (){}

function son (){}

// The stereotype points to the inherited instantiation
son.prototype = new father()
Copy the code

Borrowing constructor

In the constructor of a subclass, the constructor of the parent class is called. Use call or apply

  • Advantages:
    1. Subclasses can now pass arguments to their parents.
    2. Attributes on a parent class are not shared by subclasses
  • Disadvantages:
    1. Subclasses cannot access methods on their parent prototype. Because the method properties are written inside the constructor, new is initialized each time.
function father (name) {
    this.info = {
        name:name,
        age:19
    }
}

father.prototype.getUserInfo= function() {
    console.log(this.info)
}

function son(name) {
// This for the child, bound to the father
    faher.call(this)}const child1 = new Child('ck')
child1.info.gender = 'male'
child1.info.name == 'ck' // true

Copy the code

Combination of inheritance

  • Combinatorial inheritance is a way of combining using the first and second methods:
  • Methods are inherited using stereotype chains and properties are inherited using constructors
  • advantages
    1. You can pass arguments to the parent
    2. Subclasses do not share attributes
    3. Subclasses can share the methods of subclasses, reducing the waste of resources
  • Disadvantages:
    1. It just needs to have two inherited methods and operations, which doesn’t look very neat. The operation is more complicated.
function father(name) {
    this.info = {
        name:name
    }
}

father.prototype.getUserInfo = function () {
	console.log(this.inf)
}

function Son(name) {
// Inherit attributes
    father.call(this, name)
}

// Inheritance method
// otherwise, methods on prototype will not be accessible
son.prototype = new father()

const son = new Son('ck')
son.getUserInfo()

Copy the code

Primary inheritance

Creating a function that points to a new object, and then giving that object some properties, is inheritance.

  • Advantages:
    1. He has all the advantages of combinatorial inheritance
    2. Its inheritance is simpler than combining two operations.
  • disadvantages
    1. A subclass cannot pass data to its parent
function object(o) {
    function F(){}
    F.prototype = o;
    return F()
}

const person = {
    name: 'ck'.friends: ['BMW'.'BENZ'.'AUDI'].getUserInfo:function() {
            console.log(this.name, this.ferends)
    }
}

const son1 = object(person)
son1.name = 'kb'
son1.friends.push('VW')

const son2 = object(person)
son2.name = 'son2' // In this case, the attributes of subclasses are not publicly modified

Copy the code

Parasitic inheritance

It’s the same idea as the original type inheritance, write a method, and then change the object’s this pointer yourself. You can enhance access methods in stereotype inheritance

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

function render(origin) {
    let clone = create(origin)
    clone.getUserInfo= function() {
            log(this.info)
    }
    return clone
}

let parent = {
    info: {name: 'ck'.age: 19}}const son  = render(parent)
son.getUserInfo() // The parent method can be accessed here.

Copy the code

Parasitic combined invocation

  • At present, the best inheritance method basically meets the requirement that subclasses pass values to their fathers. Subclasses do not share the attributes of their parent classes. Subclasses can share the prototype methods of their parent classes.
function create(obj){
    function Son(){}
    Son.prototype= obj
    return new Son()
}

function render(child, parent){
    let clone = create(parent)
    clone.constructor= child;
    child.prototype = child;
}
Copy the code

Es6 class extends inheritance

class Father{
    constructor(name, age){
            this.name = name,
            this.age = age
    }
}

class Child extends Father{
    conscrcutor(name,age,gender){
            super(name,age)
            this.gender = gender; }}Copy the code