`

使用prototype的有用小方法

阅读更多

今天刚刚接触js中对象的prototype属性,google过程中看到这样一篇文章觉得以后也许会用着,转载保存一下,原文地址是http://bokee.shinylife.net/blog/article.asp?id=455&page=2#comm_top

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 方法中也是可行的!

 

分享到:
评论

相关推荐

    非常有用的prototype实例

    这个例子展示了如何使用`prototype`来实现方法的共享,避免了在每个实例中重复定义相同的方法,节省了内存。 接下来,`prototype`还涉及到原型链。当试图访问一个对象的属性时,JavaScript会首先检查该对象自身是否...

    prototype 1.3 源码解读

    - **`Object.prototype.extend`**:该方法使得任何对象都可以直接使用 `extend` 方法来自身扩展其他对象的属性。这是一种链式调用的方式,使得代码更加灵活。 #### 6. Function.prototype.bind 方法 ```javascript...

    开源JS包Prototype使用指南

    ### 开源JS包Prototype使用指南 #### 1.1 Prototype是什么? Prototype是一个由Sam Stephenson编写的JavaScript库,它提供了一套简洁、高效且易于使用的API来简化Web应用开发过程中的许多常见任务。该库专注于简化...

    prototype开发笔记.doc

    Prototype 是一个广泛使用的JavaScript库,由Sam Stephenson创建,旨在简化和增强JavaScript的原生功能,特别是对于构建富客户端Web应用程序。它通过提供强大的对象扩展、DOM操作、以及Ajax交互等工具,使得开发者...

    prototype.js 说明文档.doc

    《prototype.js 说明文档》是关于JavaScript库prototype.js的详细指南,主要涵盖了其核心概念、通用方法以及Ajax对象的使用等内容。Prototype是一个由Sam Stephenson编写的JavaScript库,旨在简化和增强JavaScript...

    Prototype模式

    **原型模式(Prototype Pattern)**是一种创建型设计模式,它提供了一种通过复制已有对象来创建新对象的方式,而不是通过构造函数。在某些情况下,当创建新对象的成本非常高时(例如,对象需要大量的初始化操作或者从...

    JavaScript使用Prototype实现面向对象的方法

    本文将深入探讨如何使用Prototype实现面向对象的方法,并通过实例来解释其工作原理。 1. Prototype 概念: Prototype是JavaScript中的一个重要概念,它是一个内置属性,存在于所有函数(Function对象)中。当创建...

    Prototype&Prototype中文手册

    同时,这个中文手册对于初学者来说尤其有用,因为它可以帮助克服语言障碍,使非英语背景的开发者也能轻松掌握Prototype的用法。 总的来说,Prototype是一个强大的JavaScript库,它简化了DOM操作,增强了AJAX功能,...

    23种设计模式之Prototype模式代码

    在实际编程中,Prototype模式可以与其他设计模式结合使用,例如工厂方法模式,通过工厂方法来返回克隆后的对象,增加代码的可扩展性和灵活性。 总结一下,Prototype模式是一种有效的创建型设计模式,通过对象的克隆...

    prototype框架

    尽管在现代前端框架如React、Vue和Angular盛行的今天,Prototype的使用频率有所下降,但它在JavaScript社区中的地位仍然不可忽视,尤其对于理解面向对象编程和DOM操作有着重要的学习价值。了解Prototype可以帮助...

    prototype ajax提交大数据

    此外,还可以结合使用`Blob`或`ArrayBuffer`对象来处理二进制数据,这在处理如图片、音频等大型文件时尤其有用。在发送前,需要将大数据转换为这些格式,然后通过`send`方法发送。 标签中的“源码”可能意味着你...

    Prototype-v1.6.0使用手册

    Prototype-v1.6.0包含了JSON(JavaScript Object Notation)的支持,可以方便地进行JSON数据的解析和字符串化,这对于与服务器交换数据非常有用。 **7. 兼容性与性能优化** Prototype-v1.6.0考虑了浏览器的兼容性,...

    prototype 1.4 开发者手册(中文PDF)

    此外,还有对`Ajax.Request`、`Ajax.Updater`和`Ajax.PeriodicalUpdater`等类的使用说明,它们在实现页面局部更新和定时刷新时十分有用。 Prototype还包含一系列实用的辅助函数,如数组操作、字符串处理、函数操作...

    Prototype源码解读

    此外,Prototype 源码中还有很多其他有用的功能,如 `Function.prototype.bind`(绑定函数上下文),`Array.prototype.each`(数组迭代),以及 `Element` 和 `Event` 的扩展等,这些都是为了增强 JavaScript 的基本...

    prototype-1.4.0源码解读.js

    Prototype 是一个著名的JavaScript库,它的1.4.0版本在Web开发领域有着广泛的使用。这个库为JavaScript程序员提供了许多实用的功能,包括对象扩展、类创建、DOM操作等,极大地提升了开发效率。接下来,我们将深入...

    C++设计模式代码资源10_prototype.zip

    2. **使用虚构造函数**:虽然C++不直接支持虚构造函数,但可以使用工厂方法或者`clone()`函数模拟这一行为。 3. **模板方法**:如果多个类具有相同的克隆逻辑,可以使用模板类来实现,这样可以减少代码重复。 ...

    instanceof 和 prototype 关系

    当我们通过`new`关键字创建一个对象时,这个对象会自动获取构造函数`prototype`上的属性和方法。例如: ```javascript Person.prototype.name = "John"; person.name; // 输出 "John" ``` `name`属性被添加到`...

    prototype.js jquery.js 打包下载(包含各自的API)

    1. **对象扩展**:Prototype通过扩展JavaScript的内置类型,如Array、String、Function等,添加了许多实用方法,例如`Array.prototype.each`用于迭代数组,`String.prototype.trim`用于去除字符串两端的空白。...

    Prototype_upload_edit0815_nojar.rar

    尽管Prototype在JavaScript社区中曾广受欢迎,但随着ES6的发布和jQuery等其他库的崛起,Prototype的使用逐渐减少。然而,理解其设计理念和用法对于深入理解JavaScript的原型机制和面向对象编程仍然具有一定的价值。...

    Prototype详解

    在这里,`Ajax.Request`函数接受目标URL、请求方法、参数以及回调函数作为参数。当请求成功时,`onSuccess`回调函数将被调用,可以在此处理服务器返回的数据;而`onFailure`则在请求失败时执行。 通过以上解析,...

Global site tag (gtag.js) - Google Analytics