一、原型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. Docker开篇之基础概念篇

    What--什么是容器? 容器技术,是一种操作系统层的虚拟化(Operating system-level virtualization),它将应用软件系统打包成一个软件容器(Container),内 ...

  2. E. Almost Regular Bracket Sequence

    题目链接:http://codeforces.com/contest/1095/problem/E 解题心得: 刚开始拿到这个题的时候还真的没什么思路,后来仔细想想还是比较简单的.首先题目要求翻转一个 ...

  3. ARP级ping命令：arping

    一.工作原理 地址解析协议,即ARP(Address Resolution Protocol),是根据IP地址获取物理地址的一个TCP/IP协议,是网络链路层的协议,在局域网中使用.主机发送信息时将包 ...

  4. PHP.50-TP框架商城应用实例-前台2-商品推荐

    商品推荐 {抢购,新品,精品,热卖}效果如下 1.在商品表增加促销价格与促销起始时间和结束时间三个字段,字段推荐楼层与排序在后面用到  注意:在增加datetime类型字段时,要添加默认值{datet ...

  5. 洛谷P4136 谁能赢呢？

    题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问 ...

  6. 北京Uber优步司机奖励政策（12月28日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. 北京Uber优步司机奖励政策（12月13日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  8. ShimmerTextView

    本文来自网易云社区 作者:孙有军 产品中有一个需求,要求TextView的文字有一个高亮的效果,高亮的同时有跑马灯效果! 本来想在网上找一个现成的用用,比如Facebook出的Shimmer,还有很多 ...

  9. python 定位文件目录

    经常有引用文件的地方,所以整理了一下如何定位文件目录的方法 定位当前文件的目录 import os file_path = os.path.dirname(__file__) 定位当前文件的父目录 i ...

  10. List和Turple

    List 格式:classmates = ['Michael', 'Bob', 'Tracy'] 读取list长度用:len(classmetes) 索引:索引正向从0开始,逆向从-1开始 在末尾增加 ...