As a weakly typed object-oriented language, Javascript inheritance is also one of its most powerful features. Every time we and the interviewer talk about JS prototype, prototype chain, we are likely to inevitably talk about inheritance, in order to better and the interviewer talk about it, or in order to better understand the characteristics of JS, inheritance is we must understand. What is inheritance? How do we implement inheritance in JS? This article lists five very classic inheritance methods in JS.

Javasciprt five classic inheritance

1. Prototype chain inheritance

Constructor inheritance

3. Combinatorial inheritance

4. Parasitic combination inheritance

5. The class inheritance

1. Prototype chain inheritance

/* The prototype chain inheritance implementation starts */

function Animal(name){
	this.name = name
	this.loveFood = ['apple'.'banana'.'potatoes']
}

Animal.prototype.sayLoveFood = function(){
	console.log(this.loveFood)
}

function Dog(){}

Dog.prototype = new Animal()

/* Prototype chain inheritance ends */




/* The following examples illustrate the disadvantages of stereotype chain inheritance (instance reference types are shared) */
var dog1 = new Dog()
var dog2 = new Dog()

dog1.loveFood.push('asd')
console.log(dog2.sayLoveFood())
Copy the code

Opening the console paste copy yields the result of the use case for prototype chain inheritance:

Advantages:

  • Easy to implement
  • Pure inheritance, creating instances of both subclasses and superclasses
  • The stereotype methods of the parent class and the stereotype attribute subclasses are all accessible

Disadvantages:

  • All attributes of the prototype object are shared by all instances, and reference types are shared (the biggest disadvantage).
  • Unable to implement multiple inheritance (dog-.prototype only has one)
  • Unable to pass arguments to parent class construction parameters while creating a subclass instance

Constructor inheritance

/* Constructor inheritance starts */

function Animal(name){
	this.name = name
	this.loveFood = ['apple'.'banana'.'potatoes']
}

Animal.prototype.sayLoveFood = function(){
	console.log(this.loveFood)
}

function Dog(name){
	Animal.call(this,name)
}

/* Constructor inheritance ends */

/* The following are examples of the disadvantages of constructor inheritance */
var dog1 = new Dog()
dog1.sayLoveFood()
Copy the code

Opening the console paste copy yields the result of the use case inherited by the constructor:

Advantages:

  • Multiple inheritance can be implemented by using multiple calls in the Dog constructor to inherit from the parent class
  • Instance reference types are no longer shared

Disadvantages:

  • If the functions of the parent class are not defined on the stereotype, then the functions that create the instance are not reused
  • An instance is not an instance of a parent class
  • Instance cannot inherit stereotype properties/methods from parent class (biggest drawback)

3. Combinatorial inheritance

/* Composite inheritance starts */

function Animal(name){
	this.name = name
	this.loveFood = ['apple'.'banana'.'potatoes']
}

Animal.prototype.sayLoveFood = function(){
	console.log(this.loveFood)
}

function Dog(name){
	Animal.call(this,name)
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

/* Combination inheritance ends */
Copy the code

Advantages:

  • Multiple inheritance can be implemented
  • A subclass is an instance of a parent class
  • By defining a function as a prototype of its parent class, the function can be reused
  • Reference types that instances inherit from their parents are also not shared

It’s kind of perfect

Disadvantages:

  • The superclass constructor is called twice when the instance is created (call and new Animal).

Parasitic combinatorial inheritance

/* Parasitic combinatorial inheritance begins */
function Animal(name){
	this.name = name
	this.loveFood = ['apple'.'banana'.'potatoes']
}

Animal.prototype.sayLoveFood = function(){
	console.log(this.loveFood)
}

var f = function(){}
f.prototype = Animal.prototype

function Dog(name){
	Animal.call(this,name)
}

Dog.prototype = new f()
Dog.prototype.constructor = Dog
/* Parasitic combinatorial inheritance ends */

Copy the code

How it works: it’s not too hard, just like combinatorial inheritance, but defines a function f that inherits the parent class’s prototype (to cut off properties that are not in the parent class’s prototype), so that later subclasses don’t call the parent constructor twice.

Advantages: can be said to be perfect, should have all

Disadvantages: More than one function defined

5. Class implementation inheritance

class Animal {
    constructor(name) {
        this.name = name
    } 
    getName() {
        return this.name
    }
}
class Dog extends Animal {
    constructor(name, age) {
        super(name)
        this.age = age
    }
}

var dog = new Dog('a'.15)
console.log(dog.getName())
Copy the code

Pros: Class is really just a syntactic sugar for inheritance in ES5 Prototype, but class makes the inheritance structure clearer

The bad: no

For more information about class, please refer to Ruan Yifeng’s introduction to ES6: es6.ruanyifeng.com/#docs/class

The end

These are the five classic javascript inheritance pull, have you learned? Welcome to like and collect!!

Your support is the biggest motivation for my creation.