浅析用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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
javascript实现类似超链接的效果
Dec 26 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
js实现自定义进度条效果
Mar 15 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
Sep 22 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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的explode和implode的使用说明
2011/07/17 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
domReady的实现案例
2016/11/23 Javascript
浅谈Node.js:Buffer模块
2016/12/05 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Python中自定义函数的教程
2015/04/27 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Python eval函数介绍及用法
2020/11/09 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
数据库专业英语
2012/11/30 面试题
致裁判员加油稿
2014/02/08 职场文书
我爱读书演讲稿
2014/05/07 职场文书
本溪水洞导游词
2015/02/11 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers