Thinking in ExtJs 面向对象思想(2)

二：运用构造函数

面向对象的语言必然要支持构造方法。

运用构造方法之后，ext-bingyu.js的代码将变为如下所示。

//定义命名空间
Ext.namespace("Ext.bingyu");
//定义一个类
Ext.bingyu.Person = function(_cfg){
 Ext.apply(this,_cfg);
 };
//添加类的原型
Ext.apply(Ext.bingyu.Person.prototype,{
 //类实例方法
 say:function(){
 return String.format("姓名：{0},性别:{1}",this.name,this.sex);
 }
 });
//添加类的静态方法
Ext.bingyu.Person.say = function(_name,_sex){
 var _person = new Ext.bingyu.Person({name:_name,sex:_sex});
 return _person.say();
 };

 

对比之前的代码很容易发现两者的区别，后者去掉了之前定义在Ext.apply内的实例属性，由外部接收的参数属性将自动赋值给该对象，从而可以调 用。

调用方式依然如上。

三：类继承和类实例方法重写

Ext也模拟了类继承机制，通过Ext.extend来实现。在ext-bingyu.js中加入如下代码。

//再定义一个类
Ext.bingyu.shengFen = function(_cfg){
 Ext.apply(this,_cfg);
 };
//继承Person并添加新的属性和重写方法
Ext.extend(Ext.bingyu.shengFen,
 Ext.bingyu.Person,{
 job:'软件工程师',
 say:function(){
 return String.format("{0}是一个{1}",this.name,this.job);
 }
 });

 

可以看到Ext.bingyu.shengFen类继承了Ext.bingyu.Person类，同时重写了它的say的实例方法，实现不同的功 能。

比如在页面的js代码中进行如下调用。

var p = new Ext.bingyu.Person({name:"bingyu",sex:"男"});
alert(p.say());
var t = new Ext.bingyu.shengFen({name:"bingyu",sex:"男"});
alert(t.say());

 

页面先弹出对话框：

姓名：bingyu,性别：男

然后弹出对话框：

bingyu是一个软件工程师

四：支持命名空间别名和类别名

Ext也支持命名空间别名和类别名。这点就不多说了，比如
By = Ext.bingyu;By就等效于Ext.bingyu了。

注意，命名空间别名首字母必须大写，后面小写。

PN = Ext.bingyu.Person;那么PN就相当于Ext.bingyu.Person了

要注意的是，类别名必须全部大写，以便和命名空间别名相区别。