一、原型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. go基础语法-常量与枚举

    1.常量定义 用const关键字修饰常量名并赋值,常量命名不同于java等语言,golang中一般用小写,因为在golang中首字母大写表示public权限 const a = 3 2.常量使用 使用 ...

  2. Highchart 饼图联动

    感觉好久没有更新博客了,最近一直忙着毕业论文,紧接着就开始搭建数据库,实在抽不出时间写. 正好趁着做数据库,写一写关于Highchart里两个饼图之间的互动. 用到的数据比较大,我也懒得修饰了,涉及到 ...

  3. 关于 ssh 连接较慢的解决办法

    1. 概述 使用 ssh 软件连接 linux 时, 会碰到很慢的情况 2. 场景 概述 ssh 连接很慢 大概步骤 使用 xshell6 免费版, 连接 主机 一个小等待, 弹出 用户名 输入框 输 ...

  4. Java 高级应用编程 第二章 集合

    一.Java 中的集合类 1.集合概述 Java中集合类是用来存放对象的 集合相当于一个容器,里面包容着一组对象 —— 容器类 其中的每个对象作为集合的一个元素出现 Java API提供的集合类位于j ...

  5. Redis的n种妙用，不仅仅是缓存

    redis是键值对的数据库,常用的五种数据类型为字符串类型(string),散列类型(hash),列表类型(list),集合类型(set),有序集合类型(zset) Redis用作缓存,主要两个用途: ...

  6. 20145234黄斐《Java程序设计》第七周学习总结

    教材学习内容总结 Lambda语法 Lambda去可以重复,符合DRY原则,而且Lambda表达式可读性更好,操作更简单 匿名类型最大的问题就在于其冗余的语法,lambda表达式是匿名方法,它提供了轻 ...

  7. 天津市人民优步Uber司机奖励政策(8.31-9.6)

    "*结算周期为周一凌晨4点至下周一凌晨4点 滴滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单 ...

  8. vue.js中引入其他文件export的方法：

    import {GetPosition} from '../../lib/utils'  //找到 该方法的文件路径,然后 用{}拿到 该方法 var position =GetPosition(); ...

  9. 两分钟了解Docker的优势

    本文来自网易云社区 我们主要从Docker对业务架构和生产实践的角度来分析. 随着业务规模的逐渐扩大,产品复杂度也随着增加,企业需要解决快速迭代.高可靠和高可用等问题,一个自然的选择是服务化的拆分,把 ...

  10. android学习十二 配置变化

    1.配置变化会终止当前活动,并重建活动 2.配置变化有    2.1  屏幕方向变化    2.2  语言变化    2.3   插到基座等   3. 配置变化应用程序不会清除,上下文对新活动依然有效 ...