js面向对象容易理解 _JavaScript

js面向对象简单理解

利用prototype实现继承：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象</title>
<script type="text/javascript">
	//动物类
	function Animal(){
		this.name;
	}
	
	//呼吸方法
	Animal.prototype.respiratory = function(){
		alert(this.name+'正在呼吸');
	}
	//吃方法
	Animal.prototype.eat = function(){
		alert('动物在吃东西');
	}
	
	//鱼类
	function Fish(){}
	
	//继承动物
	Fish.prototype = new Animal;
	
	//重写动物吃的方法
	Fish.prototype.eat = function(){
		this.constructor.prototype['eat']();//调用父类方法eat
		alert(this.name+'正在吃东西');
	}
	
	
	var fish = new Fish();
	fish.name = 'forever';
	fish.respiratory();
	fish.eat();
	
	
</script>
</head>

<body>
</body>
</html>

?利用base.js实现继承：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象</title>
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
	//创建动物类
	var Animal = Base.extend({
		//构造方法
		constructor : function(){
			this.name;
		},
		//呼吸方法
		respiratory : function(){
			 alert(this.name+'正在呼吸');
		},
		eat : function(){
			alert('动物在吃东西');
		}
	});
	//创建鱼类继承动物类
	var Fish = Animal.extend({
		constructor : function(){
		},
		eat : function(){
			 this.base();//调用父类方法eat();
			 alert(this.name+'正在吃东西');
		}
	});	
	
   var fish = new Fish();   
   fish.name = 'forever';   
   fish.respiratory();   
   fish.eat();   

</script>
</head>

<body>
</body>
</html>

?利用Prototype.js实现继承：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
	//动物类
	var Animal = Class.create({
		//初始化方法					  
		initialize:function(){
			this.name;
		},
		//呼吸方法
		respiratory : function(){
			 alert(this.name+'正在呼吸');   
		},
		eat : function(){
			alert('动物在吃东西');
		}
	});
	
	//鱼类,继承动物类
	var Fish = Class.create(Animal,{
		initialize:function(){
		},
		//重写动物吃的方法
		eat : function($super){
			$super();//调用父类eat方法
			alert(this.name+'正在吃东西');
		}
	});
	
	var fish = new Fish();   
    fish.name = 'forever';   
    fish.respiratory();   
    fish.eat(); 
	

</script>
</head>

<body>
</body>
</html>

?带命名空间的实现类继承：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js面向对象命名空间</title>
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
	var org = {};
	org.forever = {};
	org.forever.util = {};
	//创建动物类
	org.forever.util.Animal = Base.extend({
		//构造方法
		constructor : function(){
			this.name;
		},
		//呼吸方法
		respiratory : function(){
			 alert(this.name+'正在呼吸');
		},
		eat : function(){
			alert('动物在吃东西');
		}
	});
	//创建鱼类继承动物类
	org.forever.util.Fish = org.forever.util.Animal.extend({
		constructor : function(){
		},
		eat : function(){
			 this.base();//调用父类方法eat();
			 alert(this.name+'正在吃东西');
		}
	});	
	
   var fish = new org.forever.util.Fish();   
   fish.name = 'forever';   
   fish.respiratory();   
   fish.eat();   

</script>
</head>

<body>
</body>
</html>

?js接口方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js接口</title>
<script type="text/javascript" src="Base.js"></script>
<script type="text/javascript">
	//用户实体类
	function User(){
		this.userName;
		this.password;
	}
	//用户业务接口
	var IUserBiz = {
		addUser:null,
		delUser:null,
		updateUser:null,
		queryUser:null
	};
	
	//实现接口的方法,可以演变成多接口实现,只是一种模拟
	//这种写法也可以利用在多继承身上
	function implements(interfaceName,proxyMethds){
		var proxy = function(){};
		for(var methodName in interfaceName){
			proxy.prototype[methodName] = interfaceName[methodName];
		}
		for(var methodName in proxyMethds){
			proxy.prototype[methodName] = proxyMethds[methodName];
		}
		return proxy;
	}
	
	//实现了接口方法的类
	var UserBizImpl = implements(IUserBiz,{
			addUser:function(user){alert('用户名字：'+user.userName);}
	});
	
	var userBiz = new UserBizImpl();
	var user = new User();
	user.userName = 'forever';
	user.password = '123456';
	userBiz.addUser(user);
	userBiz.delUser(user);//抛出异常
</script>
</head>

<body>
</body>
</html>