一、原型prototype方法声明
构造函数有一个prototype属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 </body> 9 </html> 10 <script> 11 function Person(name,age){//构造函数 12 this.name=name;//属性 13 this.age=age; 14 } 15 var demo=new Person(); 16 Person.prototype.showName=function(){//prototype让某一对象具有相同的方法 17 alert("我的名字是"+this.name); 18 } 19 Person.prototype.showAge=function(){ 20 alert("我的名字是"+this.age);//this指向person 21 } 22 var demo=new Person("刘德华",18); 23 var demo1=new Person("刘德华",18); 24 demo.showName(); 25 alert(demo.showName==demo1.showName);//true 26 27 28 </script>
二、下拉菜单
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ padding:0; margin:0; list-style:none;} 8 .all{ width:330px; height:30px; background:url(img/bg.jpg) no-repeat; margin:100px auto; line-height:30px; text-align:center; padding-left:10px; margin-bottom:0;} 9 .all ul li{ width:100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;} 10 .all ul ul{ position:absolute; left:0; top:30px; display:none;} 11 </style> 12 </head> 13 14 <body> 15 <div class="all" id="list"> 16 <ul> 17 <li>一级菜单 18 <ul> 19 <li>二级菜单</li> 20 <li>二级菜单</li> 21 <li>二级菜单</li> 22 </ul> 23 </li> 24 <li>一级菜单 25 <ul> 26 <li>二级菜单</li> 27 <li>二级菜单</li> 28 <li>二级菜单</li> 29 </ul> 30 </li> 31 <li>一级菜单 32 <ul> 33 <li>二级菜单</li> 34 <li>二级菜单</li> 35 <li>二级菜单</li> 36 </ul> 37 </li> 38 </ul> 39 </div> 40 </body> 41 </html> 42 <script> 43 //获取对象 遍历对象 显示模块 隐藏模块 44 45 function List(id){//获取对象 46 this.id=document.getElementById(id);//取id值 47 this.lis=this.id.children[0].children;//获取一级菜单所有li 48 } 49 //init初始化 50 List.prototype.init=function(){//遍历所有的li 51 var that=this;//that指向List 52 for(var i=0;i<this.lis.length;i++){ 53 this.lis[i].index=i; 54 this.lis[i].onmouseover=function(){//this指向lis 55 that.show(this.children[0]);//显示 children[0]就是一级菜单下的ul 56 } 57 this.lis[i].onmouseout=function(){ 58 that.hide(this.children[0]);//隐藏 59 } 60 } 61 62 } 63 64 //显示模块 65 List.prototype.show=function(obj){ 66 obj.style.display="block"; 67 } 68 //隐藏模块 69 List.prototype.hide=function(obj){ 70 obj.style.display="none"; 71 } 72 73 var list=new List("list");//实例化了一个对象 list 74 list.init(); 75 76 </script>
运行效果：
