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']();//调用父类方法eatalert(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>
?
?