`
nature0661
  • 浏览: 12394 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

js中的prototype

阅读更多
prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解:

  首先,我们要先了解一下类的概念,JavaScript 本身是一种面向对象的语言,它所涉及的元素根据其属性的不同都依附于某一个特定的类。我们所常见的类包括:数组变量(Array)、逻辑变量(Boolean)、日期变量(Date)、结构变量(Function)、数值变量(Number)、对象变量(Object)、字符串变量(String) 等,而相关的类的方法,也是程序员经常用到的(在这里要区分一下类的注意和属性发方法),例如数组的push方法、日期的get系列方法、字符串的split方法等等,

  但是在实际的编程过程中不知道有没有感觉到现有方法的不足?prototype 方法应运而生!下面,将通过实例由浅入深讲解 prototype 的具体使用方法:


1、最简单的例子,了解 prototype:
(1) Number.add(num):作用,数字相加
实现方法:Number.prototype.add = function(num){return(this+num);}
试验:alert((3).add(15)) -> 显示 18


(2) Boolean.rev(): 作用,布尔变量取反
实现方法:Boolean.prototype.rev = function(){return(!this);}
试验:alert((true).rev()) -> 显示 false

是不是很简单?这一节仅仅是告诉读者又这么一种方法,这种方法是这样运用的。


2、已有方法的实现和增强,初识 prototype:
(1) Array.push(new_element)
  作用:在数组末尾加入一个新的元素
  实现方法:
  Array.prototype.push = function(new_element){
         this[this.length]=new_element;
         return this.length;
     }
  让我们进一步来增强他,让他可以一次增加多个元素!
  实现方法:
  Array.prototype.pushPro = function() {
         var currentLength = this.length;
         for (var i = 0; i < arguments.length; i++) {
             this[currentLength + i] = arguments[i];
         }
         return this.length;
     }
  应该不难看懂吧?以此类推,你可以考虑一下如何通过增强 Array.pop 来实现删除任意位置,任意多个元素(具体代码就不再细说了)

(2) String.length
  作用:这实际上是 String 类的一个属性,但是由于 JavaScript 将全角、半角均视为是一个字符,在一些实际运用中可能会造成一定的问题,现在我们通过 prototype 来弥补这部不足。
  实现方法:
  String.prototype.cnLength = function(){
         var arr=this.match(/[^\x00-\xff]/ig);
         return this.length+(arr==null?0:arr.length);
     }
  试验:alert("EaseWe空间Spaces".cnLength()) -> 显示 16
  这里用到了一些正则表达式的方法和全角字符的编码原理,由于属于另两个比较大的类别,本文不加说明,请参考相关材料。


3、新功能的实现,深入 prototype:在实际编程中所用到的肯定不只是已有方法的增强,更多的实行的功能的要求,下面我就举两个用 prototype 解决实际问题的例子:
(1) String.left()
  问题:用过 vb 的应该都知道left函数,从字符串左边取 n 个字符,但是不足是将全角、半角均视为是一个字符,造成在中英文混排的版面中不能截取等长的字符串
  作用:从字符串左边截取 n 个字符,并支持全角半角字符的区分
  实现方法:
  String.prototype.left = function(num,mode){
         if(!/\d+/.test(num))return(this);
         var str = this.substr(0,num);
         if(!mode) return str;
         var n = str.Tlength() - str.length;
         num = num - parseInt(n/2);
         return this.substr(0,num);
     }
  试验:
     alert("EaseWe空间Spaces".left(8)) -> 显示 EaseWe空间
     alert("EaseWe空间Spaces".left(8,true)) -> 显示 EaseWe空
  本方法用到了上面所提到的String.Tlength()方法,自定义方法之间也能组合出一些不错的新方法呀!

(2) Date.DayDiff()
  作用:计算出两个日期型变量的间隔时间(年、月、日、周)
  实现方法:
  Date.prototype.DayDiff = function(cDate,mode){
         try{
             cDate.getYear();
         }catch(e){
             return(0);
         }
         var base =60*60*24*1000;
         var result = Math.abs(this - cDate);
         switch(mode){
             case "y":
                 result/=base*365;
                 break;
             case "m":
                 result/=base*365/12;
                 break;
             case "w":
                 result/=base*7;
                 break;
             default:
                 result/=base;
                 break;
         }
         return(Math.floor(result));
     }
  试验:alert((new Date()).DayDiff((new Date(2002,0,1)))) -> 显示 329
     alert((new Date()).DayDiff((new Date(2002,0,1)),"m")) -> 显示 10
  当然,也可以进一步扩充,得出响应的小时、分钟,甚至是秒。

(3) Number.fact()
  作用:某一数字的阶乘
  实现方法:
  Number.prototype.fact=function(){
         var num = Math.floor(this);
         if(num<0)return NaN;
         if(num==0 || num==1)
             return 1;
         else
             return (num*(num-1).fact());
     }
  试验:alert((4).fact()) -> 显示 24
  这个方法主要是说明了递归的方法在 prototype 方法中也是可行的!
分享到:
评论

相关推荐

    关于JS中prototype的理解.docx

    JS 中 prototype 的理解 prototype 是 JavaScript 中的一个重要概念,它是每个构造函数都有的一个属性,即原型。通过 prototype,可以实现继承和扩展对象的功能。prototype 的主要思想是,现在有 1 个类 A,我想要...

    js中prototype用法.docx

    js中prototype用法.docx

    js中prototype用法.pdf

    js中prototype用法.pdf

    JavaScript中prototype的解释.pdf

    JavaScript中prototype的解释.pdf

    JavaScript中prototype的解释.docx

    JavaScript中prototype的解释.docx

    js中prototype1

    在JavaScript中,`prototype`是一个非常重要的概念,它涉及到对象的继承和方法共享。每个函数(在JavaScript中,函数也是一种对象)都有一个`prototype`属性,这个属性指向一个对象,这个对象的用途是为通过该函数...

    JavaScript中prototype的使用

    JavaScript中的`prototype`属性是实现面向对象编程的关键概念之一,尤其在JavaScript中,它用于实现对象的继承。本文将深入探讨`prototype`的含义、作用以及如何使用。 1. **什么是prototype** 在JavaScript中,每...

    javascript类库prototype.js

    Prototype.js 是一个强大的JavaScript类库,它为开发者提供了丰富的功能,使得创建具有高度互动性和Web2.0特性的富客户端页面变得更为简单。这个库的设计理念是扩展JavaScript的基础对象,提供一套统一且易于使用的...

    js中prototype用法详细介绍.docx

    ### JavaScript中的Prototype用法详解 #### 一、引言 在JavaScript中,`prototype`是一个非常重要的概念,尤其是在面向对象编程(OOP)方面。通过理解并掌握`prototype`的使用,开发者可以更加灵活地扩展对象的功能,...

    JS中的prototype

    JavaScript中的`prototype`是语言核心概念之一,它在对象创建、继承和方法共享中起着关键作用。在JavaScript中,每个对象都有一个`prototype`属性,这个属性引用了一个对象,通常用于实现对象间的继承。理解`...

    关于JS中prototype的理解

    JavaScript中的`prototype`属性是理解面向对象编程的关键概念之一。每个构造函数(即函数)都有一个内置的`prototype`属性,这个属性允许我们为对象创建共享的属性和方法,从而实现代码复用和继承。在JavaScript中,...

    prototype_1.7.3.js 最新版本

    《prototype_1.7.3.js:JavaScript框架的里程碑》 在JavaScript的世界里,Prototype库是一个不可或缺的重要组成部分,尤其在Web开发领域,它为开发者提供了强大的功能和便利性。Prototype_1.7.3.js是这个库的一个...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    Prototype是JavaScript库,它为浏览器...而源代码文件`prototype-1.6.0.3.js`则让你可以直接在项目中应用或研究Prototype的实现。对于前端开发者而言,掌握Prototype能提升开发效率,同时增强网页的交互性和动态性。

    JS:prototype用法

    以上示例展示了`prototype`的多样性和实用性,无论是基本功能的添加,已有方法的增强,还是新功能的创造,`prototype`都是JavaScript开发中不可或缺的工具。然而,使用`prototype`也需谨慎,过度使用可能导致代码...

    prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

    Prototype JavaScript 框架是Web开发中的一个关键工具,它为JavaScript编程提供了许多实用的类库函数和设计模式。这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握...

    prototype.js中文手册

    它在Web开发中扮演着重要的角色,尤其在AJAX(异步JavaScript和XML)应用中,Prototype.js 提供了丰富的功能和工具,使得开发者能更高效地编写JavaScript代码。 ### 一、Prototype.js核心特性 1. **DOM操作**:...

    prototype.js javaScript插件

    在实际开发中,Prototype.js可以显著提高开发效率,减少代码量,并且由于其良好的兼容性和丰富的功能,成为了许多开发者喜爱的JavaScript插件。下载并使用"prototype.js"文件,即可开始体验这些强大的功能。不过要...

    JS中prototype的用法实例分析

    本文实例讲述了JS中prototype的用法。分享给大家供大家参考。具体分析如下: JS中的phototype是JS中比较难理解的一个部分   本文基于下面几个知识点:   1 原型法设计模式 在.Net中可以使用clone()来实现原型法 ...

    javascript中类和继承(代码示例+prototype.js)

    本文将深入探讨JavaScript中的类和继承,并结合`prototype.js`文件中的示例进行解析。 ### 类的概念与模拟 在JavaScript中,我们通常使用函数来模拟类的行为。一个函数可以看作是一个类的定义,通过`new`关键字来...

    JavaScript_Prototype(源代码+中文手册).rar

    JavaScript Prototype 是一种重要的编程概念,尤其在Web开发中不可或缺。这个压缩包文件“JavaScript_Prototype(源代码+中文手册).rar”包含了关于JavaScript原型的源代码和中文手册,为学习和理解这一主题提供了...

Global site tag (gtag.js) - Google Analytics