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.ui.draggable中文文档
Nov 24 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
zend framework配置操作数据库实例分析
2012/12/06 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
angular双向绑定模拟探索
2016/12/26 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Django如何使用redis作为缓存
2020/05/21 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
单位创先争优活动方案
2014/01/26 职场文书
超市重阳节活动方案
2014/02/10 职场文书
办公室岗位职责
2014/02/12 职场文书
中学教师教育感言
2014/02/21 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
啦啦队口号大全
2014/06/16 职场文书
老公婚前保证书
2015/02/28 职场文书
跳高加油稿
2015/07/21 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书