javascript继承的实现

javascript是基于对象的编程语言，它本身是没有继承的，那么怎么来模拟实现一下javascript的继承呢？刚刚学习了几个方法，下面做一下总结。

一、原型的方式

主要思想就是让子类的原型对象等于父类的实例

// 父类构造函数 sup
				function Sup(name){
					this.name = name;					
				}
				
				// 父类的原型对象
				Sup.prototype = {
					constructor : Sup , 
					sayName : function(){
						alert(this.name);
					}
				};
				
				// 子类构造函数 sub
				function Sub(age){
					this.age = age ;
				}
				
				//如果我们让子类的原型对象 等于父类的实例 (实现了js的继承)
				//1 显然此时的原型对象将包含一个指向另一个原型的指针
				// sup的实例对象 和 sup的原型对象 有一个关系
				//2 相应的另一个原型中也包含着一个指向另一个构造函数的指针
				// 子类的原型对象的构造器变成了 父类的构造器
				Sub.prototype = new Sup('张三'); 
				var sub1 = new Sub();
				
				sub1.sayName();//张三
				
				

通过代码可以看出，让子类的原型对象等于父类的实例可以实现子类继承父类的属性，方法，原型。

二、类继承的方式

也可叫做函数借用的方式

原型继承的方式有个缺点，继承时需要在父类的实例中添加参数，但是我们希望，子类的继承能像java里面那样直接在子类的形参中定义父类的参数。

所以我们就想到了call和apply两个方法，关于这两个方法的用法大家可以参考http://blog.csdn.net/hanxueyu666/article/details/51433541

下面我们就来看看代码是怎么实现的吧。

// 类继承(只继承模版,不继承原型对象) (借用构造函数的方式继承)
				/*
				// 父类
				function Person(name, age){
					this.name = name ; 
					this.age  = age ;
				}
				// 父类的原型对象属性
				Person.prototype.id = 10 ;
				
				// 子类
				function Boy(name , age , sex){
					// call apply
					Person.call(this,name,age);
					this.sex = sex ; 
				}
				
				var b = new Boy('张三' , 20 , '男');
				alert(b.name);//张三
				alert(b.age);//20
				alert(b.sex);//男
				alert(b.id); //indefined 父类的原型对象并没有继承

看看，这样就可以直接在子类中添加参数了，是不是看着舒服多了？当然代码中call也可以改成apply，大家可以自己动手该一下。当然类继承的模式也有一个缺点，就是不能继承父类的原型。那么怎么才能既可以在子类中直接添加参数，又可以继承父类的原型对象呢？且看下面的分解。

三、原型继承和类继承的组合方式

为了解决上面的问题，我们可以把两种继承模式组合起来使用，直接上代码

// 原型继承+借用构造函数继承 = 混合继承
				
				
				// 父类
				function Person(name, age){
					this.name = name ; 
					this.age  = age ;
				}
				// 父类的原型对象属性
				Person.prototype.id = 10 ;
				Person.prototype.sayName = function(){alert(this.name);};
				
				// 子类
				function Boy(name , age , sex){
					// call apply
					Person.call(this,name,age); // 1 借用构造函数继承 继承父类的模版
					this.sex = sex ; 
				}	
				
				// 2 原型继承
				// 只剩下 父类的实例 和 父类的原型对象的关系了
				Boy.prototype = new Person(); //继承父类的原型对象
				
				
				var b = new Boy('李四' , 20 , '男');
				alert(b.name);
				alert(b.sex);
				b.sayName();
			
				

看看这样是不是就比较完美了呢？好了收官，该吃午饭了~

吃饭回来，有学了一点，现在补充一下

四、模拟extjs底层继承方式

方法三看起来好像很不错的样子，其实也是有弊端的，就是，结合了两种方法，也就是连续创建了两次父类对象，这样是比较浪费资源的，怎么样才能避免这种情况发生呢？我们可以在原型继承的时候，运用一个空函数作为转接，让子类的原型直接继承父类的原型。还是直接上代码来的清楚

<span style="white-space:pre">		</span>function extend(sub ,sup){
				 // 目的： 实现只继承父类的原型对象
				 var F = new Function();	// 1 创建一个空函数    目的：空函数进行中转
				 F.prototype = sup.prototype; // 2 实现空函数的原型对象和超类的原型对象转换
				 sub.prototype = new F(); 	// 3 原型继承 
				 sub.prototype.constructor = sub ; // 4还原子类的构造器
				 //保存一下父类的原型对象: 一方面方便解耦  另一方面方便获得父类的原型对象
				 sub.superClass = sup.prototype; //自定义一个子类的静态属性 接受父类的原型对象
				 //判断父类的原型对象的构造器 (加保险)
				 if(sup.prototype.constructor == Object.prototype.constructor){
				 	sup.prototype.constructor = sup ; //手动欢迎父类原型对象的构造器
				 }
			}
			
			
			// 混合继承：原型继承和借用构造函数继承
			function Person( name , age){
				this.name = name ; 
				this.age = age ; 
			}
			
			Person.prototype = {
				constructor: Person ,
				sayHello: function(){
					alert('hello world!');
				}
			};
			
			function Boy(name , age , sex){
				//call 绑定父类的模版函数 实现 借用构造函数继承 只复制了父类的模版
				Boy.superClass.constructor.call(this , name , age);
				this.sex = sex ;
			}
			
			//原型继承的方式: 即继承了父类的模版 又继承了父类的原型对象
			//Boy.prototype = new Person();
			// 只继承一遍父类的原型对象
			extend(Boy , Person);
			
			// 给子类加了一个 原型对象的方法
			Boy.prototype.sayHello = function(){
				alert('hi javascript!');
			}
			
			
			
			
			var b = new Boy('张三' , 20 , '男');
			alert(b.name); 
			alert(b.sex);
			b.sayHello();//调用了boy的方法，boy重写了父类的方法
			Boy.superClass.sayHello.call(b);//也可以这样来跨过子类方法来调用父类方法
			
			//alert(Boy.superClass.constructor);
			// 混合继承的缺点： 3件事 : 继承了父类的2次模版 , 继承了一次父类的原型对象
			// extend方法 2件事: 继承1次父类的模版 继承一次父类的原型对象
			

以上来源于尚学堂javascript学习总结。