JavaScript prototype属性使用说明


Posted in Javascript onMay 13, 2010

这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解:

首先,我们要先了解一下类的概念,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.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 方法中也是可行的!

Javascript 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
Javascript call及apply应用场景及实例
Aug 26 Javascript
js 实现复制到粘贴板的功能代码
May 13 #Javascript
js href的用法
May 13 #Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 #Javascript
Js 随机数产生6位数字
May 13 #Javascript
js实现兼容IE6与IE7的DIV高度
May 13 #Javascript
JS 文件传参及处理技巧分析
May 13 #Javascript
Javascript 面向对象 继承
May 13 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
javascript常用函数(2)
2015/11/05 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
python在协程中增加任务实例操作
2021/02/28 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
校庆标语集锦
2014/06/25 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2015年机关纠风工作总结
2015/05/15 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
Golang 入门 之url 包
2022/05/04 Golang