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

Ext js面向对象的特性

以前学Ext js的时候没有注意到 它面向对象的特性,今天不小心看到一篇文章提到了,于是我去总结了一下。

1、支持命名空间(Java里用的是包的概念)
?Ext.namespace("Ext.ling"); //这句话相当于声明了一个命名空间

2、支持类实例属性
?Ext.apply(Ext.ling.Person.prototype,{
??name:"lingyibin"
?}); //给Person类添加了name属性,并赋了值。

这里跟大家讲另一个东西,就是{ }和[ ]在js应用中的区别。

前者表示一个类,后者表示一个数组。因为类里面都有属性名,所以前者的格式一般都是

{property1:value1, property2:value2 ……}

3、类的实例方法
?Ext.namespace("Ext.ling");
?Ext.ling.Person = Ext.emptyFn;
?Ext.apply(Ext.ling.Person.prototype,{
??name:"",
??sex:"",
??print:function(){
???alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
??}
?});
?使用:
?var person = new Ext.ling.Person();
?person.name = "ling";
?person.sex = "male";
?person.print();
4、类的静态方法
?Ext.ling.Person.print = function(_name,_sex){
??var person = new Ext.ling.Person();
??person.name = _name;
??person.sex = _sex;
??person.print();
?}
5、构造方法
?Ext.ling.Person = function(_cfg){
??Ext.apply(this,_cfg);
?}?Ext.ling.Person.print = function(_name,_sex){
??var person = new Ext.ling.Person({name:_name,sex:_sex});
??person.print();
?}
?Ext.apply(Ext.ling.Person.prototype,{
??print:function(){
???alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
??}
?});
?使用:
????????? var p?= new Ext.ling.Person({name:"ling",sex:"男"});
????????? p.print();

6、类继承

Ext.namespace("Ext.ling");

Ext.ling.Person = function(_cfg){ //父类
??? Ext.apply(this,_cfg);
};

Ext.apply(Ext.ling.Person.prototype, {
??? job:"Jobless",
??? print:function(){
??????? alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name, this.sex,this.job));
??? }
});
?Ext.ling.Teacher = function(_cfg){?//子类
??? Ext.apply(this,_cfg);
?}
?Ext.extend(Ext.ling.Teacher,Ext.ling.Person, {job:"老师"}); //继承了父类,并给job赋了值

7、重写
?Ext.extend(Ext.ling.Teacher,Ext.ling.person,{
??print:function(){
???alert("这个方法被我改写了!");
??}
?});

?

最后,(个人看法)我学得写js的话用Intellij IDEA比较方便,它的提示和报错功能很强。