一、原型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. 封装一个CSVHelper

    public class CSVHelper { /// <summary> /// CSV转换成DataTable(OleDb数据库访问方式) /// </summary> ...

  2. 使用Python访问HDFS

    最近接触到大数据,对于Skpark和Hadoop的料及都停留在第一次听到这个名词时去搜一把看看大概介绍免得跟不上时代的层次. 在实际读了点别人的代码,又自己写了一些之后,虽然谈不上理解加深,至少对于大 ...

  3. Qt-事件处理-鼠标事件

    根据书中的内容,简单的实现鼠标相关的内容 源代码如下 .h #ifndef MOUSEEVENT_H #define MOUSEEVENT_H #include <QMainWindow> ...

  4. Selenium（Python）PageObject页面对象

    使用PageObject页面对象的好处是, 当页面元素的位置发生改变时, 只需要去修改Xpath或者ID, 而不用去修改测试用例本身: 本次的思路是: 1.常用方法类 2.页面对象类 3.测试用例类 ...

  5. Selenium（Python）生成Html测试报告

    由于Python3已经不支持HTMLTestRunner了, 无论是PyCharm还是pip都无法安装成功, 所以只能去 http://tungwaiyip.info/software/HTMLTes ...

  6. grep命令及正则

    文本查找 grep,egrep,fgrep grep :Global Research 根据模式搜索文本,并将符合模式的文本行显示出来 模式:Pattern,文本字符和正则的元字符组合而成匹配条件 g ...

  7. python一标准异常总结大全（非常全）

    Python标准异常总结 AssertionError 断言语句(assert)失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF(Ctrl+d) ...

  8. Qt Creator 下启动vim模式后，运行快捷键Ctrl+R失效解决方案

    首先开启vim后,Ctrl+R无法用 解决: 工具 -> 选项->FakeVim 转到Ex Command Mapping 搜索Run 底栏Regular expression 输入run ...

  9. CF245H Queries for Number of Palindromes

    题目描述 给你一个字符串s由小写字母组成,有q组询问,每组询问给你两个数,l和r,问在字符串区间l到r的字串中,包含多少回文串. 时空限制 5000ms,256MB 输入格式 第1行,给出s,s的长度 ...

  10. Linux文件系统简介和软链接和硬链接的区别

    Linux有着极其丰富的文件系统,大体可分为如下几类: 网络文件系统:如nfs.cifs等: 磁盘文件系统:如ext3.ext4等: 特殊文件系统:如prco.sysfs.ramfs.tmpfs等: ...