ext extend 解说

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

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

•Crab = function(){
•    this.leg = 10;
•};
• 
•Crab.prototype.say = function(){alert('we hava '+this.leg+' legs')};
• 
•var crabObj = new Crab();
• 
•crabObj.say();//运行出来的结果就是 'we have 10 legs'
引出一种类似与面向对象的设计模式

•Crab = function(){//类的定义形式！！
•    this.leg = 10;//成员变量！！
•    //成员变量都写在这里
•};
• 
•Crab.prototype = {
•    say : function(){alert('we hava '+this.leg+' legs');}
•    //成员方法都写这里
•};
• 
•var crabObj = new Crab();
• 
•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最最普通的类的定义方式了，请接着看第二节《一个简单的继承》

Ext源码分析源码分析之Ext的继承模式解说——第二节、一个简单的继承
有了上一节的基础，我们这一节来模拟一个简单的继承

•Crab = function(){
•    this.leg = 10;
•};
• 
•Crab.prototype.say = function(){alert('we hava '+this.leg+' legs')};
• 
•GenCrab = function(){//螃蟹进化成人，变成蟹将了，只有2条腿了
•    this.leg = 2;
•}
• 
•function extend(child,father){//定义出一个继承函数，有2个参数，子类，父类
•    child.prototype = father.prototype;
•}
• 
•extend(GenCrab,Crab);//这样一来，蟹将也有say的方法了
• 
•gCrab = new GenCrab();
• 
•gCrab.say();//执行出来 we hava 2 legs
怎么样，蟹将已经将螃蟹的方法继承下来了吧？那如果要将父类的属性也继承下来呢？我想到2个方法：
第一、把父类的属性写入prototype中，如Crab.prototype.leg = 10
第二、GenCrab.prototype = new Crab();不知道你能不能看懂，呵呵，估计网上都没有人这样用过，但这样子写能把属性和方法全部继承，其中的奥秘，请您自己思考下

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

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

•function extend(child,father,override){//定义出一个继承函数，有2个参数，子类，父类,重载对象
•    child.prototype = father.prototype;
•   
•    for(var m in override){//将重载对象里面所有的东西（这里说的东西，无非就是属性和方法）都拿出来赋给子类，作为子类的属性或者方法
•        child.prototype[m] = override[m];
•    }
•}
这样一来，又有了新的规范了，把类的属性都往override里面写，把方法仍旧往prototype里面写，我下面举个例子

•function extend(child,father,override){//定义出一个继承函数，有2个参数，子类，父类,重载对象
•    child.prototype = father.prototype;
•   
•    for(var m in override){//将重载对象里面所有的东西（这里说的东西，无非就是属性和方法）都拿出来赋给子类，作为子类的属性或者方法
•        child.prototype[m] = override[m];
•    }
•}
• 
•Crab = function(){
•    //这里不写属性了
•};
• 
•extend(Crab,Object,{leg:10,eye:2});//让Crab继承绝对父类Object,并把属性写到这里来，因为螃蟹和蟹将都有2只眼睛，所以蟹将一会将继承这个属性
• 
•Crab.prototype.say = function(){alert('we hava '+this.leg+' legs, '+this.eye+' eyes')};//方法仍旧在这里定义
• 
•GenCrab = function(){
•}
• 
•extend(GenCrab,Crab,{leg:2});//这里，眼睛和脚都从父类那里继承过来了，但蟹将只有2只脚，所以我们只需要覆盖脚这个属性就可以了
• 
•gCrab = new GenCrab();
• 
•gCrab.say();// we have 2 legs， 2 eyes
好了，属性和方法都已经可以继承了，Ext.extend也已经差不多成型了，请接着看第三节《Ext.extend三部曲》

Ext源码分析源码分析之Ext的继承模式解说——第三节、分析Ext.extend
这一节我们贴出Ext.extend的源代码来分析

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

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



转自http://sanlin0523.blog.sohu.com/91093270.html