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 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 = Person;	//继承Person
		this.$super(myName, myAge);
	}
	
	var child = new Child("Tom", 11);
	child.showInfo();
	

 两个示例输出的结果均为：

 

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