浅谈原型链及原型链继承

1、什么是原型链？
JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性是，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。更详细的解释点击here查看。

2、原型链示意图

3、JS实现继承的方式
这里只列举4种（原型链继承、构造继承继承、组合继承、es6–Class继承）

//定义一个父类
function Father(name){
	//属性
	this.name = name || "father";
	//实例方法
	this.sayName = function (){
		console.log(this.name);
	};
	this.color = ['red','blue'];
};

//原型方法
Father.prototype.age = 18;
Father.prototype.sayAge = function(){
	console.log(this.age)
}

（1）原型链继承（将父类作为子类的原型）

function Son(name){
	this.name = name || "son";
};

Son.prototype = new Father();

let s1 = new Son('s1');
let s2 = new Son('s2');

s1.color.push('black');

console.log(s1.name);//s1
console.log(s1.color);//['red','blue','black']
console.log(s1.age);//18
s1.sayAge();//18
console.log(s2.name);//s2
console.log(s2.color);//['red','blue','black']

原型链继承优点：
1.简单，易于实现。
2.父类新增原型方法、原型属性，子类都能访问到。

原型链继承缺点：
1.无法实现多继承，因为原型一次只能被一个实例更改。
2.来自原型对象的所有属性被所有实例共享（例子中的color属性）
3.创建子类实例时，无法向父构造函数传参。

//-------------------------------------------------------------------------

（2）构造继承

function Son(name){
	Father.call(this,"这是传给父类的参数");
	this.name = name || "son";
}

let s = new Son('son');
console.log(s.name);//son
//s.sayAge();//抛出错误（无法继承父类原型方法）
s.sayName();//son
console.log(s.age);//underfind （无法继承父类原型属性）
console.log(s instanceof Father);//false
console.log(s instanceof Son);//true

构造继承优点：
1.解决了原型链继承中子类实例共享父类引用属性的问题。
2.创建子类实例时，可以向父类传递参数。
3.可以实现多继承（call多个父类对象）。

构造继承缺点：
1.实例并不是父类的实例，只是子类的实例。
2.只能继承父类实例的属性与方法，不能继承其原型上的属性和方法。
3.无法实现函数复用，每个子类都有父类实例函数的副本，影响性能。

//----------------------------------------

3、组合继承：将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型的属性和方法的继承，而通过构造函数来实现对实例属性的继承。（原型链继承+构造继承继承）

function Son(name){
	//第一次调用父类构造器 子类实例增加父类实例
	Father.call(this,"这是传给父类的参数");
	this.name = name || "son";
}
//经过new 运算符 第二次调用父类构造器 子类原型也增加父类的实例
Son.prototype = new Father();

let s = new Son('son');
console.log(s.name);//son
s.sayAge();//18
s.sayName();//son
console.log(s.age);//18
console.log(s instanceof Father)//true
console.log(s instanceof Son)//true
console.log(s.constructor === Father);//true
console.log(s.constructor === Son);//false

组合继承优点：
1.弥补了构造继承的缺点，现在既可以继承实例的属性和方法，也可以继承原型的实例和方法
2.既是子类的实例，也是父类的实例
3.可以向父类传递参数
4.函数可以复用
组合继承缺点：
1.调用了两次父类构造函数，生成了两份实例
2.constructor指向问题

//-------------------------
4、es6–Class继承：使用extends表明继承自哪个父类，并且在子类构造函数中必须调用super

class Son extends Father {
	constructor(name){
		super(name);
		this.name = name || "son";
	}
}

let s = new Son("son");
console.log(s.name);//son
s.sayAge();//18
s.sayName();//son
console.log(s.age);//18
console.log(s instanceof Father);//true
console.log(s instanceof Son)//true
console.log(s.constructor === Father);//false
console.log(s.constructor === Son);//true