ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承
(1)Ext.define的继承extend
详细实例:
Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ name:'bjsxt' } , constructor:function(config){ var me = this ; me.initConfig(config); } }); //Sub Class 子类 Ext.define('Boy',{ //使用Ext的继承 extend:'Person',//直接继承 config:{ sex:'男', age:20 } }); var b = Ext.create('Boy',{ name:'张三', age:25 }); alert('姓名:'+b.name+'--性别:'+b.sex+'--年龄:'+b.age); });
实例结果:
(2)使用javascript实现类似Ext的继承
实例:
Ext.onReady(function(){ //javascript : prototype(原型) :实现继承 //SupClass var Person = function(name){ this.name = name; }; //alert(Person.prototype.constructor); //原型对象的构造器,默认是当前的类的模板 //SupClass prototype object Person.prototype = { constructor:Person , id:100 }; //SubClass var Boy = function(name,sex,age){ //借用构造函数继承的方式 Person.call(this,name); this.sex = sex ; this.age = age ; }; //实现原型继承: 继承了父类的模板和父类的原型对象 //Boy.prototype = new Person(); //自己实现extend的方法 function myextend(sub , sup){ var F = function() {}, //定义一个空函数做为中转函数 subclassProto, //子类的原型对象 //把父类的原型对象 交给了superclassProto变量 superclassProto = sup.prototype; // 做中转的位置:把父类的原型对象 赋值给了 F这个空函数的原型对象 //进行原型继承 F.prototype = superclassProto; subclassProto = sub.prototype = new F(); subclassProto.constructor = sub; //还原构造器 sub.superclass = superclassProto; //做了一个保存,保存了父类的原型对象 //目的是为了防止你大意了 if (superclassProto.constructor === Object.prototype.constructor) { superclassProto.constructor = sup; } }; myextend(Boy ,Person);//自己实现的继承方法 var b = new Boy('李四','男',25);// /* 注:传统的javascript方法实现继承 * Boy.prototype=new Person('李四'); * var b=new Boy('男',25); */ alert('姓名:'+b.name+'--性别:'+b.sex+'--id:'+b.id+'--年龄:'+b.age); });
实例结果: