prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:
它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解:
首先,我们要先了解一下类的概念,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.getFullYear();
}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 方法中也是可行的!
来自: http://hi.baidu.com/3seefans/blog/item/1761b3f56ed3d02fbc3109e4.html
分享到:
相关推荐
《prototype介绍和使用方法》 在JavaScript开发中,Prototype是一个重要的库,由Sam Stephenson创建,主要用于提升Web应用程序的交互性和用户体验,特别是在实现Web 2.0特性时。Prototype库的核心理念是通过提供一...
### Prototype的Ajax介绍 #### 一、Prototype框架与Ajax **Prototype** 是一款JavaScript库,其设计目的是为了简化客户端脚本编程。它提供了一系列高级功能,使得开发人员能够更加高效地构建动态网页应用。其中,*...
"Prototype_1.4.doc"可能是一个关于Prototype 1.4版本的文档,以.doc格式存储,可能包含了详细的API说明、示例代码和使用指南。而"Prototype_1.5.1.chm"是一个帮助文件(Compiled Help Manual),通常用于存放软件的...
在1.4中文手册中,你可以找到关于`Element`、`Selector`、`Ajax`等核心类的说明,以及如何利用Prototype进行Ajax通信的方法。1.5中文手册则可能包含了一些新特性,比如可能增加了对CSS选择器的支持或者改进了性能。...
1. **Prototype 库介绍** Prototype 是一个轻量级的JavaScript框架,它增强了JavaScript的基础功能,简化了DOM操作,并提供了丰富的Ajax工具。其核心理念是通过扩展JavaScript的基本类型和对象,提供更加面向对象的...
### prototype介绍:深入理解JavaScript的面向对象编程与Prototype.js库 #### 1. JavaScript中的`prototype`机制 在JavaScript的世界里,`prototype`扮演着一个至关重要的角色,尤其是在面向对象编程(OOP)的语境下...
手册详细介绍了Prototype框架的1.6版本,这是一个非常重要的版本,因为它包含了对之前版本的改进和新功能的添加。手册分为多个部分,包括基础概念、对象操作、DOM操作、事件处理、Ajax交互、特效与动画等核心主题。...
在这个案例中,"prototype.chm"很可能是Prototype.js的官方中文帮助文档,里面详细介绍了每个函数、类和方法的使用方法、参数和返回值,是学习和使用Prototype.js的重要参考资料。用户可以通过搜索、索引或目录浏览...
文档可能会详细介绍如何调用和使用Prototype的各种方法,例如 `$()`, `Element.extend()`, `Ajax` 对象等,这些都是Prototype的核心功能。 **文件名称列表:“PROTOTYPE”** 虽然没有具体的文件名,但我们可以推测...
《Prototype开发者手册(中文版)》是一本专为JavaScript开发者准备的重要参考资料,它详细介绍了Prototype JavaScript框架的使用方法和核心概念。Prototype是一个广泛使用的开源JavaScript库,它的目标是简化...
在学习过程中,配合压缩包内的"Prototype介绍.pdf",可以系统地理解Prototype的核心概念和实际应用。实践中,不断熟悉和掌握Prototype的API,将有助于提升JavaScript开发的效率和代码质量。记住,尽管Prototype可能...
首先,`Prototype1.5中文手册.chm`是一个帮助文档,提供了关于Prototype 1.5版本的详细指南。这个手册通常会涵盖以下内容: 1. **介绍**:解释Prototype的基本概念和目标,以及它如何简化JavaScript编程,特别是...
4. **AJAX支持**:介绍如何使用Prototype进行异步数据交换,创建无刷新的应用。 5. **对象和类**:阐述Prototype提供的Object.extend、Class.create等方法,以及如何创建和使用自定义类。 6. **函数和工具**:包括...
教你如何30秒做高保真原型,特别是移动端,让你的产品在设计期就提供更好的沟通
下面将详细介绍这三个框架的核心概念、特点以及它们在实际开发中的应用。 首先,jQuery是一款高效的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery的核心理念是"Write ...
以上就是关于`prototype.js`文件的基本介绍和使用方法。通过这个库,你可以更高效地进行JavaScript编程,实现丰富的Web交互功能。记得结合`prototype.js`开发手册,深入学习并熟练掌握其各种用法,提升你的...
1. **入门指南**:介绍如何引入Prototype.js到项目中,以及基本的使用方法。 2. **核心概念**:阐述Prototype.js的核心思想,如DOM操作、Ajax和事件处理。 3. **API参考**:详尽列举了所有提供的函数和方法,以及...
- **prototype1.4开发手册.chm**、**prototype1.4开发手册.doc**:这些文档详细介绍了1.4版本的功能和使用方法,对于研究早期版本的特性非常有帮助。 - **prototype-1.6.0.3.js**、**prototype1.4.js**:这两个文件...
### ProtoType框架介绍 ProtoType 是一个基于JavaScript的Ajax开发框架,它包含了丰富的函数和工具,使得开发者能够高效地处理DOM操作、事件监听、HTTP请求以及数据转换等任务。由于其设计精巧,代码编写简洁,...