js代码如何封装

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

代码如下:

function ShapeBase() {      this.show = function(){          alert("ShapeBase show");      };      this.init = function(){          alert("ShapeBase init");      };  }

这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的. 

代码如下:

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");      }  };

现在, 类是写好了， 让我们写个js来测试下, 看看结果是不是跟我们想象的一样呢? 

代码如下:

function test(src){      var s=new ShapeBase();      s.init();      s.show();  }

看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料. 

代码如下:

//静态方法  ShapeBase.StaticDraw = function()  {      alert("method draw is static");  }

2. 实现JS类抽象和继承 面向对象不同的是，这里虚方法不需经过声明，而直接使用了, 并且类也可以被实例化. 

代码如下:

Object.extend = function(destination, source) {      for (property in source) {      destination[property] = source[property];      }      return destination;  }  Object.prototype.extend = function(object) {      return Object.extend.apply(this, [this, object]);  }

接下来我们实现一个继承类Rect, 这里先用一种简单的方法来实现。 

代码如下:

function Rect() { }  Rect.prototype = ShapeBase.prototype; //只这一句就行了  //扩充新的方法  Rect.prototype.add=function() {      alert("Rect add");  }

这种方法不能用于重写,如果改变了show方法, ShapeBase的show也会指向同一函数可能是由于prototype赋值只是简单的改变指向地址. 

Rect.prototype.show=function() {      alert("Rect show");  }

那么执行结果如下: 

function test(){      var s=new ShapeBase();      s.show(); //结果:Rect show      var r=new Rect();      r.show(); //结果:Rect show      r.add();  }

我们再使用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");      }  })