浅析用prototype定义自己的方法


Posted in Javascript onNovember 14, 2013

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.Tlength = function(){
        var arr=this.match(/[^\x00-\xff]/ig);
        return this.length+(arr==null?0:arr.length);
    }

试验:alert("aa啦啦aa".Tlength()) -> 显示 8

这里用到了一些正则表达式的方法和全角字符的编码原理,由于属于另两个比较大的类别,本文不加说明,请参考相关材料。

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("aa啦啦aa".left(4)) -> 显示 aa啦啦
      alert("aa啦啦aa".left(4,true)) -> 显示 aa啦

本方法用到了上面所提到的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 方法中也是可行的!
Javascript 相关文章推荐
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Vue3 中的数据侦测的实现
Oct 09 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
Js nodeType 属性全面解析
Nov 14 #Javascript
open 动态修改img的onclick事件示例代码
Nov 13 #Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 #Javascript
js获取IFRAME当前的URL的方法
Nov 13 #Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 #Javascript
常见表单重复提交问题整理及解决方法
Nov 13 #Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 #Javascript
You might like
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
2016/06/12 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
python中的随机函数小结
2018/01/27 Python
对Python _取log的几种方式小结
2019/07/25 Python
基于python实现对文件进行切分行
2020/04/26 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
参观接待方案
2014/03/17 职场文书
启动仪式策划方案
2014/06/14 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫