第68天：原型prototype方法
一、原型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>
运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录