首 页 | 新 闻 | 技术中心 | 第二书店 | 《程序员》 | 《开发高手》 | 社 区 | 黄 页 | 人 才
移 动专 题SUNIBM微 软微 创精 华Donews人 邮
我的技术中心 
我的分类 我的文档
全部文章 发表文章
专栏管理 使用说明



 RSS 订阅 
最新文档列表
Windows/.NET
.NET  (rss)    
Visual C++  (rss)    
Delphi  (rss)    
Visual Basic  (rss)    
ASP  (rss)    
JavaScript  (rss)    
Java/Linux
Java  (rss)    
Perl  (rss)    
综合
其他开发语言  (rss)    
文件格式  (rss)    
企业开发
游戏开发  (rss)    
网站制作技术  (rss)    
数据库
数据库开发  (rss)    
软件工程
其他  (rss)    

积极原创作者 
goodboy1881 (13)
wangchinaking (58)
iiprogram (67)
fancyhf (1)
harrymeng (41)
yjz0065 (113)
coofucoo (105)
Drate (69)
lphpc (30)
smallnest (61)
CSDN - 文档中心 - 网站制作技术 阅读:14799   评论: 8    参与评论
标题   JavaScript的Prototype(原型)方式实现     选择自 liuruhong 的 Blog
关键字   JavaScript,Design Pattern,Prototype
出处  

写在前面:
    这是我前段时间和Jeff.Yan的一些讨论搞,主要关于JavaScript的Design Pattern,因为没有整理,都是最原始的email内容,我会陆续的贴出一点我给他信,至于他的一些回答和讨论的结果,我会在征求他本人意见的情况下,尽可能完整的贴出来

    因为是和Jeff.Yan的讨论稿,对于我发信内容的发表都同时署名,对于他给我的回信,如果征得他本人同意的情况下在文字中我依然会特别说明。


JavaScript的Prototype实现

作者:Jeff.Yan(阎宏),BlueSwing.Liu(刘如鸿)


模式:
    Prototype(原始模型模式或者原型模式)
定义:
    通过给出一个原型对象来指明所要创建的对象的类型,然后用这个原型对象的方法创建出更多同类型的对象,原始模型模式属于对象的创建模式
 
JavaScript实现:
    在Java语言中对象都继承自java.lang.Object,而java.lang.Object就提供了Clone的方法,只要实现接口Cloneable,即表示支持Clone,否则抛出异常。在这点JavaScript是非常接近的,所有的对象都是从Object继承,不过Object并不支持Clone的方法,但是我们可以通过自己对于JavaScript通过expanddo的形式实现Clone方法,这样日后所有的对象创建都实现了Clone方法。
 
    因为JavaScript本身没有提供Clone的方法,同时对于对象的赋值如var a=new Object();var b=a,这样的代码a,b是指向同一对象的,要创建一个对象必须通过new 这个关键字来实现,因此在Clone的实现过程,我内部定义了一个构造子(constructor)CloneModel,同时指定其父对象为要进行Clone活动本身的对象,因此使用了this关键字,在我们定义的构造子CloneModel的基础上我们创建一个一个对象,因为构造子内部没有任何代码,新创建的对象实际上说所有的实现都在父对象中,也就是我们需要进行Clone的对象。到目前为止,我们已经创建了一个需要复制的对象,但是所有的值都是指向父对象的。
 
    在 JavaScript的面向对象方式中 ,我们曾经讨论过,如果没有覆盖父对象的值,那么这个时候是直接指向父对象的,在Prototype Pattern是要求Clone之后的对象的内部值是不应该相关的,而只要赋值一次,objClone的值都会在自己的内存空间里头,而不是还指向父对象。基于如此的考虑,objClone[v]=objClone[v];语句就是实现将父对象的值通过覆盖的方式拷贝到自己的内存来。(这里提及的内存应该是逻辑意义上的)
 
    深复制的实现
    在完成上述工作之后,只是实现了浅复制,对象方面依然是指向对象的引用,这个时候可以通过调用指向对象的Clone方法得到cloned对象的属性对象(因为不知道如何说了)。objClone[v]=objClone[v].Clone(); 这句代码就是完成如此的功能。

Clone方法的实现
//////////////////////////////////////////////////////////////////////
//为Object添加Clone的方法,因为所有的对象的顶级对象都是Object
//因此所有用户自定义对象都实现了Clone的方法
//////////////////////////////////////////////////////////////////////
Object.prototype.Clone=function(){
 function CloneModel(){
  
 }
 CloneModel.prototype=this;
 var objClone=new  CloneModel();
 
 var strMsg="";
 for( v in objClone){ 
  switch (typeof objClone[v]){
   case "function":
    //如果是方法,不需要进行clone
    break;
   case "object":
   ///////////////////////////////////////////////////////////////////////
   //如果是对象,采用Clone重新得到,这样做的目的在于能够进行深度Clone
   //因为JavaScript是一个Object Based的语言,不然内部对象是指向原来的引用
   ///////////////////////////////////////////////////////////////////////
    objClone[v]=objClone[v].Clone();
    break;
   default:
   ///////////////////////////////////////////////////////////////////////
   //其余数据类型情况下全部重新赋值
   //这样做的目的就是保证数值在内存中的存放是在新对象的空间中
   //而不仅仅指向Parent Object的一个refrence
   ///////////////////////////////////////////////////////////////////////
    objClone[v]=objClone[v];
  }   
 }
 return objClone;
}
 
对象类的定义

function BookInfo(vCaption){
 this.Caption=vCaption; 
 var curPage=0;
 this.setPage=function(vData){
  curPage=vData;
 }
 this.getPage=function(){
  return curPage;
 } 
}
 
测试代码

//////////////////////////////////
//test BookInfo 's clone method
//
//////////////////////////////////
function test(){
 var objTest=new BookInfo("JavaScript Prototype Pattern");
 objTest.setPage(1000);
 
 objTest.Author="Ruhong.Liu"; //object expanddo
 
 ShowObject(objTest,"原始对象");
 //Clone Object from objTest
 var objCloned=objTest.Clone();
 ShowObject(objCloned,"Clone之后的对象"); 
 //if you changed the objTest's caption
 //you can find objCloned's caption has be changed
 objTest.Caption="Changed Base Object";
 //show message
 ShowObject(objTest,"修改Caption之后的原始对象");
 ShowObject(objCloned,"修改Caption之后的clone对象");
 
 
/*
 //----------这段代码可以不工作------------------------//
 //now you can change objCloned's caption
 objCloned.Caption="hello,Jeff.Yan";
 //show message
 ShowObject(objTest,"Clone对象Caption修改之后的原始对象");
 ShowObject(objCloned,"Clone对象Caption修改以后");
*/ 
}
function ShowObject(o,vCaption){
 var strMsg=vCaption +"\n";
 strMsg+="CurrentPage:        " + o.getPage() +"\n";
 strMsg+="Caption:         " + o.Caption +"\n";
 strMsg+="Expanddo Property Author:       " + o.Author;
 alert(strMsg);
}

 
 
结束语:
    按照我目前的理解和测试,我觉得prototype关键字不是prototype模式的实现,这点通过parent object可以得到验证。

相关文章
对该文的评论
windseeds ( 2004-05-09)
另外,补充一点,对于对象内部成员变量,最好不要写成var curPage,
会引起一些问题,具体什么问题我记不清了,我以前在开发中遇到过。

用下划线来区分私有和公共是比较标准的做法,js本身的对象就是这么
做的,比如Object。也就是说
私有变量:this._curPage = 0;
公共变量:this.curPange = 0;
windseeds ( 2004-05-09)
这篇文章写的艰深了一点,实际上没有这么复杂。prototype实际上就是一个对象链。
liuruhong ( 2004-01-01)
记得认识Jeff的时候对于这个方面我也没有兴趣,不过后来在做Web Library的时候才发现Design Pattern的功底还是可以派上用场的,虽然我也不太赞成client端的脚本太多复杂。不过复杂只是相对的,如果是在你的Application开发中,我不太建议程序员在Web 上面的脚本花费太多的功夫,不过如果是希望编写一些比较通用的库文件提供给其他开发人员使用,我想设计方面的功底要求比其实现功能的功底更加重要吧。大家也应该可以看到网络上提供的脚本很多吧,如果在实现一些功能方面无法复用和可扩展,那么还是提供一些教学目的的脚本似乎更加合适一点。反过来说,Design Pattern的学习对于构件开发人员而言是一个很重要的基础,不管是windows下面的ActiveX开发,还是Open Source形式的library,对于Web UI Library开发人员而言,似乎也没有本质的区别
leeeel ( 2003-12-29)
一定要将JS上升到这个境界,实在是高!
问题是在客户端JS写得太长,下载数据和内存占用都太大了
JS能不能简单地应用在开发中?
kingdomzhf ( 2003-12-27)
是对象进一步拷贝,直到是function和primitive类型(不是对象)