Ext源码分析源码分析之Ext的继承模式解说

第一节、类的定义

 

将Ext的extend继承，我大不算费很大的口舌来解释，因为真的很难表达，什么原型啦，构造函数啦等等拗口的词汇反而不会帮助我们理解，最通俗易懂的莫过于例子了。下面的例子都是模仿Ext的写法来写的，非常正轨，都是本人精心斟酌过的，是一种非常好的设计模式，希望大家既然来看了，就耐心品味下，呵呵，欢迎留言交流

下面这个例子我不打算解释，请您自己思考下

1.    Crab = function(){
2.        this.leg = 10;
3.    };
4.     
5.    Crab.prototype.say = function(){alert('we hava '+this.leg+'legs')};
6.     
7.    var crabObj = new Crab();
8.     
9.    crabObj.say();//运行出来的结果就是 'we have 10 legs'

引出一种类似与面向对象的设计模式

 

1.    Crab = function(){//类的定义形式！！
2.        this.leg = 10;//成员变量！！
3.        //成员变量都写在这里
4.    };
5.     
6.    Crab.prototype = {
7.        say : function(){alert('we hava '+this.leg+' legs');}
8.       //成员方法都写这里
9.     };
10.     
11.    var crabObj = new Crab();
12.     
13.    crabObj.say();

如果你以前玩过C++，那么一定非常熟悉了。这种类的定义方式是Ext的基础所在。
var crabObj = new Crab();其实执行了2个步骤！
第一：执行this.leg = 10，其结果就是crabObj.leg = 10
第二：将Crab.prototype这个对象给了crabObj,好比crabObj.say = Crab.prototype.say;
说白了，第一步交接成员变量，第二步交接成员方法。

还有些朋友喜欢这样定义类
function Crab(){
this.leg = 10;
}
当然也是可以的

好了，这就是Ext最最普通的类的定义方式了，请接着看第二节《一个简单的继承》

 

第二节、一个简单的继承

有了上一节的基础，我们这一节来模拟一个简单的继承

 

1. Crab = function(){
2.     this.leg = 10;
3. };
5. Crab.prototype.say = function(){alert('we hava '+this.leg+' legs')};
7. GenCrab = function(){//螃蟹进化成人，变成蟹将了，只有2条腿了
8.     this.leg = 2;
9. }
11. function extend(child,father){//定义出一个继承函数，有2个参数，子类，父类
12.     child.prototype = father.prototype;
13. }
15. extend(GenCrab,Crab);//这样一来，蟹将也有say的方法了
17. gCrab = new GenCrab();
19. gCrab.say();//执行出来 we hava 2 legs

怎么样，蟹将已经将螃蟹的方法继承下来了吧？那如果要将父类的属性也继承下来呢？我想到2个方法：
第一、把父类的属性写入prototype中，如Crab.prototype.leg = 10
第二、GenCrab.prototype = new Crab();不知道你能不能看懂，呵呵，估计网上都没有人这样用过，但这样子写能把属性和方法全部继承，其中的奥秘，请您自己思考下

好了，我们进入Ext的主题，那么Ext是怎么将属性继承下来的呢？答案是第一种方法。如果您仔细看过我写的第一篇文章，您一定会说，规范约定，只有方法才写在prototype中的呀，怎么能把属性也写入呢？岂不是把清楚的事情又弄复杂了？

聪明的Ext团队，的的确确是用第一种方法的，只是在写法上稍稍改变了下

 

1. function extend(child,father,override){//定义出一个继承函数，有2个参数，子类，父类,重载对象
2.     child.prototype = father.prototype;
3.     
4.     for(var m in override){//将重载对象里面所有的东西（这里说的东西，无非就是属性和方法）都拿出来赋给子类，作为子类的属性或者方法
5.         child.prototype[m] = override[m];
6.     }
7. }

这样一来，又有了新的规范了，把类的属性都往override里面写，把方法仍旧往prototype里面写，我下面举个例子

 

1. function extend(child,father,override){//定义出一个继承函数，有2个参数，子类，父类,重载对象
2.     child.prototype = father.prototype;
3.     
4.     for(var m in override){//将重载对象里面所有的东西（这里说的东西，无非就是属性和方法）都拿出来赋给子类，作为子类的属性或者方法
5.         child.prototype[m] = override[m];
6.     }
7. }
9. Crab = function(){
10.     //这里不写属性了
11. };
13. extend(Crab,Object,{leg:10,eye:2});//让Crab继承绝对父类Object,并把属性写到这里来，因为螃蟹和蟹将都有2只眼睛，所以蟹将一会将继承这个属性
15. Crab.prototype.say = function(){alert('we hava '+this.leg+' legs, '+this.eye+' eyes')};//方法仍旧在这里定义
17. GenCrab = function(){
18. }
20. extend(GenCrab,Crab,{leg:2});//这里，眼睛和脚都从父类那里继承过来了，但蟹将只有2只脚，所以我们只需要覆盖脚这个属性就可以了
22. gCrab = new GenCrab();
24. gCrab.say();// we have 2 legs， 2 eyes

好了，属性和方法都已经可以继承了，Ext.extend也已经差不多成型了，请接着看第三节《Ext.extend三部曲》

 

 

第三节、分析Ext.extend

 

这一节我们贴出Ext.extend的源代码来分析

 

1. extend : function(){
2.             // 内联函数，不懂？就是将这个方法编译后放入内存中
3.             var io = function(o){
4.                 for(var m in o){
5.                     this[m] = o[m];
6.                 }
7.             };
8.             return function(sb, sp, overrides){
9.                 if(typeof sp == 'object'){//如果子类还不存在，只有父类和一些属性，那么就调用这2个参数，来构造一个子类，这里面的第三步非常神奇，很难解释的清楚，大致意思就是构造出这么匿名类，并将父类的构造方法借给它用用，嘿嘿，这么解释还不明白就留言吧
10.                     overrides = sp;
11.                     sp = sb;
12.                     sb = function(){sp.apply(this, arguments);};
13.                 }
14.                 var F = function(){}, sbp, spp = sp.prototype;//sb代表子类，sbp代表子类prototype，sp代表父类，spp代表父类prototype
15.                 F.prototype = spp;
16.                 sbp = sb.prototype = new F();//其实就是child.prototype = father.prototype，new F（）看不懂看第二节
17.                 sbp.constructor=sb;//这2步一会儿细说
18.                 sb.superclass=spp;
19.                 if(spp.constructor == Object.prototype.constructor){//这个分支也不可以不管
20.                     spp.constructor=sp;
21.                 }
22.                 sb.override = function(o){//给子类赋予一个override方法
23.                     Ext.override(sb, o);
24.                 };
25.                 sbp.override = io;//给子类的对象赋予override方法
26.                 Ext.override(sb, overrides);//将overrides里面的东西，全部赋予子类的prototype里面，不懂看第二节
27.                 return sb;//将这个全新包装的子类返回
28.             };
29.         }(),

我们来详细说说 sbp.constructor=sb 这个东东，为什么要写这么一步呢？因为child.prototype = father.prototype这步执行好后，会把child的constructor给抹掉，所以要把它重新指回来，那么为什么一定要配上这个 constructor呢？网上有很多解释，但大都是一抄例子了事，搞了半天还是不明白有什么用处，其实constructor只是类的一个引用，当我们把一个对象调用来调用去，我们都忘记这个对象是由谁创建的时候，它就派上用场了，obj.constructor返回的就是创建obj的那个类了，明白了吧？其次，constructor还有一个方法就是反向调用，比如这样写obj.constructor.call(this)，意思是用obj去调用 obj的构造方法。恩恩……非常难理解，我打算后面的章节好好介绍它的用途。

sb.superclass=spp呢？superclass又是什么？这个是Ext无中生有的一个属性而已，让子类知道它的父类是谁而已，一个标记，呵呵

综上，三部曲已经出来了吧？
第一、将属性和方法都继承下来
第二、恢复constructor，建立superclass指针
第三、将子类的属性写入到子类里

看完这3节，我想你对Ext.extend不仅有了了解，而且应该体会到Ext的编码规范,通常定义一个类，有这个三步
第一：定义Child类
Child = function(){
}
第二：Ext.extend(Child,Father,{定义Child的属性})
第三：Child.prototyp = {定义Child的方法};

或者可以只用父类和属性直接构造子类
Child = Ext.extend(Father,{});
Ext更多用这个方法，并且将方法也写入{}里面，这个方法较之上面的，多了一个神奇的第三步，见上面的代码，期间的奥秘就在于，new Child（）的时候，委托谁来构造，上面是Child自己来构造，而下面这种调用方式是委托Father来构造

您照着这样的思路去看源代码定会轻松不少的:)