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 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
自己做矿石收音机
2021/03/02 无线电
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
python编写简单爬虫资料汇总
2016/03/22 Python
Python用threading实现多线程详解
2017/02/03 Python
python web基础之加载静态文件实例
2018/03/20 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python动态进度条的实现代码
2019/07/03 Python
python函数的万能参数传参详解
2019/07/26 Python
django自带调试服务器的使用详解
2019/08/29 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Keras:Unet网络实现多类语义分割方式
2020/06/11 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
迎新生欢迎词2015
2015/07/16 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
七个Python必备的GUI库
2021/04/27 Python
python学习之panda数据分析核心支持库
2021/05/07 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL