Javascript的类实现--------封装、抽象与继承

一.JavaScript中类的封装

      Javascript不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 下面我们以封装一个简单的Shape类来作一个说明.

     定义 ShapeBase“类”

     1.法则一[this式]

       function ShapeBase(){ 

            this.show = function(){ 

                 alert("ShapeBase show"); 

            }; 

            this.init = function(){ 

                 alert("ShapeBase init"); 

            }; 

       } 

       注：这里用到了this来声明，而不是var，后者是用来定义私有方法的。

       

       2.法则二[prototype式]

       ShapeBase.prototype.show=function(){ 

              alert("ShapeBase show"); 

       } 

       ShapeBase.prototype.init=function(){ 

              alert("ShapeBase init"); 

       }

        或者

        ShapeBase.prototype={

                  show:function(){

                          alert("ShapeBase show");

                   }

                  init:function(){

                           alert("ShapeBase init");

                   }       

        }

 

        同构造java一样，我们写一个主函数调用测试下。如下

         funciton test(){

                var s = new ShapeBase();

                s.init();

                s.show();

         }

     

        可以看到我们在构造JS类上有两中方式，在调用中我们发现其方式与java类几乎一样，new一个类对象，通过引用发送消息的形式调用具体类的方法。差别仅在于这个时候生成的类对象的类型这里还是记为var。

 

二.JS抽象类和继承

      类的封装我们已经实现了，而面向对象其他的一些优良特性我们也可以通过JS本身的特性来实现。这种化归思想本身就是一种技巧。

      我们可以利用JavaScript语言本身的性质来实现其抽象类，也可以通过将父类prototype中的成员方法复制到子类的prototype中来实现其继承机制。

      即将面向对象编程中的继承概念转化为javascript语言中的函数属性复制。

       1.JS中的实例prototype方法

      可实例化的prototype方法

          Object.prototype.extend = function(object) { 

                     return Object.extend.apply(this, [this, object]); 

          } 

       2.JS中的虚方法

      在传统语言中虚方法要先定义, 而包含虚方法的类就是抽象类,抽象类不能被实例化,但在JavaScript中，虚方法是被看作该类中未定义的方法，但已经通过this指针使用了. 所以JS中的虚方法不需经过声明而直接使用, 并且类也可以被实例化.

      静态方法：

         Object.extend = function(destination, source){ 

                for(property in source){ 

                      destination[property] = source[property]; 

                } 

                return destination; 

          }

       3.1继承[实例方法prototype]

         以object为例。先定义object的extend方法, 一个为静态方法，一个为实例方法, 这两个方法用于通过prototype来实现的继承机制。

          实现继承类Rect

          function Rect(){

                    //

          }

          // 实现继承

          Rect.prototype = ShapeBase.prototype;

          //扩充新方法

          Rect.prototype.add = function(){

                alert("Rect add");

           }

       注：这里的继承有一种区别于一般面向对象的继承特性。可能是由于prototype赋值只是简单的改变指向地址，会导致一种现象，即如果重写了“子类”的方法，则“父类”的方法也随之改变。这种权利转移的确让人惊讶。

       测试例子如下：

       如果在子类重写show方法

       Rect.prototype.show = function(){

              alert("Rect show");

       }

 

       则执行结果如下：

       function test(){

             var s = new ShapeBase();

             //结果显示：Rect show

             s.show(); 

 

              //结果显示：Rect show

             var r = new Rect();

             //结果显示：Rect add

              r.add();

       }

 

       3.2继承[静态方法]

       使用object.extend实现继承, 并实现一个oninit虚方法, 修改“父类”ShapeBase如下:

              ShapeBase.prototype = {

                        show:function(){

                                   alert("ShapeBase show");

                         }

                         initialize:function(){

                                    this.oninit();

                         }

                }

                子类Rect

                 Rect.prototype = (new ShapeBase).extend({

                             //添加新方法

                             add:function(){

                                      alert("Rect add");

                              },

                             // 重写show方法而不改变父类方法

                             show:function(){

                                      alert("Rect show");

                             },

                             //实现虚方法

                             oninit:function(){

                                     alert("Rect oninit");

                              }

                 })

 

                 测试类如下：

                 function test(src){

                         var s = ShapeBase();

                         //显示ShapeBase show[来自父类]

                         s.show();

                         var r = new Rect();

                         //显示Rect show [来自子类]

                         r.show();

                         //显示Rect add [来自子类扩充方法]

                         r.add();

                          //显示Rect oninit [来自实现的oninit方法]

                         r.initialize();

                 }

 

三.特定对象创建类

       特定对象实现属性复制
       function extend(des, src){

            if(!des){

                   des = {};

            }

            if(src){

                   for(var i in src){

                         des[i] = src [i];

                   }

            }

 

            return des;

            

       }

 

       //全局变量

       var CC = {}；

       //设置create用于创建类

       CC.create = function(superclass,constructor){

               var clazz = (function(){

                      this.initialize.apply(this,arguments);

               });

                       //如果无参数，则直接返回类

                       if(arguments.length == 0){

                                 return clazz;

                       }

                       //如果父类此时constructor应该成为一个纯对象，直接复制属性返回

                       if(!superclass){

                                 extend(clazz.prototype,constructor);

                                 return clazz;

                       } 

 

                       var absObj = clazz.prototype,

                             sprPropty = superclass.prototype;

                       if(sprProty){

                             //用于访问父类方法

                             clazz.superclass  = prototype;

                             extend(absObj ,sprPropty);

                             //调用属性构造函数创建属性。实现的关键

                             extend(absObj, constructor(sprPropty));

                         //子类实例直接通过obj.superclass访问父类属性。

                        //如果不想造成过多引用，可以把这句注释掉。多数时候也没有必要

                             absObj.superclass = sprPropty;

                             clazz.constructor = constructor;

                        }

                        return clazz;

       }

      

       //创建一个动物类

       var Animal = CC.create(null ,{

                 //属性

                 footprint:‘-------------------=’,

                 //类初始化方法。当用new生成一个类时该方法自动被调用。参见上述                  //定义

                 initialize:function(options){

                         extend(this,options);

                         alert("Animal initialize method is called.");

                 }

                 eat:function(){

                          alert("Animal eat method is called");

                 }

                 move:function(){

                          alert("I am moving like this '+ this.footprint+' .");

                 }

          });

 

          //创建一个Duke类

          var Duke = CC.create(Animal,function(superclass){

                   //此处可定义类全局静态数据，该类每个实例都共享这些数据。

                   //计算实例个数，包括派生类实例

                   var static_instance_counter = 0;

                   function classUtilityFuncHere(){};

                   //返回类具体属性

                   return{

                          // 重写初始化方法

                          initialize:function(){

                                 alert("initializing Duke class");

                          }

                          //调用父类初始化。比一般其它库要简洁。

                          superclass.initialize.call(this,options);

                          //子类扩充
                          alert("Duke initialize method is called.");

                          //读取或修改类静态属性

                          static_instance_couter++;

                          

                   },

                    

                   //重写move方法并增加Duke自己的移动方式

                   move:function(){

                          this.footprint = this.footprint + "zzzzzzzzzzzzz";

                          superclass.move.call(this);

                   },

                   //重写eat方法，覆盖父类eat方法

                   eat:function(){

                          alert("Duke is eating");

                   },

                   //子类新增自己的方法,显示当前已经初始化的Duke类实例数量

                   say:function(){

                         alert("The number of Duke instance is ' + static_instance_counter' ");

                   }

          };

 

          });

 

          var DukeChild = CC.create(Duke,function(superclass){

                   return{

                           move:function(){

                                  this.footprint = this.footprint + "++++++=";

                                  superclass.move.call(this);

                           },

                           say:function(){

                                  alert("this.msg ||");

                           }

                   };

 

           })

 

           测试类：

           function test(){

                 var animal = new Animal();

                 animal.eat()

                 animal.move();

                 var dukeA = new Duke();

                 dukeA.eat();

                 dukeA.move();

                 dukeA.say();

                 var dukeB = new Duke();

                 dukeB.eat();

                 dukeB.move();

                 dukeB.say();

                 var dukeC = new DukeChild({msg:'I am a child of duke'});

                 duckC.move();

                 duckC.say();

           }