日期:2014-05-16  浏览次数:20372 次

javascript中类的定义及其继承

javascript其实也是一种面向对象编程语言,他同样可以实现面向对象语言的三大特性------封装,继承,多态。封装我想大家都知道了,在这里我们重点讲一下javascript的继承。

?

1、怎么用javascript编写一个类

? ? ?(1)目前,很多面向对象语言都定义了class来定义一个类,但是javascript并没有,那么我们应该怎么去用它来编写一个类呢?

其实我们简单的是使用function就可以啦。下面给一个例子,我想大家看后就会明白的啦。在实例中学习嘛,哈哈。

?

function Person(){		//定义一个Person类
		this.name;
		this.age;
		this.showInfo = function(){	//封装一个方法,让Person类输出自己的相关信息
			document.write("大家好,我是 " + this.name + " ,今年 " + this.age + " 岁啦!");	
		}
	}
	
	var person = new Person();	//创建Person类的实例
	person.name = "tom"; //为Person类的属性赋值
	person.age = 11;
	person.showInfo(); //调用Person类的方法

?在浏览器中的结果显示为:

?

大家好,我是 tom ,今年 11 岁啦!

但是如果我们想要给函数定义一个构造函数怎么办,看这个例子你就懂了:

?

	function Person(myName, myAge){		//定义一个Person类
		this.name = myName;
		this.age = myAge;
		this.showInfo = function(){	//封装一个方法,让Person类输出自己的相关信息
			document.write("大家好,我是 " + this.name + " ,今年 " + this.age + " 岁啦!");	
		}
	}
	
	var person = new Person("tom", 11);	//创建Person类的实例
	person.showInfo(); //调用Person类的方法

?

?结果显示跟上面一样。

?

2、怎么实现继承特性

那么我们用javascript编写好一个类后,我们怎么去实现继承呢?这个就涉及到我们前面所学的prototype啦。

	//定义一个父类Person
	function Person(){
		this.name ;
		this.age ;
		this.showInfo = function(){	//封装一个方法,让Person类输出自己的相关信息
			document.write("大家好,我是 " + this.name + " ,今年 " + this.age + " 岁啦!");	
		}
	}
	
	//定义一个子类Child
	function Child(){}
	
	Child.prototype = new Person(); //继承Person

	var child = new Child();
	child.name = "Cat";
	child.age = 11;
	child.showInfo();
?

?

在浏览器中显示的结果为:

?

大家好,我是 Cat ,今年 11 岁啦!

?

?

在该实例中,重点在于prototype,我们继承就是通过这个来实现的啦,这个将涉及到原型,深入就到后面再讲,在这篇文章中,主要是为了让我们知道,继承是通过这个方式来实现的,当然还有另外一中形式。下面就来说一下吧。

?

3、使用$super实现访问父类

?

很多面向对象编程语言中,都会定义关键字super来访问父类,但是javascript里面没有,所以我们必须要先自己定义来实现这个功能,鉴于javascript所有的类都是有Object派生而来的,我们就为Object新定义一个$super方法,该方法可以用于其他所有的类。

?

?

//自定义$super()方法,用于访问父类
	Object.prototype.$super = function(){
		var result;
		try{
			result = eval(this.constructor).prototype.constructor;
			result.apply(this, arguments);	
		}catch(err){
			throw new Error("only can be used in constructor");
		}
		return result;
	}

?

?

然后我们就可以使用这个方法啦:

?

function Child(){
		this.$super(myName, myAge);  //调用父类的构造函数
	}

?

?下面给出一个完整示例,让大家对它的用法更加清晰吧。

例1(仍然使用prototype来实现继承):

?

	//自定义$super()方法,用于访问父类
	Object.prototype.$super = function(){
		var result;
		try{
			result = eval(this.constructor).prototype.constructor;
			result.apply(this, arguments);	
		}catch(err){
			throw new Error("only can be used in constructor");
		}
		return result;
	}
	
	//定义一个父类Person
	function Person(myName, myAge){
		this.name = myName;
		this.age = myAge;
		this.showInfo = function(){	//封装一个方法,让Person类输出自己的相关信息
			document.write("大家好,我是 " + this.name + " ,今年 " + this.age + " 岁啦!");	
		}
	}
	
	//定义一个子类Child
	function Child(myName, myAge){
		this.$super(myName, myAge);//调用父类的构造函数
	}
	
	Child.prototype = new Person(); //继承Person

	var child = new Child("Tom", 11);
	child.showInfo();

?

示例2(仍然使用$super来实现继承):

?

	Object.prototype.$super = function(){
		var result;
		try{
			result = eval(this.constructor).prototype.constructor;
			result.apply(this, arguments);	
		}catch(err){
			throw new Error("only can be used in constructor");
		}
		return re