js面向对象容易理解-JavaSript-爱易网页

js面向对象容易理解

日期：2014-05-16　浏览次数：20484 次

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+'正在吃东西');
		}
	});	
	
   va

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js面向对象容易理解

相关资料更多>

推荐阅读更多>