云联天下首页 |  登陆 |  注册 |  密码找回 |  关于我们 | 加入收藏 
首页技术资料网站建设→(Javascript)prototype的一个优势也是缺点 【字号: 】 【背景色 杏仁黄 秋叶褐 胭脂红 芥末绿 天蓝 雪青 灰 银河白(默认色)

(Javascript)prototype的一个优势也是缺点

网址来源:http://www.kehui.net发布时间: 2006-12-07 00:00:16

如何在Javascript实现OO编程?恐怕最好的方式就是充分利用prototype属性。关于prototype的介绍有很多,我就不赘述了。比较基本的原理是,当你用prototype编写一个类后,当你new一个新的object,浏览器会自动把prototype中的内容替你附加在object上。这样,通过利用prototype,你也就实现了类似OOJavascript


Javascript中,object就是一个associative array。一个function就是一个类。当你编写如下function时,其实就是定义了一个类,该function就是它的构造函数。



function MyObject(name, size)


       {


              this.name = name;


              this.size = size;


       }



之后,你可以方便的通过MyObject类的prototype属性来方便的扩充它。比如,你可以给他添加其他的属性和方法。



       MyObject.prototype.tellSize = function()


       {


              return "size of "+this.name+" is "+this.size;


       }


      


       MyObject.prototype.color = "red";


       MyObject.prototype.tellColor = function()


       {


              return "color of "+this.name+" is "+this.color;


       }


      


       var myobj1 = new MyObject("tiddles", "7.5 meters");


       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";



你可以想象,当你调用tellColor()方法后,结果是这样的:



color of tiddles is red



很方便的是,prototype属性可以动态添加。比如,你需要往MyObject中加入一个height属性,并希望其提供一个tellHeight()方法来获得height属性的值。你可以在上面的代码后,继续添加如下的代码:



       MyObject.prototype.height = "2.26 meters";


       MyObject.prototype.tellHeight = function()


       {


              return "height of "+this.name+" is "+this.height;


       }



之后,你可以访问一下myobj1tellHeight()方法,你可以得到如下的结果:



height of tiddles is 2.26 meters



prototype的这些动态的特性看起来有些迷人,不过我倒是反而觉得有些凉飕飕的。确实,这些特性给你很大的灵活性,可以给与你runtime改变类属性和方法的能力。不过,稍微发掘一下,会有些不良的习惯产生。


首先,如果可以动态添加属性和方法,那么很容易让人想到,当我调用时,我想要调用的属性或者方法存在不?这是一个很严肃的问题,如果当我们调用时根本没有该属性或者方法,将可能导致我们的脚本down掉。


不过也有解决办法。比如,在上面的代码中,当还没有tellHeight()方法时,我们可以如下编写代码避免发生错误:



       if (myobj1.tellHeight)


       {


              domDiv.innerHTML += myobj1.tellHeight()+"<br /><br />";


       }



注意,一定要在if语句中,不要加方法后面的那对(),否则,直接就down掉了。有兴趣的读者可以打印一下,看看分别访问myobj1.tellHeightmyobj1.tellHeight()时有什么区别。


也许,你觉得这个是小意思。加个判断嘛,不就好了?


对,但是下面一个问题更令人头痛。


属性和方法在不在的问题简单,可是属性和方法变不变化的问题可就严重了。在不在我们可以检测,变不变呢?比如,请看下面的代码:



       function MyObject(name, size)


       {


              this.name = name;


              this.size = size;


       }


      


       MyObject.prototype.color = "red";


       MyObject.prototype.tellColor = function()


       {


              return "color of "+this.name+" is "+this.color;


       }


      


       var myobj1 = new MyObject("tiddles", "7.5 meters");


       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";


      


       MyObject.prototype.color = "green";


      


       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";



该代码将产生如下结果:



color of tiddles is red
color of tiddles is green




请注意,你修改的是类MyObjectcolor属性。但是你惊奇的看到你之前实例化的对象myobj1的属性值竟然也变化了。天!如果你的项目代码是多人合作,那么,也许某个人会在编程时为了图一己之便,擅自修改你的类。于是,所有人的对象都变化了。于是,你们陷入了漫长的debug过程中。。。。。。(不要说我没有告诉你啊)


上面是属性,还有方法:



       function MyObject(name, size)


       {


              this.name = name;


              this.size = size;


       }


      


       MyObject.prototype.color = "red";


       MyObject.prototype.tellColor = function()


       {


              return "color of "+this.name+" is "+this.color;


       }


      


       var myobj1 = new MyObject("tiddles", "7.5 meters");


       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";


      


       MyObject.prototype.color = "green";


       MyObject.prototype.tellColor = function()


       {


              return "your color of "+this.name+" is "+this.color;


       }


      


       domDiv.innerHTML += myobj1.tellColor()+"<br /><br />";



这段代码的结果是:



color of tiddles is red
your color of tiddles is green




哈?原来方法也能变,汗!


问题来了。Javascript太灵活的编程方式多少让人不适应。如果整个Team的水平都比较高还可以,没人会犯这样的错误。但是,当有个毛头小伙子不知情,擅自修改类,将导致所有的人的对象都发生变化,无论是属性还是方法。在Javascript代码变得越来越多的Ajax时代,这是一个严重的问题。


这说明,编写Javascript时,好的编程风格更加重要。记得某人曾经说过这样的话,想JavaC#这些比较严格的语言,虽然降低了灵活性,但也减少了犯错误的可能。这样,即使一个新手,他写出的代码也不会与高手差太多。但是,像Javascript这样的脚本语言,由于太灵活,所以,高手写出的是天使,而新手写的,可能是魔鬼!


Coofucoo Zhang


4/23/2006






coofucoo 

相关新闻
v 浅谈PHP开发团队管理及程序员做人问题! 2006-12-07 00:00:16
v Web开发技术的历史发展简介 2006-12-07 00:00:16
v 多选下拉菜单的一个实现方案 by unifly 2006-12-07 00:00:16
v NickLee.Framework.V1.9.4.3 2006-12-07 00:00:16
v [技术讨论]如何跟项目经理搞好关系,关于ajax的对话和开发工具 2006-12-07 00:00:16
v Microsoft Internet Explorer 7.0 beta 2 细节展示以及下载地址 2006-12-07 00:00:16
v 在Windows中安装Apache2和PHP4的权威指南 2006-12-07 00:00:16
v DotText源码阅读(3)-框架配置体系和反序列化 2006-12-07 00:00:16
v Asp.net服务器控件编程(1) 开篇、基础 2006-12-07 00:00:16
v 也为CSDN Blog加效果 2006-12-07 00:00:16
  最新新闻
智慧家居
智慧家居颠覆传统智能家居
智慧云谷让智能家居变成有智慧的
智慧云谷引领智慧家居新生活
科技改变生活 智慧云谷智慧家居系
智慧家居领航者,智慧云谷助你玩
智能家居如何赢得市场美誉度?
智慧云谷智慧家居:创业者有无限
WiFi智能家居你还在用?这样的智
互联网+助推智能家居产业
智慧云谷为您打造真正的智能家居
智能家居产业需要的不是单品,而
新家如何选择开关?智慧云谷iWis
智能传感器-世界首款“智”为你的
智慧云谷开关智能安防智能空气质
智能开关品牌,如何选择智能开关
秋季干燥,智慧家居温湿度传感器
传感器助力智慧家居 感知爱家
iWiscloud智能触摸开关缔造家居装

  最新帖子
 ※室内空气污染的危害及  [sensor]
 ※超声波风速传感器在生  [sensor]
 ※这么冷清  [gabc111]
 ※手机APP操作有问题  [ssy11407]
 ※智慧云谷智慧家居将在  [cici]
 ※上传下载  [cici]
 ※下载智慧家居  [apple2008]
 ※秋季干燥,智慧家居温  [apple2008]
 ※智慧家居紧扣热点 安全  [apple2008]
 ※办公大楼如何智慧化管  [apple2008]
 ※智慧云谷工业自控的优  [apple2008]
 ※传感器助力智慧家居 感  [apple2008]
 ※智能开关品牌,如何选  [apple2008]
 ※智慧云谷开关智能安防  [apple2008]
 ※没有专业人员,如何安  [apple2008]
 ※烟台智慧云谷董事长任  [apple2008]
 ※互联网+助推智能家居产  [apple2008]
 ※WiFi智能家居你还在用  [apple2008]
 ※智慧云谷智慧家居:创  [apple2008]
 ※智能家居如何赢得市场  [apple2008]
钯碳回收 硝酸银回收 银浆回收 银焊条回收 回收银浆 氯化钯回收 氯化钯回收 氧化钯回收 回收硝酸钯 钯水回收价格 海绵钯回收 钯炭回收价格 回收镀金板 深圳钯碳回收 镇江氯化钯回收 杭州钯浆回收 银浆回收多少钱 回收钯碳公司 硝酸银的价格 那里有回收金 氯化钯回收价格 江苏擦银布回收 硝酸银价格 德州钯粉回收 银铜回收 回收钯粉 回收铂碳催化剂 佛山钯碳回收 金盐回收价格 海绵钯回收 钯碳高价回收 钯回收价格 钯炭回收