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 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
javascript时间函数大全
Jun 30 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
ES5和ES6中类的区别总结
Dec 21 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
json的使用小结
2016/06/08 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
js实现密码强度检验
2017/01/15 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
详解JavaScript的BUG和错误
2018/05/07 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
python Django批量导入数据
2016/03/25 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
工业设计专业推荐信
2013/10/29 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
三问三解心得体会
2014/09/05 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
捐书仪式主持词
2015/07/04 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
swagger如何返回map字段注释
2021/07/03 Java/Android
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python