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 相关文章推荐
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
js获取Get值的方法
Sep 29 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
JS Canvas接口和动画效果大全
Apr 29 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/08/30 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
对比分析json及XML
2014/11/28 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
pybind11和numpy进行交互的方法
2019/07/04 Python
Python实现图片添加文字
2019/11/26 Python
在flask中使用python-dotenv+flask-cli自定义命令(推荐)
2020/01/05 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
python 递归相关知识总结
2021/03/03 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
自我鉴定总结
2014/03/24 职场文书
运动会拉拉队口号
2014/06/09 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python