日期:2014-05-16  浏览次数:20412 次

使用Base简化JavaScript继承

? ? ?习惯了Java这种“正统”的面向对象的编程方式,在使用Javascript的基于原型的继承的方式变多少觉得有些别扭,有这种感觉的人应该不少,所以也有了各种继承的解决方法,今天我们介绍的这个是dean.edwards大牛的Base库。

? ? 先看下作者当时创作Base的目的,以下翻译自作者的博客:

  • 我希望可以摆脱prototype的方式,以更加简单的方式创建Class
  • 我希望可以在子类复写的方法里,直接访问被复写的父类方法,像java的super
  • 我希望避免在原型阶段调用类构造函数
  • 我希望可以简单地添加静态(类的)方法和属性
  • 我希望可以不借助在全局函数建立原型链来实现以上目标
  • 我希望可以在不影响Object.prototype的情况下实现以上目标

? ?简化Javascript的OO使用方式Base横空出世,她简洁、优雅,而使用方式却非常简单,Base主要提供了两个实例方法和一个静态方法,下面我们详细讨论Base的使用方法。以下内容主要来自于翻译作者博客的内容。

? ?主要从以下几个方面介绍:

  1. 创建类
  2. 静态方法和属性
  3. 私有属性
  4. 实现单例

? 1、使用Base创建类??

? ?使用Base创建类主要使用Base的静态方法extend,我们来看下具体的代码:

? ?

var Shape = Base.extend({
  constructor:function(name){
     this.name = name;
  },
  
  draw:function(){ 
    console.log(this.name + "draw");
  },

  erase:function(){
     console.log(this.name + 'erased');
  },

  setColor:function(color){
    this.color = color;
  }

});

? ?这样我们就有了一个Shape类,通过constructor定义对象的构造函数,有了这个Shape类之后我们就可以创建对象的实例了:

??

var shape1 = new Shape('shape1');

? ? 使用这种方式,对我们这种骨子里的OO人(也就是作者说的OO?programmer at heart)来说,比起使用Function来定义类感觉舒服多了~~,接下来我们看下继承:

? ??

var Circle = Shape.extend({
   constructor:function(name){
      this.base(name);
   },
  
   draw:function(){
      console.log('Circle ' + this.name + ' draw ' );
   }

});

? ?这儿我们通过继承Shape创建了一个子类Circle,并复写了父类的draw方法,在这儿有两个需要注意的地方:

  • ? ?一是我们直接调用的是Shape的extend方法
  • 在构造函数中,我们调用了th