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 live( type, fn ) 委派事件实现
Oct 11 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
vue写h5页面的方法总结
Feb 12 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性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
js的对象与函数详解
2019/01/21 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
python提示No module named images的解决方法
2014/09/29 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
一个入门级python爬虫教程详解
2021/01/27 Python
三好学生自我鉴定
2013/12/17 职场文书
新领导上任欢迎词
2014/01/13 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
关于运动会的口号
2014/06/07 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
会议新闻稿
2015/07/17 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Python基础之Socket通信原理
2021/04/22 Python
python常见的占位符总结及用法
2021/07/02 Python
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python