1. Prototype inheritance

Implementation:

function Super(){ this.a=1 }
Super.prototype.say = function(){ console.log(‘hhh’) }
function Sub(){}


const test = new Sub()
console.log( test.say() )// hhh
Copy the code

Advantages: Inherits properties and methods of multiple reference types through stereotypes

Disadvantages: The Sub prototype becomes an instance of Super. If an attribute of the Super instance is a reference value, the reference value will be applied to all instances created by Sub, resulting in contamination problems. The following

function Super(){ this.a=[1.2]}function Sub(){}
Sub.prototype = new Super()

const test1 = new Sub()
test1.a.push(3)
console.log(test1.a)/ / [1, 2, 3]
const test2 = new Sub()
console.log(test2.a)/ / [1, 2, 3]
Copy the code

2. Embezzle constructors

Implementation: constructor pattern +call

function Super = function(){ this.a= 1}function Sub = function(){
       Super.call(this)
       this.b= 2}const test = new Sub()
Copy the code

Advantages: Each instance has its own A attribute, and even reference values are not contaminated

Disadvantages: methods in the Super constructor are created on each instance (unless the method declaration mentions global); An instance of Sub cannot access methods on the Super stereotype

3. Combinatorial inheritance

Implementation: prototype inheritance + embeded constructor inheritance

function Super(){ this.a=[1.2] }
Super.prototype.say = function(){ console.log(‘hhh’) }
function Sub(){
    Super.call(this)
    this b=2
}
Sub.prototype = new Super()
 
const test1 = new Sub()
console.log( test1.say() )// hhh
test1.a.push(3)
console.log(test1.a)/ / [1, 2, 3]
const test2 = new Sub()
console.log(test2.a)/ / [1, 2]
Copy the code

Advantages: a combination of the advantages of prototype inheritance and embeded constructor inheritance

Cons: Efficiency issues, Super is always called twice

4. Inheritance of the original type

Implementation:

Before the es5

const obj = { a:1 }
function createObj(o){
    const Fn(){}
    Fn.prototype = o
    return new Fn()
}

const test = createObj(obj)
Copy the code

After es5

const obj = { a:1 }

const test = Object.create(obj)
Copy the code

Advantages: Shallow clone one object to create another object, and inherit the object’s prototype properties

Disadvantages: Because it is a shallow clone, the object attributes shared by the instance are contaminated if they are reference values. The following

const obj = { a: [1.2].b:2 }
const test1 = Object.create(obj)
const test2 = Object.create(obj)

test1.a.push(3)
test1.b=3
console.log(test1.a, test2.a)/ / [1, 2, 3] [1, 2, 3]
console.log(test1.b, test2.b)2 / / 3
Copy the code

Parasitic inheritance

Implementation: constructor pattern + factory pattern

function createObj(o){
    let clone = Object.create(o)
    clone.say=function(){
        console.log(‘hhh’)
    }
    return clone
}

const obj = { a:1 }
const test = createObj(obj)
Copy the code

Advantages: Create a shallow clone of one object and enhance the object

Disadvantages: The same as the stolen constructor inheritance method is created on each instance

Note: Object.create is not required and returns any new Object

Parasitic combinatorial inheritance

Implementation: embeded constructor inheritance + primitive inheritance

function Super(){ this.a=[1.2] }
Super.prototype.say = function(){ console.log(‘hhh’) }
function Sub(){
    Super.call(this)
    this b=2
}

Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub

const test = new Sub()
Copy the code

Advantages: it combines the advantages of primitive inheritance and stolen constructor inheritance, and is more efficient than combinatorial inheritance.