inheritance

There are four kinds of inheritance, and the advantages and disadvantages of each inheritance. Js inheritance, mainly rely on the prototype chain to achieve, prototype chain is the main tool and method of inheritance.

Four ways of inheritance

Archetypal inheritance combination inheritance Parasitic combination inheritance ES6 extend inheritance

1. Prototype inheritance

The core of prototype inheritance is the stereotype feature of taking instances of the parent class as subclasses: instances of the parent class can be used as instances of the parent class of the original and new methods and attributes, and subclasses can access them easily and easily

Disadvantages: Created subclass instances cannot pass arguments Subclass instances share reference attributes of the parent class constructor

var person = { 
	friends : ["Van"."Louis"."Nick"];
	 };
var p1 = Object.create(person); 
p1.friends.push("Rob");
var p2 = Object.create(person); 
p2.friends.push("Style"); 
console.log(person.friends); //"Van,Louis,Nick,Rob,Style"
Copy the code

2. Combinatorial inheritance

Inheriting the attributes of the parent class and preserving the advantages of passing arguments by calling the parent constructor; Then the function reuse is realized by using the parent class instance as the prototype of the subclass. Features:

  1. You can inherit instance properties and methods as well as stereotype properties and methods
  2. An instance of a function is an instance of both a subclass and a superclass
  3. There is no reference property sharing problem. That is, a subclass change does not affect the sharing of the parent class reference type
  4. Instances of subclasses can pass arguments. 5. All subclasses can reuse methods of their parent class
/ / parent class
function Father(name){
	this.name = name;
	this.colors = ['red'.'blue'.'green'];
}
// Methods defined on prototype objects (shared)
Father.prototype.sayName = function (){
	alert(this.name);
};
function Son (name,age){
	Father.call(this,name);// core: inherit instance attributes, first call father ()
	this. The age = age; }// Methods shared by subclasses and superclasses (reusing superclass attributes and methods)
son.prototype = new Father ();// core: inherit instance attributes, second call Father()
son.prototype.constructor = son;// Fix the subclass's constructor pointer

// Advantage 1: can transfer parameters
var instance1 = new Son ('liuis'.5);
var instance2 =  new son ('zhai'.10);

// Share parent methods
instance1.sayName();//liuis
Instance.sayName();//zhai

// No parent reference attributes are shared
instance1.colors.push('black); console.log(instance1.colors); //"red,blue,green,black" console.log(instance2.colors); //"red,blue,green" }Copy the code

3. Parasitic combination inheritance

Parasitic composition is a combination of the advantages of composite inheritance and archetypal inheritance, and there is no disadvantage of eliminating the instance properties of the parent class in a parasitic manner, so that when the parent class’s constructor is called again, the instance methods and properties are not initialized twice. Avoiding composite inheritance is good except that it’s complicated to implement.

Function Father(name){function Father(name){
	this.name = name;
	this.colors = ["red"."blue"."green"]; 
}
// Methods defined on prototype objects (shared)
Father.prototype.sayName = function(){ 
	alert(this.name); 
	};
function Son(name,age){ 
	Father.call(this,name); / / core
	this.age = age; 
 }
Son.prototype = Object.create(Father.prototype); / / core:
Son.prototype.constructor = Son; // Fix the subclass's constructor pointer
Copy the code

4. Es6 extends

The EXTEND extension of ES6 is essentially the syntactic sugar of parasitic composite inheritance that extends a class and inherits its behavior using the extends keyword. Extends: extends: sets son.prototype = object.create(Father. Prototype); Super (): internally equivalent to calling Father. Call (this);

Constructor (‘ super ‘); constructor (‘ this’); constructor (‘ super ‘); constructor (‘ this’)

class Son extends Father { // Son.prototype.__proto__ = Father.prototype 
	constructor(y) { 
		super(200); // super(200) => Father.call(this,200) 
		this.y = y 
	} 
}
Copy the code

Extends Extends this article goes into a lot of detail. You can take a look at it