浅析用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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
layui.js实现的表单验证功能示例
Nov 15 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
Element-UI+Vue模式使用总结
Jan 02 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实现mysql同步的实现方法
2009/10/21 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
document.compatMode介绍
2009/05/21 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
移动节点的jquery代码
2014/01/13 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
基于Python __dict__与dir()的区别详解
2017/10/30 Python
详解Python 解压缩文件
2019/04/09 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
什么是Remote Module
2016/06/10 面试题
高中历史教学反思
2014/02/08 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
异地恋情人节寄语
2015/02/28 职场文书
2015年行政部工作总结
2015/04/28 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
python 详解turtle画爱心代码
2022/02/15 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
vue判断按钮是否可以点击
2022/04/09 Vue.js
js 实现验证码输入框示例详解
2022/09/23 Javascript