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 获取链接(url)参数的方法
Feb 15 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
IE本地存储userdata的一个bug说明
Jul 01 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
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的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
Python在线运行代码助手
2016/07/15 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
女大学生个人求职信
2013/12/09 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
中国好声音华少广告词
2014/03/17 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
2014年科室工作总结
2014/11/20 职场文书
英文版辞职信
2015/02/28 职场文书
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers