Inheritance in JS

  1. Constructor call (the first call to the parent constructor)
  2. Prototype chain Subclass prototype = superclass instance (second call to superclass constructor) The subclass constructor refers back to itself
  3. Combinatorial (1+2) disadvantages: Call the superclass constructor twice, wasteful performance
  4. A shallow copy of prototype object.create ()
  5. 3. parasite (augment) 4
  6. Parasitic combination (1+5) perfect inheritance with no performance problems
  7. The inheritance of the ES6 class extends keyword differs in some detail from the parasitic combination

We’ll start with the object. create function.

// Prototype inheritance
function object(o){
	function F(){}
    F.prototype = o
    return new F()
}

// Enhanced parasitic inheritance of archetypal inheritance
function createAnother(o){
	var clone = object(o)
    clone.say = function{    // Enhance the object in some way
    	console.log('Hi')}return clone
}
Copy the code
// The ES5 parasitic combination implements its extends
function myExtends(SuperType,SubType){
	var prototype = Object.create(SuperType.prototype)  // Implement a shallow copy of the superclass prototype
	prototype.constructor = SubType       // Fix the constructor pointing
	SubType.prototype = prototype        
}


function Super1(name){
	this.name = name
}

Super1.prototype.say = function(){
	console.log('hi')}function Sub1(name,age){
	Supertype.call(this,name)
	this.age = age
}

// Core: Because it is a shallow copy of the parent prototype, it does not contain the parent constructor, so it does not waste calling the parent constructor twice
myExtends(Super1,Sub1)

Sub1.prototype.say() //hi

// Perfect inheritance
Copy the code

SetPrototypeOf (A, B) method

Equivalent to A.__proto__ = B

Object.setPrototypeOf = function(obj,proto){
	obj.__proto__ = ptoto
    return obj
}
Copy the code

GetPrototypeOf (A) method

Get A's __proto__

Similarities and differences between ES5 and ES6 inheritance

ES5: Parasitic combinative inheritance uses Object.create(), a copy of the parent constructor, with no prototype chain pointing to the first instance of the subclass this Object, Again to its enhanced ES6: keyword subclass constructor’s prototype chain extends to the superclass constructor To the parent class instance object properties and methods to this above, reoccupy subclass constructor to modify this, so you must call super method

/ / ES6 extends to inherit
function _extends(SuperClass,SubClass){
	/ / here can be written as the Object. SetPrototypeOf (ttf_subclass. Prototype, SuperClass. The prototype)
	SubClass.prototype.__proto__ = SuperClass.prototype // The Sub instance inherits the Super instance
    SubClass.prototype.constructor = SubClass
    SubClass.__proto__ = SuperClass   //Sub inherits the static properties of Super
}

function SuperClass(name){
	this.name = name
}

function SubClass(name,age){
	_extends(SuperClass,SubClass)  // Point the Sub prototype to Super
    SuperClass.call(this,name)     // equivalent to the super keyword
    Object. GetPrototypeOf (SubClass) //==SuperClass
    
    this.age = age
    return this
}
Copy the code