JS的七大继承方式（记录笔记）

一、原型链继承：

当改变s1的play属性，s2的也跟着发生变化。因为两个实例引用的是同个原型对象，他们的内存空间是共享的。

	function Parent() {
		this.name = 'parent';
		this.play = [1,2,3]
	}
	function Child() {
		this.type = 'child';
	}
	Child.prototype = new Parent();
	console.log(new Child())
	var s1 = new Child();
	var s2 = new Child();
	s2.play.push(4);
	console.log(s1,s2); // [1,2,3,4]

---

二、构造函数继承（借用call）：

1、优化了第一种原型链继承，父类的引用属性不会被共享；
2、只继承了父类原型属性，并没有继承到构造函数Parent自定义添加的原型属性getName。

	function  Parent() {     //构造函数
		this.name = 'parent';
		this.play = [1,2,3];
	}
	Parent.prototype.getName = function(){   //给构造函数增添原型属性
		return this.name;
	}
	function Child() {
		Parent.call(this);   //将this指向Parent
		this.type = 'child';
	}
	let child1 = new Child()   //创建实例
	let child2 = new Child()
	child1.play.push(4);
	console.log(child1);  //[1,2,3,4]
	console.log(child2);	//[1,2,3]   //不是共享的，互不影响
	
	console.log(Child);    //没有问题
	console.log(child.getName());   //会报错，因为他没有继承到Parent自定义添加的原型属性getName

---

三、组合继承：

优化了以上两种继承方式，但是可以看到借用了两次Parent函数，造成了多构造一次的性能开销。

	function Parent() {
		this.name = 'parent';
		this.play = [1,2,3]
	}
	Parent.prototype.getName = function() {
		return this.play
	}
	function Child() {
		//第二次借用Parent()
		Parent.call(this);
		this.type = 'child';
	}
	//第一次借用Parent()
	Child.prototype = new Parent();
	//手动挂上构造器，指向自己的构造函数
	Child.prototype.constructor = Child;
	
	var s1 = new Child();
	var s2 = new Child();
	s1.play.push(4);
	
	console.log(s1,s2);  //互不影响
	console.log(s1.getName());   //[1,2,3,4]
	console.log(s2.getName());   //[1,2,3]

---

四、原型式继承：

采用Object.create实现普通对象的继承，因为Object.create方法实现的是浅拷贝，多个实例的引用类型属性指向相同的内存，存在篡改的可能。

	let parent = {
		name: "parent",
		friends: [1,2,3],
		getName:function() {
			return this.name;
		}
	};
	let child1 = Object.create(parent);
	child1.name = "tom";
	child1.friends.push(4);
	
	let child2 = Object.create(parent);
	child2.friends.push(5);
	
	console.log(child1.name);	//tom
	console.log(child1.name === child1.getName());  //true
	console.log(child2.name);	//parent
	console.log(child1.friends);	//[1,2,3,4,5]
	console.log(child2.friends);	//[1,2,3,4,5]

---

五、寄生式继承：

跟原型式继承一样，实现的是浅拷贝，共享一个内存空间。

	let parent = {
		name: "parent", 
		friends: [1,2,3],
		getName:function() {
			return this.name;
		}
	};
	function cloneContext(original) {
		let clone = Object.create(original);
		clone.getFriends = function () {
			return this.friends;
		}
		return clone;
	}
	
	let child = cloneContext(parent);
	
	console.log(child);
	console.log(child.getName());  //parent
	console.log(child.getFriends());  //[1,2,3]

---

六、寄生组合继承：（优）

寄生组合式继承，借助解决普通对象的继承问题的Object.create 方法，在亲全面几种继承方式的优缺点基础上进行改造，这也是所有继承方式里面相对最优的继承方式。

	function cloneContext(parent,child) {
		//这里改用Object.create可以减少组合继承中多进行一次构造的过程
		child.prototype = Object.create(parent.prototype);
		child.prototype.constructor = child;
	}
	
	function Parent() {
		this.name = 'parent';
		this.play = [1,2,3];
	}
	Parent.prototype.getName = function () {
		return this.name;
	}
	
	function Child() {
		Parent.call(this);
		this.friends = 'child';
	}
	
	cloneContext(Parent,Child);
	
	Child.prototype.getFriends = function() {
		return this.friends;
	}
	
	let person1 = new Child();
	console.log(person1);
	console.log(person1.getFriends());	//child
	console.log(person1.getName());		//parent

---

七、ES6的extend：（优）

extends实际采用的也是寄生组合继承方式，因此也证明了这种方式是较优的解决继承的方式。

	class Person {
		constructor(name) {
			this.name = name
		}
		//增加原型的方法
		//即 Person.prototype.getName = function() { }
		//下面可以简写为 getName() {...}
		getName = function () {
			console.log('Person:',this.name)
		}
	}
	
	class Gamer extends Person {
		constructor(name,age) {
			//子类中存在构造函数，则需要在使用'this'之前首先调用 super()
			super(name)
			this.age = age
		}
	}
	const child = new Gamer('tom',20)
	child.getName()		//Person: tom (成功调到父类的方法)

---

结束：

总结一下仅供参考，若有什么不对欢迎指出~~~~~最后附上一张有助于理解的思路图

---