一、原型prototype方法声明

构造函数有一个prototype属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 </body>

 </html>

 <script>

     function Person(name,age){//构造函数

         this.name=name;//属性

         this.age=age;

     }

     var demo=new Person();

     Person.prototype.showName=function(){//prototype让某一对象具有相同的方法

         alert("我的名字是"+this.name);

     }

     Person.prototype.showAge=function(){

         alert("我的名字是"+this.age);//this指向person

     }

     var demo=new Person("刘德华",18);

     var demo1=new Person("刘德华",18);

     demo.showName();

     alert(demo.showName==demo1.showName);//true

 </script>

二、下拉菜单

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style type="text/css">

 *{ padding:0; margin:0; list-style:none;}

 .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;}

 .all ul li{ width:100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;}

 .all ul ul{ position:absolute; left:0; top:30px; display:none;}

 </style>

 </head>

 <body>

 <div class="all" id="list">

     <ul>

         <li>一级菜单

             <ul>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

             </ul>

         </li>

         <li>一级菜单

             <ul>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

             </ul>

         </li>

         <li>一级菜单

             <ul>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

                 <li>二级菜单</li>

             </ul>

         </li>

     </ul>

 </div>

 </body>

 </html>

 <script>

     //获取对象 遍历对象 显示模块 隐藏模块

     function List(id){//获取对象

         this.id=document.getElementById(id);//取id值

         this.lis=this.id.children[0].children;//获取一级菜单所有li

     }

     //init初始化

     List.prototype.init=function(){//遍历所有的li

         var that=this;//that指向List

         for(var i=0;i<this.lis.length;i++){

             this.lis[i].index=i;

             this.lis[i].onmouseover=function(){//this指向lis

                 that.show(this.children[0]);//显示 children[0]就是一级菜单下的ul

             }

             this.lis[i].onmouseout=function(){

                 that.hide(this.children[0]);//隐藏

             }

         }

     }

     //显示模块

     List.prototype.show=function(obj){

         obj.style.display="block";

     }

     //隐藏模块

     List.prototype.hide=function(obj){

         obj.style.display="none";

     }

     var list=new List("list");//实例化了一个对象 list

     list.init();

 </script>

运行效果：

第68天：原型prototype方法的更多相关文章

  1. js最好的继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。

    js最好的继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } Class ...

  2. js一种继承机制：用对象冒充继承构造函数的属性，用原型prototype继承对象的方法。

    js一种继承机制:用对象冒充继承构造函数的属性,用原型prototype继承对象的方法. function ClassA(sColor) { this.color = sColor; } ClassA ...

  3. 275 原型与原型链：显式原型prototype ，隐式原型__proto__，隐式原型链，原型链_属性问题，给原型对象添加属性/方法

    1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2. ...

  4. 简单理解javascript的原型prototype

    原型和闭包是Js语言的难点,此文主要讲原型. 每一个方法都有一个属性是 prototype 每一个对象都有一个属性是 _proto_ 一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有 ...

  5. 原型 prototype

    原型 prototype js 的对象比较 由于 js 是解释执行的语言, 那么再代码中出现函数与对象如果重复执行, 会创建多个副本 在代码中重复执行的代码容易出现重复的对象 创建一个 Person ...

  6. 类(class)、构造函数(constructor)、原型(prototype)

    类 Class 类的概念应该是面向对象语言的一个特色,但是JavaScript并不像Java,C++等高级语言那样拥有正式的类,而是多数通过构造器以及原型方式来仿造实现.在讨论构造器和原型方法前,我可 ...

  7. 原型prototype -- 深入理解javascript

    /* 原型Prototype */ //一.原型 //原型使用一 var calculator = function (dlg, tax) { this.dlg = dlg; this.tax = t ...

  8. 悟透Javascript之 原型prototype

    构造函数的Prototype上定义的方法确实可以通过对象直接调用,而且代码是共享的.我表示我不懂.太难理解了,艹.在Javascript中,prototype不但能让对象共享自己的财富,而且proto ...

  9. JS原型,Prototype,原型

    对于javascript这样一种前端语言,个人觉得,要真正的理解其oop, 就必须要彻底搞清楚javascript的对象,原型链,作用域,闭包,以及this所引用的对象等概念.这些对弄明白了,应该就可 ...

随机推荐

  1. 006---Linux用户、群组和权限

    用户.组.权限管理 用户管理 增 语法:useradd -c '添加用户1' user1 选项和参数: -c:用户的备注信息 -d:用户的家目录 -g:指定用户所属的用户组(gid) -s:指定用户登 ...

  2. transient是干嘛的

    Java的serialization提供了一种持久化对象实例的机制.当持久化对象时,可能有一个特殊的对象数据成员,我们不想用 serialization机制来保存它.为了在一个特定对象的一个域上关闭s ...

  3. python2.7入门---CGI编程&文件上传&文件下载

        这次我们来看下文件下载和上传的操作.首先是上传,HTML设置上传文件的表单需要设置 enctype 属性为 multipart/form-data,代码如下所示: <!DOCTYPE h ...

  4. 从PRISM开始学WPF（八）导航Navigation-更新至Prism7.1

    原文:从PRISM开始学WPF(八)导航Navigation-更新至Prism7.1 0x6Navigation [7.1updated] Navigation 在wpf中并没有变化 Basic Na ...

  5. 使用putty远程登录Ubuntu时，报Network error:Connection refused错误及解决

    putty远程登录Ubuntu,弹出Network error:Connection refused的错误提示框,就是因为Ubuuntu没有安装ssh服务. 执行命令: sudo apt instal ...

  6. [Jmeter]jmeter之BeanShell Sampler测试应用

    前言: 在做接口测试的时候,有些接口做了签名校验,而签名是根据某算法进行加密,这时候,简单的接口测试工具无法完成该工作,所以想到了Jmeter,他是java编写,有强大的扩展性,足矣完成我们需要的操作 ...

  7. nio之netty5应用

    1.netty5和netty4的区别不是很大,但是与netty3差别还是有的.这里不介绍netty4,因为和netty5的方式都差不多.netty5的复杂性相对于netty3要多很多了.基本上架构都被 ...

  8. Linux命令应用大词典-第38章 网络命令

    38.1 traceroute:显示跟踪到网络主机的路由数据包 38.2 mli-tool:查看.操纵网络接口状态 38.3 ifconfig:显示和配置网络接口 38.4 ifdown:关闭网络接口 ...

  9. 1.1.0 Unity零基础入门2——Roll a Ball

    1. 游戏界面 2.代码 //FoodRotate - - 控制cube旋转 using System.Collections; using System.Collections.Generic; u ...

  10. 【转】一款已上市MMO手游地图同步方案总结

    转自游戏开发主席 1. 客户端地图格子的相关知识 在2.5D的MMO游戏里,角色是通过3D的方式渲染,2D的地图是通过2D的方式显示,所以在客户端一般会有三个坐标系: a) 3D坐标系:所有需要3D渲 ...