一、原型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. mac下使用git的冲突的解决方案

    博主之前一直是在windows系统下进行软件代码的开发,window下有很多git的使用工具,如tortoisegit等是个很好的git项目管理工具.而再mac版下的git项目代码管理工具,本人找了好 ...

  2. 156. Merge Intervals【LintCode by java】

    Description Given a collection of intervals, merge all overlapping intervals. Example Given interval ...

  3. MySql慢查询日志——开启/查看/删除

    1,开启慢查询日志 修改mysql.ini文件,加入如下配置: [mysqld] log-slow-queries=H:\mysql_log\slow_query.log long-query-tim ...

  4. 使用PowerDesign15反向生成数据库

           在Pd15中建立物理模型后,可以通过反向工程直接生成数据库的表结构.主要有以下几个步骤: 1. 首先设置一下数据库配置,选择对应要使用的数据库(此处选择Sql Server 2008 R ...

  5. JVM监控远程服务器

    1. 首先配置服务器端,进入服务器tomcat的bin目录下,打开catalina.sh配置文件,xxx为服务器配置路径. # cd /xxx/apache-tomcat-/bin # vim cat ...

  6. Java开发工程师(Web方向) - 03.数据库开发 - 期末考试

    期末考试 编程题 本编程题包含4个小题,覆盖知识点从基础的JDBC.连接池到MyBatis. 1(10分) 有一款在线教育产品“天天向上”主要实现了在手机上查看课程表的功能.该产品的后端系统有一张保存 ...

  7. 牛客网暑期ACM多校训练营（第五场）：F - take

    链接:牛客网暑期ACM多校训练营(第五场):F - take 题意: Kanade有n个盒子,第i个盒子有p [i]概率有一个d [i]大小的钻石. 起初,Kanade有一颗0号钻石.她将从第1到第n ...

  8. 大理石在哪儿 （Where is the Marble?,UVa 10474)

    题目描述:算法竞赛入门经典例题5-1 #include <iostream> #include <algorithm> using namespace std; ; int m ...

  9. Centos7添加静态路由

    本文摘取自 Centos7系统配置上的变化(二)网络管理基础 一.ip route显示和设定路由 1.显示路由表 [root@centos7 ~]# ip route show default via ...

  10. Tensorflow中使用tfrecord方式读取数据-深度学习-周振洋

    本博客默认读者对神经网络与Tensorflow有一定了解,对其中的一些术语不再做具体解释.并且本博客主要以图片数据为例进行介绍,如有错误,敬请斧正. 使用Tensorflow训练神经网络时,我们可以用 ...