js中prototype用法

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.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 方法中也是可行的！

 

 

我们知道JScript中对象的prototype属性，是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢？ 

对于对象的prototype属性的说明，JScript手册上如是说：所有 JScript 内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法)，但该对象不能被赋予不同的原型。然而，用户定义的对象可以被赋给新的原型。 

下面我们看三个经典的prototype属性的使用示例。 

1、为脚本环境内建对象添加方法： 


程序代码 
Array.prototype.max = function() 
{ 
var i, max = this[0]; 
for (i = 1; i < this.length; i++) 
{ 
if (max < this[i]) 
max = this[i]; 
} 
return max; 
}; 


2、为用户自定义类添加方法： 

程序代码 
function TestObject(name) 
{ 
this.m_Name = name; 
} 

TestObject.prototype.ShowName = function() 
{ 
alert(this.m_Name); 
}; 

3、更新自定义类的prototype： 


程序代码 
function TestObjectA() 
{ 
this.MethodA = function() 
{ 
alert(&apos;TestObjectA.MethodA()&apos;); 
} 
} 

function TestObjectB() 
{ 
this.MethodB = function() 
{ 
alert(&apos;TestObjectB.MethodB()&apos;); 
} 
} 

TestObjectB.prototype = new TestObjectA(); 


第三个很眼熟吧？对啊，它就是我们前面介绍的原型继承法呀~~ 不过今天我们不是研究"继承"，之所以可以这样来实现一种继承，只是利用了prototype属性的一个副作用而已。 

prototype还有一个默认的属性：constructor，是用来表示创建对象的函数的(即我们OOP里说的构造函数)。constructor属性是所有具有prototype属性的对象的成员。它们包括除Global和Math对象以外的所有JScript内部对象。constructor属性保存了对构造特定对象实例的函数的引用。 

弄清楚了JScript中prototype属性怎么使用后，下面我们再来深入的研究它。 
上面的文章中我罗列了一下prototype属性在JScript中的各种用法，但是prototype这个东西却不是JScript创造出来的，JScript实际上是使用了我们设计模式中prototype pattern的一种衍生形式。下面我先简单的说一下prototype pattern，然后再来看到底JScript中的prototype是怎么回事?! 

What&apos;s prototype pattern? 

Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype. 

用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 

原型模式允许一个对象再创建另外一个可定制的对象，根本无需知道任何如何创建的细节，工作原理是：通过将一个原型对象传给那个要发动创建的对象，这个要发动创建的对象通过请求原型对象拷贝它们自己来实施创建。 

继续了解到底什么是prototype pattern，可以参看&apos;设计模式之Prototype(原型)&apos;这篇文章，即使不懂Java也没有关系，把它的代码都当C#看就行了。 

搞清楚什么是原型了吧？反正记着一点，prototype pattern是的实现是依赖于clone这个操作的，当然要shallow copy还是deep copy的clone看自己的需要了。 

下面我们继续说JScript里的prototype，为什么我们说它和prototype pattern里的prototype不一样呢?! 这个不是我说就说出来的，也不是我吹出来的，看看这个示例，你就能大概糊涂： 

程序代码 
<script language="javascript"> 
function RP() 
{ 
RP.PropertyA = 1; 
RP.MethodA = function() 
{ 
alert("RP.MethodA "); 
}; 

this.PropertyA = 100; 
this.MethodA = function() 
{ 
alert("this.MethodA"); 
}; 
} 

RP.prototype.PropertyA = 10; 
RP.prototype.MethodA = function() 
{ 
alert("RP.prototype.MethodA"); 
}; 
</script> 

不要着急，还没有开始做示例，只是给出了我们用来演示的一个类。RP是什么？rpwt吗？当然不是了，RP是ResearchPrototype了。好了不废话了，看示例及结果分析。 


程序代码 
<script language="javascript"> 
rp = new RP(); 
alert(RP.PropertyA); 
RP.MethodA(); 
alert(rp.PropertyA); 
rp.MethodA(); 
</script> 


运行结果闪亮登场： 
1 
RP.MethodA 
100 
this.MethodA 
这个%$@#^$%&^...，不要着急，继续看哦！ 


程序代码 
<script language="javascript"> 
rp = new RP(); 
delete RP.PropertyA; 
alert(RP.PropertyA); 
delete RP.MethodA; 
RP.MethodA(); 
delete rp.PropertyA; 
alert(rp.PropertyA); 
delete rp.MethodA; 
rp.MethodA(); 
</script> 
运行结果再次登场： 

程序代码 
undefined 
A Runtime Error has occurred. 
Do you wish to Debug? 
Line: 32 
Error: Object doesn&apos;t support this property or method 
10 
RP.prototype.MethodA 


好玩吧，看出来什么名堂了吗？这里的RP.PropertyA和RP.MethodA只是用来做参照的，可是怎么把this.PropertyA和this.MethodA都delete了，还能出来结果，而且还是prototype导入的属性和方法呢？ 

这就是JScript的prototype和prototype pattern中prototype最大的不同了，JScript中的这个所谓的prototype属性其实是个语言本身支持的特性，这里没有发生任何的copy，不管shallow还是deep的。对于JScript的解释引擎，它在处理"."或"[keyName]"引用的对象的属性和方法时，先在对象本身的实例(this)中查找，如果找到就返回或执行。如果没有查找到，就查找对象的prototype(this.constructor.prototype)里是否定义了被查找的对象和方法，如果找到就返回或执行，如果没有查找到，就返回undefined(对于属性)或runtime error(对于方法)。 

正因为prototype导入类实例的属性或方法是动态查找的，所以我们才能对系统内部对象添加prototype属性和方法，比如给String对象添加trim方法： 


程序代码 
<script lanuage="javascript"> 
String.prototype.trim() 
{ 
return this.replace(/(^/s+)|(/s+$)/g, ""); 
} 
</scritp> 

显然JScript中的这种用法也是prototype pattern中的prototype不能解释和支持的。 

这下对于JScript OOP中原型继承法的理解因该没有任何的障碍了吧？同时也应该明白为什么原型继承法有那么大的天生缺陷了吧？当然如果有任何问题，欢迎继续讨论。 

附演示示例源代码： 


程序代码 
<html> 
<head> 
<meta name="author" content="birdshome@博客园"> 
<title>JScript Prototype Research</title> 
</head> 
<body> 
<script language="javascript"> 
function RP() 
{ 
RP.PropertyA = 1; 
RP.MethodA = function() 
{ 
alert("RP.MethodA "); 
}; 

this.PropertyA = 100; 
this.MethodA = function() 
{ 
alert("this.MethodA"); 
}; 
} 

RP.prototype.PropertyA = 10; 
RP.prototype.MethodA = function() 
{ 
alert("RP.prototype.MethodA"); 
}; 
</script> 
<script language="javascript"> 
rp = new RP(); 
delete RP.PropertyA; 
alert(RP.PropertyA); 
delete RP.MethodA; 
RP.MethodA(); 
delete rp.PropertyA; 
alert(rp.PropertyA); 
delete rp.MethodA; 
rp.MethodA(); 
</script> 
</body> 
</html>