面向对象编程--继承

1、类式继承

<script type="text/javascript">
		//声明父类
		function SuperClass () {
			this.superValue = true;
		}
		// 父类原型
		SuperClass.prototype.getSuperValue = function () {
			return this.superValue;
		}
		// 声明子类
		function SubClass () {
			this.subValue = false;
		}
		// 继承父类
		SubClass.prototype = new SuperClass();
		SubClass.prototype.getSubValue = function () {
			return this.subValue;
		}
		// 对子类实例化
		var instance = new SubClass();
		console.log(instance.getSuperValue());  //true
		console.log(instance.getSubValue());   //false
	</script>

注意点

1. 类的原型对象的作用就是为类的原型添加方法，类不能直接访问这些方法和属性，必须通过prototype进行访问。
   

2. 新创建的对象可以直接访问到父类原型对象上的属性和方法
   

3. 可以通过instanceof来检测某个对象是否是某个类的实例
   

4. 在实现subClass的继承的时候是将superClass的实例赋值给了subClass的原型prototype，所以SubClass.prototype 继承了 SuperClass

缺点

1. 子类的实例更改原型从父类继承来的属性会影响到其他子类

<script type="text/javascript">
		//声明父类
		function SuperClass () {
			this.books = ['js'];
		}
		function SubClass () {
		}
		// 继承父类
		SubClass.prototype = new SuperClass();
		var instance1 = new SubClass();
		var instance2 = new SubClass();
		console.log(instance2.books);
		instance1.books.push('CSS');
		console.log(instance2.books);
	</script>

instance1的修改会改变了instance2的books属性

2. 由于子类实现的继承是靠原型prototype对父类的实例化实现的，在实例化父类的时候也无法对父类构造函数的属性进行初始化

2、构造函数继承

<script type="text/javascript">
		// 声明父类
		function SuperClass(id) {
			this.books = ['JavaScript','html','css'];
			this.id = id;
		}
		SuperClass.prototype.showBooks = function(){
			console.log(this.books);
		}
		// 声明子类
		function SubClass(id){
			// 继承父类
			SuperClass.call(this,id);
		}
		// 创建实例
		var instance1 = new SubClass(10);
		var instance2 = new SubClass(11);
		instance1.books.push('设计模式');
		console.log(instance1.books);
		console.log(instance1.id);
		console.log(instance2.books);
		console.log(instance2.id);
	</script>

注意

1. call 可以改变函数的作用环境，通过SuperClass.call(this,id);可以将
   子类的变量在父类中执行一遍。
2. 没有涉及到原型，所以父类的原型方法不会继承下来
   缺点
   由于原型中的方法不会被继承，如果想要子类继承就要放在构造函数中，这样的话创造出来的实例都会单独拥有一份原型方法，违背了代码复用原则。

3、组合继承

类式继承是通过子类的原型prototype对父类的实例化来实现的
构造函数式继承是通过在子类的构造函数作用环境中执行一次父类的构造函数实现的（call）
将二者结合起来就出现了组合式继承

<script type="text/javascript">
		// 声明父类
		function SuperClass(name) {
			this.books = ['JavaScript','html','css'];
			this.name = name;
		}
		SuperClass.prototype.getName = function(){
			console.log(this.name);
		}
		// 声明子类
		function SubClass(name,time){
			// 继承父类
			SuperClass.call(this,name);
			this.time = time;
		}
		SubClass.prototype = new SuperClass()
		SubClass.prototype.getTime = function(){
			console.log(this.time);
		}
		// 创建实例
		var instance1 = new SubClass('js book',2019);
		instance1.books.push('设计模式');
		console.log(instance1.books);
		instance1.getName();
		instance1.getTime()
		var instance2 = new SubClass('css book',2020);
		console.log(instance2.books);
		instance2.getName();
		instance2.getTime();
	</script>

优点

1. 子类的实例要更改父类继承下来的属性，不会影响到其他实例
2. 子类实例化过程中又能将参数传递到父类的构造函数（name）

4、原型式继承

<script type="text/javascript">
		function inheritObject(o){
			function F(){};
			F.prototype = o;
			return new F();
		}
		var book = {
			name:'js book',
			alikeBook: ['css book','html book']
		}
		var newBook = inheritObject(book);
		newBook.name = 'ajax book';
		newBook.alikeBook.push('xml book');

		var otherBook = inheritObject(book);
		otherBook.name = 'flash book';
		otherBook.alikeBook.push('as book');

		console.log(newBook.name);
		console.log(newBook.alikeBook);
		console.log(otherBook.name);
		console.log(otherBook.alikeBook);
		console.log(book.name);
		console.log(book.alikeBook);
	</script>

注意
跟类式继承一样，由于是通过prototype从父类继承来的，因此父类对象book中的值类型的属性被复制，会被共用。

5、寄生组合式继承

<script type="text/javascript">
		function inheritObject(o){
			function F(){};
			F.prototype = o;
			return new F();
		}
		function inheritPrototype(subClass,superClass){
			// 复制父类的原型副本保存在变量中
			var p = inheritObject(superClass.prototype);
			// 修正因为重写子类原型导致的子类的constructor属性被修改
			p.constructor = subClass;
			subClass.prototype = p;

		}
		// 定义父类
		function SuperClass(name){
			this.name = name;
			this.colors = ['red','blue','green']
		}
		SuperClass.prototype.getName = function(){
			console.log(this.name);
		}
		// 定义子类
		function SubClass(name,time){
			// 构造函数式继承
			SuperClass.call(this,name);
			this.time = time;
		}
		// 寄生式继承父类原型
		inheritPrototype(SubClass,SuperClass);
		SubClass.prototype.getTime = function(){
			console.log(this.time);
		}
		// 实例化
		var instance1 = new SubClass('js book',2019);
		var instance2 = new SubClass('css book',2020);
		instance1.colors.push('black');
		console.log(instance1.colors);
		console.log(instance2.colors);
		instance2.getName();
		instance1.getTime();
	</script>