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 相关文章推荐
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
递归列出所有文件和目录
2006/10/09 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
pandas实现导出数据的四种方式
2020/12/13 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
批评与自我批评材料
2014/02/15 职场文书
数学教研活动总结
2014/07/02 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
紫日观后感
2015/06/05 职场文书
运动会运动员赞词
2015/07/22 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS