开发学院网页设计 JavaScript Prototype实战教程－－－－8.顶层对象阅读

Prototype实战教程－－－－8.顶层对象

　2010-09-14 13:10:22　来源：WEB开发网　　　

核心提示：<html><head><title>顶层元素</title><script src="prototype.js"></script><script>var Person=Class.create();Person.

<html> <head> <title>顶层元素</title> <script src="prototype.js"></script> <script> var Person=Class.create(); Person.prototype={ 　　initialize:function(){}, 　　name:'', 　　birthday:'', 　　age:'', 　　Show:function(){alert("This is "+this.name);} 　　}; 　　function TestPerson() 　　{ 　　　　var p=new Person(); 　　　　p.name="Tom"; 　　　　p.age=4; 　　　　p.birthday="1997-7-1"; 　　　　p.Show(); 　　　　}; 　　　　var User=Class.create(); 　　　　　　　　User.prototype={ 　　　　　　initialize:function(){}, 　　　　　　userid:'', 　　　　　　Report:function() 　　　　　　{ 　　　　　　　　alert("UserID:"+this.userid+"　 Name:"+this.name+"　 Age:"+this.age+"　Birthday:"+this.birthday); 　　　　　　　　} 　　　　　　}; 　　　　　　Object.extend(User.prototype,Person.prototype); 　　　　　　function TestUser() 　　{ 　　　　var user=new User(); 　　　　user.name="Chou Fat"; 　　　　user.age=4; 　　　　user.userid=2396 　　　　user.birthday="1997-7-1"; 　　　　　　user.Show(); 　　　　user.Report(); 　　　　　　} 　　　　function ShowPrototypeInfo() 　　　　{alert(Prototype.Version+"　 "+Prototype.ScriptFragment); 　　　　　　} 　　　　　　function TestInspect() 　　　　{var s="wanfangsoftcenter"; 　　　　　　alert(Object.inspect(s)); 　　　　　　} 　　　　　　//------------------------------------------------------- 　　　　　　function testFunctionBind() 　　　　　　{ 　　　　　　　　var person=new Person(); 　　　　　　　　person.name="Jerry"; 　　　　　　　　person.age=4; 　　　　　　person.birthday="1997-7-1"; 　　　　　　　　 var user=new User(); 　　　　　　　　user.name="Tom"; 　　　　　　　　user.age=5; 　　　　　　user.userid=2396 　　　　　　user.birthday="1999-12-20"; 　　　　　　　　var handler=user.Report.bind(person); 　　　　　　　　handler(); 　　　　　　　　} 　　　　　　　　var Listener=new Class.create(); 　　　　　　　　Listener.prototype={ 　　　　　　　　　　initialize:function(btn,message) 　　　　　　　　　　{ 　　　　　　　　　　　　　　　　　　$(btn).onclick=this.showMessage.bindAsEventListener(message); 　　　　　　　　　　　　}, 　　　　　　　　　　　　showMessage:function(message){ 　　　　　　　　　　　　　　alert(message); 　　　　　　　　　　　　　　} 　　　　　　　　　　}; 　　　　　　　　　　　　　　　　var listener=new Listener("testEventListener","点击！"); 　　　　　　　　　　</script><body> 　　<input type=button value="ShowPrototypeInfo" onclick='return ShowPrototypeInfo();' />显示Prototype的基本信息<br><hr> <input type=button value="TestPerson" onclick='return TestPerson();' />利用我们创建的Person类生成一个p对象检测一下是否成功<br> <input type=button value="TestUser" onclick='return TestUser();' />User类继承Person类，生成一个User对象检测一下是否成功<br> <input type=button value="TestInspect" onclick='return TestInspect();' />测试一下Object的Inspect方法<br> <input type=button value="testFunctionBind" onclick='return testFunctionBind();' />测试一下Object的FunctionBind方法<br> <input type=button value="testEventListener" id="testEventListener" />testEventListener<br> <script> 　　　　var Listener=new Class.create(); 　　　　　　　　Listener.prototype={ 　　　　　　　　　　initialize:function(btn,message) 　　　　　　　　　　{ 　　　　　　　　　this.message=message; 　　　　　　　　　　　　$(btn).onclick=this.showMessage.bindAsEventListener(this); 　　　　　　　　　　　　}, 　　　　　　　　　　　　showMessage:function(){ 　　　　　　　　　　　　　　alert(this.message); 　　　　　　　　　　　　　　} 　　　　　　　　　　}; 　　　　　　　　　　　　　　　　var listener=new Listener("testEventListener","点击！");