108_js笔记11_js的继承

一,构造继承

1. 基本思想:用call、apply方法可以在新创建的对象上执行构造函数,用父类的构造函数来增加子类的实例
2. 具体例子:

   1. // 父类
      	function SuperClass(){
      		this.property1 = 'Super Property1';
      		this.method1 = function () {
      			console.log('Super Method1')
      		}
      	}
      	
      	SuperClass.prototype.property2 = 'Super Property2';
      	SuperClass.prototype.method2 = function () {
      		console.log('Super Method2')
      	}
      	
      // 子类
      	function SubClass(){
      		SuperClass.call(this)
      		this.property2 = 'Sub Property1'
      	}
      	
      	var sub = new SubClass();
      	console.log(sub.property1);
      	console.log(sub.property2);
      	console.log(sub.__proto__.property2);
      
      结果:
      Super Property1
      Sub Property1
      undefined

3. 优点:
   1. 直接继承超类构造函数的属性和方法
   2. 可以继承多个构造函数属性（call多个）
4. 缺点:无法继承原型链上的属性和方法

二,原型链继承

1. 基本思想:用原型链来实现继承，超类的一个实例作为子类的原型
2. 具体例子

   1. // 父类
      	function SuperClass(){
      		this.property1 = 'Super Property1';
      		this.method1 = function () {
      			console.log('Super Method1')
      		}
      	}
      	
      	SuperClass.prototype.property2 = 'Super Property2';
      	SuperClass.prototype.method2 = function () {
      		console.log('Super Method2')
      	}
      	
      // 子类
      	function SubClass(){
      		this.property2 = 'Sub Property1';
      	}
      	
      	SubClass.prototype = new SuperClass();
      	
      	var sub = new SubClass();
      	console.log(sub.property1);
      	console.log(sub.property2);
      	
      	var sub1 = new SubClass();
      	sub1.__proto__.property2 = '新修改';
      	console.log(sub1.__proto__.property2);
      	
      	var sub2 = new SubClass();
      	console.log(sub2.__proto__.property2);
      结果:
      Super Property1
      Sub Property1
      新修改
      新修改
3. 优点:
   1. 操作简单
   2. 可以继承父类的实例属性和方法,还有原型属性和方法
4. 缺点:
   1. 实例的原型属性共享,修改一个,其他也修改了
   2. 无法实现多继承

三,组合式继承

1. 基本思想:构造继承 + 原型链继承
2. 具体例子:

   1. // 父类
      	function SuperClass(){
      		this.property1 = 'Super Property1';
      		this.method1 = function () {
      			console.log('Super Method1')
      		}
      	}
      	
      	SuperClass.prototype.property2 = 'Super Property2';
      	SuperClass.prototype.method2 = function () {
      		console.log('Super Method2')
      	}
      	
      // 子类
      	function SubClass(){
      		 SuperClass.call(this);
      		this.property2 = 'Sub Property1';
      	}
      	SubClass.prototype = new SuperClass();
      	SubClass.prototype.constructor = SubClass;
      	
      	var sub = new SubClass();
      	console.log(sub.property1);
      	console.log(sub.property2);
      	console.log(sub instanceof SuperClass); // true
      	console.log(sub instanceof SubClass); // true
      结果:
      Super Property1
      Sub Property1
      true
      true
      

3. 优点
   1. 可以继承父类原型上的属性，可以传参，可复用。
   2. 每个新实例引入的构造函数属性是私有的
4. 缺点
   1. 调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数

四,原型式继承

1. 基本思想:用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理
2. 具体例子:

   1. // 父类
      	function SuperClass(){
      		this.property1 = 'Super Property1';
      		this.method1 = function () {
      			console.log('Super Method1')
      		}
      	}
      	
      	SuperClass.prototype.property2 = 'Super Property2';
      	SuperClass.prototype.method2 = function () {
      		console.log('Super Method2')
      	}
      	
      // 子类
      	function subClassCreate(obj){
      		function F(){};
      		F.prototype = obj;
      		return new F()
      	}
      	
      	var oldSub = new SuperClass();
      	var sub = subClassCreate(oldSub);
      	
      	console.log(sub.property1);
      	console.log(sub.property2);
      结果:
      Super Property1
      Super Property2

3. 优点
   1. 直接通过对象生成一个继承该对象的对象
4. 缺点
   1. 所有实例都会继承原型上的属性
   2. 是父类实例传参，不是子类实例化传参，缺少了类的概念,

五,寄生式继承

1. 基本思想:在原型式继承的基础上,再封装一个函数
2. 具体例子

   1. // 父类
      	function SuperClass(){
      		this.property1 = 'Super Property1';
      		this.method1 = function () {
      			console.log('Super Method1')
      		}
      	}
      	
      	SuperClass.prototype.property2 = 'Super Property2';
      	SuperClass.prototype.method2 = function () {
      		console.log('Super Method2')
      	}
      	
      // 子类
      	function subClassCreate1(obj){
      		function F(){};
      		F.prototype = obj;
      		return new F()
      	}
      	function subClassCreate2(obj){
      		var subClass = subClassCreate1(obj);
      		subClass.property1 = 'Sub Property1';
      		return subClass;
      	}
      	
      	var oldSub = new SuperClass();
      	var sub = subClassCreate2(oldSub);
      	
      	console.log(sub.property1);
      	console.log(sub.property2);
      结果:
      Sub Property1
      Super Property2

3. 优点
   1. 原型式继承的拓展
4. 缺点
   1. 没有类的概念,无法复用

六,组合寄生式

1. 基本思想:在函数内返回对象然后调用
2. 具体例子:

   1. // 父类
      	function SuperClass(){
      		this.property1 = 'Super Property1';
      		this.method1 = function () {
      			console.log('Super Method1')
      		}
      	}
      	
      	SuperClass.prototype.property2 = 'Super Property2';
      	SuperClass.prototype.method2 = function () {
      		console.log('Super Method2')
      	}
      	
      // 子类
      	function subClassCreate1(obj){
      		function F(){};
      		F.prototype = obj;
      		return new F()
      	}
      	function subClassCreate2(obj){
      		SuperClass.call(this);
      	}
      	
      	var oldSub = new subClassCreate1(SuperClass.prototype);
      	subClassCreate2.prototype = oldSub;
      //	oldSub.contructor = subClassCreate2;
      	
      	var sub = new subClassCreate2();
      	console.log(sub.property1);
      	console.log(sub.property2);
      
      结果:
      Super Property1
      Super Property2
      

3. 优点
   1. 完美实现继承，解决了组合式继承带两份属性的问题
4. 缺点
   1. 过于繁琐，不如组合继承