Extjs系列之二 - Extjs继承系统

仍然继续Extjs3.4的三年多的使用总结，既然要谈Extjs，初级基础的入门使用，看所有的Example就可以。当从入门开始真正去开发Extjs的时候，第一步也是最重要的一步，就是要学会使用Extjs的继承，才能开始扩展原有的Extjs的组件。

那么，我们先看看，继承最基础的函数Ext.extend

extend : function(){
            // inline overrides
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            var oc = Object.prototype.constructor;

            return function(sb, sp, overrides){
                if(typeof sp == 'object'){
                    overrides = sp;
                    sp = sb;
                    sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
                }
                var F = function(){},
                    sbp,
                    spp = sp.prototype;

                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;
                sb.superclass=spp;
                if(spp.constructor == oc){
                    spp.constructor=sp;
                }
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.superclass = sbp.supr = (function(){
                    return spp;
                });
                sbp.override = io;
                Ext.override(sb, overrides);
                sb.extend = function(o){return Ext.extend(sb, o);};
                return sb;
            };
        }(),

api说明如下：

( Function superclass, Object overrides ) : Function

Extends one class to create a subclass and optionally overrides members with the passed literal. This method also adds the function "override()" to the subclass that can be used to override members of the class.

This function also supports a 3-argument call in which the subclass's constructor is passed as an argument. In this form, the parameters are as follows:

• subclass : Function
  The subclass constructor.
• superclass : Function
  The constructor of class being extended
• overrides : Object
  A literal with members which are copied into the subclass's prototype, and are therefore shared among all instances of the new class.

Parameters:

• superclass : Function
  The constructor of class being extended.
• overrides : Object

  A literal with members which are copied into the subclass's prototype, and are therefore shared between all instances of the new class.

  This may contain a special member named constructor. This is used to define the constructor of the new class, and is returned. If this property is not specified, a constructor is generated and returned which just calls the superclass's constructor passing on its parameters.

  It is essential that you call the superclass constructor in any provided constructor. See example code.

Returns:

• Function
  The subclass constructor from the <code>overrides</code> parameter, or a generated one if not provided.

解读：

首先化繁为简，三参数和二参数，在这造成了代码阅读的麻烦，其实三参数就是把子类也传进去，两参数 子类=Ext.extend(父类，重写对象) 三参数，Ext.extend(子类，父类，重写对象)

但是必须注意的是两者效果上还是有区别的 ，区别在于 三参数使用了子类的constructor，而两参数使用了父类的constructor。如下实验：

var superC  =function(){
    this.a = 1;
}
superC.prototype.tt = function(){
    alert(this.a);
}
var subC  =function(){
    this.a = 2;
}
Ext.extend(subC,superC,{});  //或者subC = Ext.extend(subC,superC,{});
var d = new subC();
d.tt();
// alert 了 2
subC = Ext.extend(superC,{});
var d = new subC();
d.tt();
//alert 了 1

区分开三参数和二参数的区别，然后理解下

if(typeof sp == 'object'){}

源码分支中的代码，即可不理会这段逻辑，接着往下看：

我们可以看到除了superclass super override这些额外extjs支持函数的添加修正

Extjs采用了原型链的继承模式的修订版，

原型链中调用父类构造函数的过程被new F() 巧妙的绕开，然后再讲构造函数赋给子类。

简单讲就是先生成父类prototype的空函数继承prototype，然后再继承constructor 

其余部分就是原型链继承+赋一些extjs自带函数的修正功能了。 

今天就先浅析到这。。。