? ? ?习惯了Java这种“正统”的面向对象的编程方式,在使用Javascript的基于原型的继承的方式变多少觉得有些别扭,有这种感觉的人应该不少,所以也有了各种继承的解决方法,今天我们介绍的这个是dean.edwards大牛的Base库。
? ? 先看下作者当时创作Base的目的,以下翻译自作者的博客:
- 我希望可以摆脱prototype的方式,以更加简单的方式创建Class
- 我希望可以在子类复写的方法里,直接访问被复写的父类方法,像java的super
- 我希望避免在原型阶段调用类的构造函数
- 我希望可以简单地添加静态(类的)方法和属性
- 我希望可以不借助在全局函数建立原型链来实现以上目标
- 我希望可以在不影响Object.prototype的情况下实现以上目标
? ?为简化Javascript的OO使用方式Base横空出世,她简洁、优雅,而使用方式却非常简单,Base主要提供了两个实例方法和一个静态方法,下面我们详细讨论Base的使用方法。以下内容主要来自于翻译作者博客的内容。
? ?主要从以下几个方面介绍:
- 创建类
- 静态方法和属性
- 私有属性
- 实现单例
? 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方法
- 在构造函数中,我们调用了this.base来调用父类的构造函数,当然base方法可以出现在任何复写后的方法中使用,用来调用被复写的方法
? 2、添加静态方法和属性
? 使用Base添加静态方法和属性非常简单,extend方法可以接收两个参数,第一个参数定义的是实例方法和属性,第二参数就是用来定义静态方法和属性的,我们来看下具体的代码,我们为Shape添加一个静态属性:
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; } },{ PI : 3.14 });
?
? 这样就为Shape类添加了一个静态属性,可以直接使用Shape.PI进行访问。
? 3、私有属性
? 下面我们来看下如何使用Base实现私有属性的访问,看下实例代码,一般你可以使用如下方式:
??
function Circle(radius) { this.getCircumference = function() { return 2 * Math.PI * radius; }; };
? ?但是也可以使用Base实现:
??
var Circle = Shape.extend({ constructor: function(radius) { this.extend({ getCircumference: function() { return 2 * Math.PI * radius; } }); } });
?
? 4、单例模式
? 使用Base实现单例方式非常简单,只需要将构造函数定义为null就可以了,代码如下:
??
var Math = Base.extend({ constructor: null, PI: 3.14, sqr: function(number) { return number * number; } });
?
?最后是base方法使用的一些注意事项:
? 1、如果你定义名称为init的类方法(不是一个实例方法),在创建类时会自动调用
?2、在原型阶段构造函数不会被调用
?