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自帶函數的修正功能了。 

今天就先淺析到這。。。