Extjs4视频学习日志--define和extend

一、通过Extjs4定义一个类的方法：Ext.define(className,properties,callback);
properties中包含的是这个类的配置信息，如config、extend、say、constructor等；

Ext.define('Person',{
config:{ //配置当前类的属性内容，会自动加上get和set方法
name:' 张三',
age : 19
},
say:function(){//定义一个方法
alert('Person的方法');
},
constructor:function(config){//给当前类添加一个构造器
var me = this;
me.initConfig(config);
}
});


使用这个类：
var P = new Person('李四',28);
alert(p.name);
alert(p.age);
alert(p.getName()); //自动添加了get和set方法，可以直接调用
p.say();




二、Extjs4中实现继承的方法:extend
Ext.define('Boy',{
extend:'Person',//继承父类Person
config:{
sex:'男',
school:'abcSchool'
}
});
var b = Ext.create('Boy',{
name:'小明',
age:18
});
alert(b.name); //继承了父类的属性




三、原始的javascript继承的方式：使用prototype（原型）
1.什么是原型对象？
prototype的目的是为了提供所有实例的对象共享的属性。
function Person(name){
this.name = name;
this.sayName = function(){
alert(this.name);
};
};
var P1 = new Person('aaa');
var P2 = new Person('bbb');
alert(p1.sayName==p2.sayName); //返回false




这里返回的结果是false，因为虽然是同一个类，但是会出现两个Person的模板，因此方法对象是不同的。如果这个类具有大量的实例，会造成性能的浪费。因此将公共的方法和属性放到原型对象中去。
function Person(name){
this.name = name;
};
};
Person.prototype.sayName = function(){ //Person的原型对象，共享sayName方法
alert(this.Name);
};
var P1 = new Person('aaa');
var P2 = new Person('bbb');
alert(p1.sayName==p2.sayName); //返回true
2.javascript通过prototype实现继承
这里Person的原型对象的构造器是指向对象本身，也就是当前类的模板；
var Person = function(name){
this.name = name;
};
这里Person.prototype指向了一个{}，也就是意味着指向了一个对象，所以通过这种方式添加原型对象方法和属性时需要首先将构造器还原为原来的对象。
Person.prototype = {
constructor:Person,//构造器还原为原来的对象构造器
id:100
};
通过一个经典的方法实现继承：让Boy的原型对象指向父类的构造器，实现原型的继承。这样的话子类就继承了父类的模板还有父类的原型对象
var Boy = function(sex,age){
this.age = age;
this.sex = sex;
};
Boy.prototype = new Person();
在新建子类实例时需要如下去做：
Boy.protoytpe = new Person('张3');
var b = new Boy('男','19');
alert(b.name); //会显示 张三
如果想要采用类似 var b = new Boy('里斯','男','19');的方法去直接new出一个新实例，可以如下定义子类：
var Boy = function(name,sex,age){
Person.call(this,name);//借用父类的构造函数方式
this.age = age;
this.sex = sex;
};
call限定了Person构造方法只能在this作用域内，通过借用父类的构造函数实现直接向子类传递父类的属性值。这种继承的方式效率比较低，因为子类每一次需要new出实例的时候需要调用两次父类的模板。
3.Extjs中extend的js实现代码原理：通过一个空函数作中转
下面是按照Extjs源代码编写的一个myExtend函数，用于子类继承父类。


function myextend(sub,sup){
var F = function(){};// 定义了一个空函数作为中转函数
var subclassProto;//子类的原型对象
var superclassProto = sup.prototype;//把父类的原型对象交给了superclassProto

F.prototype=superclassProto;//中转的位置，将父类的原型对象给了空函数F的原型对象
subclassProto = sub.prototype = new F();//自行完成了F的模板和原型对象，而F是空模板
subclassProto.constructor = sub;
sub.superclass = superclassProto;//做了一个保存，保存了父类的原型对象

//目的是为了防止忘记还原父类的构造器
if(superclassProto.constructor===Object.prototype.constructor){
superclassProto.constructor = sup;
}
};


function Person(name){
this.name = name;
};
};
Person.prototype.sayName = function(){ //Person的原型对象，共享sayName方法
alert(this.Name);
};
var P1 = new Person('aaa');
var P2 = new Person('bbb');
alert(p1.sayName==p2.sayName); //返回true


一、通过Extjs4定义一个类的方法：Ext.define(className,properties,callback);
properties中包含的是这个类的配置信息，如config、extend、say、constructor等；

Ext.define('Person',{
config:{ //配置当前类的属性内容，会自动加上get和set方法
name:' 张三',
age : 19
},
say:function(){//定义一个方法
alert('Person的方法');
},
constructor:function(config){//给当前类添加一个构造器
var me = this;
me.initConfig(config);
}
});


使用这个类：
var P = new Person('李四',28);
alert(p.name);
alert(p.age);
alert(p.getName()); //自动添加了get和set方法，可以直接调用
p.say();






二、Extjs4中实现继承的方法:extend
Ext.define('Boy',{
extend:'Person',//继承父类Person
config:{
sex:'男',
school:'abcSchool'
}
});
var b = Ext.create('Boy',{
name:'小明',
age:18
});
alert(b.name); //继承了父类的属性






三、原始的javascript继承的方式：使用prototype（原型）
1.什么是原型对象？
prototype的目的是为了提供所有实例的对象共享的属性。
function Person(name){
this.name = name;
this.sayName = function(){
alert(this.name);
};
};
var P1 = new Person('aaa');
var P2 = new Person('bbb');
alert(p1.sayName==p2.sayName); //返回false




这里返回的结果是false，因为虽然是同一个类，但是会出现两个Person的模板，因此方法对象是不同的。如果这个类具有大量的实例，会造成性能的浪费。因此将公共的方法和属性放到原型对象中去。
function Person(name){
this.name = name;
};
};
Person.prototype.sayName = function(){ //Person的原型对象，共享sayName方法
alert(this.Name);
};
var P1 = new Person('aaa');
var P2 = new Person('bbb');
alert(p1.sayName==p2.sayName); //返回true
2.javascript通过prototype实现继承
这里Person的原型对象的构造器是指向对象本身，也就是当前类的模板；
var Person = function(name){
this.name = name;
};
这里Person.prototype指向了一个{}，也就是意味着指向了一个对象，所以通过这种方式添加原型对象方法和属性时需要首先将构造器还原为原来的对象。
Person.prototype = {
constructor:Person,//构造器还原为原来的对象构造器
id:100
};
通过一个经典的方法实现继承：让Boy的原型对象指向父类的构造器，实现原型的继承。这样的话子类就继承了父类的模板还有父类的原型对象
var Boy = function(sex,age){
this.age = age;
this.sex = sex;
};
Boy.prototype = new Person();
在新建子类实例时需要如下去做：
Boy.protoytpe = new Person('张3');
var b = new Boy('男','19');
alert(b.name); //会显示 张三
如果想要采用类似 var b = new Boy('里斯','男','19');的方法去直接new出一个新实例，可以如下定义子类：
var Boy = function(name,sex,age){
Person.call(this,name);//借用父类的构造函数方式
this.age = age;
this.sex = sex;
};
call限定了Person构造方法只能在this作用域内，通过借用父类的构造函数实现直接向子类传递父类的属性值。这种继承的方式效率比较低，因为子类每一次需要new出实例的时候需要调用两次父类的模板。
3.Extjs中extend的js实现代码原理：通过一个空函数作中转
下面是按照Extjs源代码编写的一个myExtend函数，用于子类继承父类。


function myextend(sub,sup){
var F = function(){};// 定义了一个空函数作为中转函数
var subclassProto;//子类的原型对象
var superclassProto = sup.prototype;//把父类的原型对象交给了superclassProto

F.prototype=superclassProto;//中转的位置，将父类的原型对象给了空函数F的原型对象
subclassProto = sub.prototype = new F();//自行完成了F的模板和原型对象，而F是空模板
subclassProto.constructor = sub;
sub.superclass = superclassProto;//做了一个保存，保存了父类的原型对象

//目的是为了防止忘记还原父类的构造器
if(superclassProto.constructor===Object.prototype.constructor){
superclassProto.constructor = sup;
}
};