面向对象的JavaScript编程

Posted on 2007-6-29 星期五

javascript对于做过Web程序的人不应该是陌生,初期是用来做一些简单的FORM验证,基本上是在玩弄一些技巧性的东西。IE 4.0引入了 DHTML,同时为了对抗Netscape的javascript,提出了自己的脚本语言JScript,除了遵循EMAC的标准之外,同时增加了许多扩展,如下要提到的OOP编程就是其中的一个,为了命且概念,我以下提到的javascript都是 Microsoft Internet Explorer 4.0以上实现的JScript,对于Netscape,我没有做过太多的程序,所以一些的区别也就看出来。

javascript不是一个支持面向对象的语言,更加算不上一个开发平台,但是javascript提供了一个非常强大的基于 prototype的面向对象调用功能,你可以在你自己需要的地方使用他们。因此,如何使用对象?本文尽可能从javascript面向对象实现原理出发,解析清楚它的工作模型。在了解这些模型之后,你可以在自己的脚本库中编写一些实现代码,然后在其他地方调用。

javascript的语法和C++很接近,不过在类实现中没有使用关键字Class,实现继承的时候也没有采用传统的Public或者 Implement等等所谓的关键字来标示类的实现。这样的情况下,可能有就有人会问,如何编写javascript的Class,如何实现继承。我开始也是百思不得其解,后来看了MSDN,才知道采用了prototype来实现,包括继承和重载,也可以通过这个关键字来实现。

javascript的函数很奇怪,每个都是默认实现了Optional的,即参数都可以可选的,function a(var1,var2, var3),在调用的过程中a(),a(value1),a(value1,value2)等等的调用都是正确的,至少在即使编译部分可以完整通过,至于其它,只是和函数的实现逻辑比较相关了。

以下就JS对于类的实现、继承、重载详细介绍其实现方式。

1。实现

Js类的实现就通过函数直接实现的,每个函数可以直接看成class,如下代码

  1. function ClassTest1(){
  2.  
  3.         …//implement code
  4.  
  5.     }
  6.  
  7.     var a=new ClassTest1
  8.     function ClassTest2(var1){
  9.  
  10.         …//implement code
  11.  
  12.     }
  13.     var b=new ClassTest(“value”)

对于类的属性,可以通过两种方式实现

1)this.”

2)通过ClassFunction.prototype.[FunctionName]=function(var1,var2...){//todo}这样的方式完成调用。

这两种方式从目标来看是一致的,按照我个人的观点来看,区别的只是在于实现方式,通过this.propertyName的方式来创建, Jscript自动创建了property或者method的入口,不过从程序的角度而言,还是使用prototype的关键字实现比较灵活。

另外javascript也可以和我们C++中那种嵌套声明的方法来声明,C++实现的方法如下

  1. Public Class ClassName:ParentClass{
  2.  
  3.         Public DataType FunctionName(){
  4.         }
  5.  
  6.         Public Class ClassName{
  7.  
  8.             Public DataType FunctionName(){
  9.  
  10.             }
  11.  
  12.         }
  13.  
  14.     }

在javascript当中,当然不存在class这样的关键字了,所以实现起来有点戏剧性,不过仍然为一个非常巧妙的实现。

  1. function className(){
  2.  
  3.         //Property Implement
  4.  
  5.         this.UserName=“blue”;
  6.  
  7.         //Method Implement
  8.  
  9.         this.Add=new function(){
  10.  
  11.         }
  12.  
  13.         //Sub Class Implement
  14.  
  15.         function SubClassName(){
  16.  
  17.             this.PropertyName=“hi”           
  18.  
  19.         }
  20.  
  21.         //sub class method implement
  22.  
  23.         SubClassName.prototype.Change=function{
  24.  
  25.         }
  26.  
  27.     }
  28.  
  29.     //Main Class Method Implement
  30.  
  31.     className.prototype.Delete=function(){
  32.  
  33.     }

如上的代码大致演示了javascript类中属性和方法的实现,另外有一点比较困惑,整个class中都是public的,没有关键字 private之类的可以控制某些方法是否隐藏,那么在我们编写代码实现的规范中,我看国外一些程序员都是使用_functionName这样子为函数命的方法来区分,但是在调用过程中实际还可以调用的。

实现了属性和方法,剩下的就是Event的实现了,我查找了许多资料,包括整个MSDN关于JScript的参考,都没有看到一个很好的模型关于事件实现的,后来参考了一些站点编写HTA(HTML Component,有空我会写一些相关的文章)的实现,借助于比较扭曲(我个人认为)的方法可以大致的实现基于事件驱动的功能。大致的思路是这样子的:

1).将所有的事件定义成属性,只要简单的声明就可以

2).在需要触发事件的代码中判断事件属性是否是一个函数,如果是函数,直接执行函数代码,如果是字符串,那么执行字符串函数,通过eval(str)来执行。

3) .在类的实例当中注册事件函数。

为了简单说明如上的思路,采用timer这样简单的例子来表述如上的所提到的内容,如果只是为了简单的实现timer的功能,javascript中setInterval函数就可以满足全部的要求,如下的代码只是用来说明Timer的工作原理。

  1. //Class For Timer
  2. function Timer(iInterval){
  3.  //if not set the timer interval ,then defalut set to 500ms
  4.  this.Interval=iInterval || 500;
  5.  this._handleInterval;
  6.  this.TimerEvent=null
  7.  function Start(){
  8.   if(this.Interval!=0){
  9.    this._handleInterval=setInterval(“TimerCallBack()”,this.Interval);
  10.   }
  11.  }
  12.  function Start(){
  13.   clearInterval(this._handleInterval);
  14.  }
  15.  function TimerCallBack(){
  16.   if (typeof this.TimerEvent==“function”){
  17.    this.TimerEvent();
  18.   }
  19.   else if(this.TimerEvent!=null && this.TimerEvent.length>0){
  20.    eval(this.TimerEvent);
  21.   }
  22.  }
  23. }
  24. //Code for Instance
  25. var t=new Timer(3);
  26.  
  27. //————————————//
  28.  
  29. //1.
  30. t.TimerEvent=function(){
  31. //todo
  32. }
  33.  
  34. //2.
  35. t.TimerEvent=“alert(\”hello\”)”;
  36.  
  37. //3.
  38.  
  39. t.TimerEvent=tTimerCall;
  40.  
  41. //———————————-//
  42. t.Start();
  43. t.Stop();
  44.  
  45. function tTimerCall(){
  46.  
  47. }

实际工作代码是在TimerCallBack()上面实现,事件触发作为属性的方式来实现,在应用实例中,代码提供了三种方法去调用事件,不过在事件的回调当中,我还没有想到如何可以带参数,只有才各自的实现当中访问各自需要的属性才能够实现全部的要求。

2。继承。

刚采用了大篇幅的文字去介绍如何实现javascript的各种实现,也就是从逻辑上完成了一个封装class的实现,从某种意义上来说, class的实现是真正脚本编程中使用最多的部分,不过如果只是要完成如上的功能,使用VBScript来编写更能更加清晰,毕竟VBscript提供了 class关键字,同时提供了public 和private这两个关键字,可以清晰的将公共和私有对象分离,至于事件的实现,也可以采用类似 javascript实现的思路,只是对于函数的引用需要采用GetRef这个函数,具体的用法可以参考scripting reference, MSDN里头也有详细的介绍,而javascript强大至于在于如下要说的了,虽然具体的东西可能不多。

如上所言,我们已经完成了一个基本的类实现Timer,现在要做的是重新编写这个类,我们简单的只是想在这个类之中加入一个方法,提供当前的系统时间,方法的名称为getSystemDate,显然如果全部重新编写,那就失去了我这里说的意义了。先看看如下的实现。

  1. function NewTimer(iInterval){
  2.  
  3.         //call super
  4.  
  5.         this.base=Timer;
  6.  
  7.         this.base(iInterval);       
  8.  
  9.     }
  10.  
  11.     NewTimer.prototype=new Timer;
  12.  
  13.     NewTimer.prototype.getSystemDate=function(){
  14.  
  15.         var dt=new Date();
  16.  
  17.         return dt.getYear()+“-”+dt.getMonth()+“-”+dt.getDay()
  18.  
  19.     }

上述代码实现了NewTimer类,从Timer继承,javascript没有使用“:”或者java的public那样类似的关键字,只是通过newclassname.prototype=new baseclass这样的方法来完成,同时NewTimer实现了getSystemDate 的方法,在NewTimer的初始化函数中,我使用了this.base=Timer,是为了引用父类的实现,不过在对于父类其他实现函数的调用,到现在我没有找到一个确定的方法,是否通过this.base.start()那样来调用还是其他的,如果有谁比较清楚的,麻烦告诉我,另外在netscape 的站点上,我查到有一个特殊的”__proto__”的属性好像是对于父类的直接引用,不过具体的我也没有尝试过,在msdn中也没有看到对于 __proto__的支持。

3。重载

或许这个是OOP编程中比较复杂的地方了,在javascript的实现中有点无奈,也就是通过prototype的方式来完成的,不过因为我不清楚如何调用父类的实现函数,那么在重载中只能够重新编写所有的实现了,另外就是在实现中实例化一个父类,然后通过调用它来返回需要的东西。

javascript中所有的对象都是从Object继承下来的,object提供了toString()的方法,也就是说如果调用alert (objInstance)这样的过程,实际上是调用了alert(objInstance.toString())的方法,如果没有编写实现, object默认的toString()都是”object object”这样子的,在许多地方需要重载这个函数的,比如Timer,如果我们希望 var ins=new Timer(5);alert(ins)调用得到的是interval的值5,那么就需要重新编写toString()方法了

Timer.prototype.toString=function(){ return this.Interval};

以上代码实现之后alert(ins)得到的就是5了。


No comments have been added to this post yet.

留下评论

(必需)

(必需)


Information for comment users
Line and paragraph breaks are implemented automatically. Your e-mail address is never displayed. Please consider what you're posting.

Use the buttons below to customise your comment.


RSS feed for comments on this post | TrackBack URI