javascript面向对象编程（二）

 

 

Published by canque on February 26, 2008 05:23 pm under [web发展] Tags: javascript, 面向对象编程

[javascript模拟传统OOP]
javascript是一种非常灵活的语言，它的灵活度足以让你模拟传统的OOP。主流的javascript框架大都实现了这个功能，这里给出我的实现办法：OOP.js(2k)。

[Class.create,创建类]
这个参考了大名鼎鼎的prototype框架的实现，不过也稍有不同。创建类的方法如下：程序演示页面(1)

PLAIN TEXT

JavaScript:

1. <script language= "JavaScript" src= "http://rssidea.com/labs/OOP/OOP.js"></script>
2. <script language= "JavaScript">
3.     //定义class,名为baseClass
4.     var baseClass = Class. create ( {
5.          //类属性
6.         info: 'This is the original info',
7.          //构造函数，统一命名init
8.         init: function (str ) {
9.              alert ( 'Create a new class, ' + str + '!' );
10.          },
11.          //类方法
12.         setInfo: function (str ) {
13.              this. info = str;
14.          },
15.         getInfo: function ( ) {
16.              return this. info;
17.          }
18.     } );
19.     //实例化一个类,同时执行构造函数init
20.     var myClass = new baseClass ( "well done" ); //Create a new class,well done!
21.     alert (myClass. info ); //This is the original info
22.     alert (myClass. getInfo ( ) ); //This is the original info
23.     myClass. setInfo ( 'This is the new info' );
24.     alert (myClass. getInfo ( ) ); //This is the new info
25. </script>

[Class.add,添加原型方法]
javascript可以为类或实例在类定义以外的地方添加方法,甚至是在实例化类以后。而给某实例添加方法有两类，一类是添加原型方法，一类是添加实例方法。详情请看下面这段代码：程序演示页面(2)

PLAIN TEXT

JavaScript:

1. <script language= "JavaScript" src= "http://rssidea.com/labs/OOP/OOP.js"></script>
2. <script language= "JavaScript">
3.     var myClass = Class. create ( {
4.         num: 0,
5.         add: function (num ) {
6.             return this. num + num;
7.         },
8.         init: function (num ) {
9.             this. num = num;
10.         }
11.     } )
12.     var obj = new myClass ( 100 );
13.     var newObj = new myClass ( 10 )
14.     alert (obj. add ( 50 ) ); //alert 150
15.     //增加原形方法
16.     //你也可以使用原生的javascript添加myClass.prototype.add=function(){}
17.     myClass. add ( {
18.         multi: function (num ) {
19.             return this. num * num;
20.         }
21.     } );
22.     //基于该原型的实例obj,newObj都获得了multi方法
23.     alert (obj. multi ( 50 ) ); //alert 5000
24.     alert (newObj. multi ( 5 ) ); //alert 50
25.     //增加实例方法
26.     obj. sub = function (num ) {
27.         return this. num - num;
28.     }
29.     //实例方法只对该实例有效
30.     alert (obj. sub ( 50 ) ); //alert 50
31.     alert (newObj. sub ( 5 ) ); //error! newObj.sub is not a function
32. </script>