浅析用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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
关于Vue在ie10下空白页的debug小结
May 02 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 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 Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
使用Python读取大文件的方法
2018/02/11 Python
python实现电脑自动关机
2018/06/20 Python
Python版名片管理系统
2018/11/30 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python3获取当前目录的实现方法
2019/07/29 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
毕业生文员求职信
2013/11/03 职场文书
个人职业及收入证明
2014/10/13 职场文书
居委会工作总结2015
2015/05/18 职场文书
故意杀人案辩护词
2015/05/21 职场文书
禁毒心得体会范文
2016/01/15 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书