prototype.js 是Sam Stephenson写的一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国内外有多个基于此类库实现的效果库,也做得很棒。

 

  prototype.js不仅是一个有很大实用价值的js库,而且有很高的学习价值。

 

  ---

 

  在prototype.js中,prototype对象是实现面向对象的一个重要机制。

 

  每个函数(Function)就是一个对象,函数对象都有一个子对象 prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。

 

  在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。

 

  1、该对象被类所引用,只有函数对象才可引用。

 

  2、在new实例化后,其成员被实例化,实例对象方可调用。

 

  同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。

JS中的phototype是JS中比较难理解的一个部分

 

本文基于下面几个知识点:

 

1 原型法设计模式

在.Net中可以使用clone()来实现原型法

原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。

 

2 javascript的方法可以分为三类:

a 类方法

b 对象方法

c 原型方法
 

例子:

 
  1. function People(name)  
  2. {  
  3. this.name=name;  
  4. //对象方法  
  5. this.Introduce=function(){  
  6. alert("My name is "+this.name);  
  7. }  
  8. }  
  9. //类方法  
  10. People.Run=function(){  
  11. alert("I can run");  
  12. }  
  13. //原型方法  
  14. People.prototype.IntroduceChinese=function(){  
  15. alert("我的名字是"+this.name);  
  16. }  



//测试

  1. var p1=new People("Windking");  
  2.  
  3. p1.Introduce();  
  4.  
  5. People.Run();  
  6.  
  7. p1.IntroduceChinese();   
 

 

3 obj1.func.call(obj)方法

意思是将obj看成obj1,调用func方法

 

 

好了,下面一个一个问题解决:

 

prototype是什么含义?

 

javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。

A.prototype = new B();

理解prototype不应把它和继承混淆。A的prototype为B的一个实例,可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。这里强调的是克隆而不是继承。可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。

 

先看一个实验的例子:


 
  1. function baseClass()  
  2. {  
  3.  
  4. this.showMsg = function()  
  5. {  
  6. alert("baseClass::showMsg");   
  7. }  
  8.  
  9. }  
  10.  
  11. function extendClass()  
  12. {  
  13.  
  14. }  
  15.  
  16. extendClass.prototype = new baseClass();  
  17.  
  18. instance = new extendClass();  
  19.  
  20. instance.showMsg(); // 显示baseClass::showMsg  
 

我们首先定义了baseClass类,然后我们要定义extentClass,但是我们打算以baseClass的一个实例为原型,来克隆的extendClass也同时包含showMsg这个对象方法。

extendClass.prototype = new baseClass()就可以阅读为:extendClass是以baseClass的一个实例为原型克隆创建的。

 

那么就会有一个问题,如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样?

下面是扩展实验2:


 
  1. function baseClass()  
  2. {  
  3. this.showMsg = function()  
  4. {  
  5. alert("baseClass::showMsg");   
  6. }  
  7. }  
  8.  
  9. function extendClass()  
  10. {  
  11. this.showMsg =function ()  
  12. {  
  13. alert("extendClass::showMsg");  
  14. }  
  15. }  
  16.  
  17. extendClass.prototype = new baseClass();  
  18. instance = new extendClass();  
  19.  
  20. instance.showMsg();//显示extendClass::showMsg  
 

 

实验证明:函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。

 

那么又会有一个新的问题:

如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?

 

答案是可以使用call:
 


extendClass.prototype = new baseClass();
instance
= new extendClass();


var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
//显示baseClass::showMsg

 

这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用,调用它的对象方法showMsg”

好了,这里可能有人会问,为什么不用baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别,我们想调用的是baseClass的对象方法

 

最后,下面这个代码如果理解清晰,那么这篇文章说的就已经理解了:

 


 
  1. <script type="text/javascript"> 
  2.  
  3. function baseClass()  
  4. {  
  5. this.showMsg = function()  
  6. {  
  7. alert("baseClass::showMsg");   
  8. }  
  9.  
  10. this.baseShowMsg = function()  
  11. {  
  12. alert("baseClass::baseShowMsg");  
  13. }  
  14. }  
  15. baseClass.showMsg = function()  
  16. {  
  17. alert("baseClass::showMsg static");  
  18. }  
  19.  
  20. function extendClass()  
  21. {  
  22. this.showMsg =function ()  
  23. {  
  24. alert("extendClass::showMsg");  
  25. }  
  26. }  
  27. extendClass.showMsg = function()  
  28. {  
  29. alert("extendClass::showMsg static")  
  30. }  
  31.  
  32. extendClass.prototype = new baseClass();  
  33. instance = new extendClass();  
  34.  
  35. instance.showMsg(); //显示extendClass::showMsg  
  36. instance.baseShowMsg(); //显示baseClass::baseShowMsg  
  37. instance.showMsg(); //显示extendClass::showMsg  
  38.  
  39. baseClass.showMsg.call(instance);//显示baseClass::showMsg static  
  40.  
  41. var baseinstance = new baseClass();  
  42. baseinstance.showMsg.call(instance);//显示baseClass::showMsg  
  43.  
  44. </script>