[javascript]图解+注释版 Ext.extend()

Ext.extend() 体现了程序员非凡的制造轮子的能力。它基于 javascript 古老的对象模型，最大程度地模拟出现代面向对象语言的类型继承的语意。但是在程序界有太多的“与XXX很像”，但是实际上又有很多差别。要想最彻底、最精确地理解 Ext.extend()，最直接（往往也是最有效）的方法就是去读它的源代码。为了达到更好的可读性，我更改了部分变量名称，加上了详细的注释。

/**
         * <p>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.</p>
         * For example, to create a subclass of Ext GridPanel:
         * <pre><code>
MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
    constructor: function(config) {

//      Create configuration for this Grid.
        var store = new Ext.data.Store({...});
        var colModel = new Ext.grid.ColumnModel({...});

//      Create a new config object containing our computed properties
//      *plus* whatever was in the config parameter.
        config = Ext.apply({
            store: store,
            colModel: colModel
        }, config);

        MyGridPanel.superclass.constructor.call(this, config);

//      Your postprocessing here
    },

    yourMethod: function() {
        // etc.
    }
});
</code></pre>
 *
 * <p>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:</p>
 * <div class="mdetail-params"><ul>
 * <li><code>subclass</code> : Function <div class="sub-desc">The subclass constructor.</div></li>
 * <li><code>superclass</code> : Function <div class="sub-desc">The constructor of class being extended</div></li>
 * <li><code>overrides</code> : Object <div class="sub-desc">A literal with members which are copied into the subclass's
 * prototype, and are therefore shared among all instances of the new class.</div></li>
 * </ul></div>
 *
 * @param {Function} superclass The constructor of class being extended.
 * @param {Object} overrides <p>A literal with members which are copied into the subclass's
 * prototype, and are therefore shared between all instances of the new class.</p>
 * <p>This may contain a special member named <tt><b>constructor</b></tt>. This is used
 * to define the constructor of the new class, and is returned. If this property is
 * <i>not</i> specified, a constructor is generated and returned which just calls the
 * superclass's constructor passing on its parameters.</p>
 * <p><b>It is essential that you call the superclass constructor in any provided constructor. See example code.</b></p>
 * @return {Function} The subclass constructor from the <code>overrides</code> parameter, or a generated one if not provided.
 */
Ext.extend = function(){
    // inline overrides
    var io = function(o){
        for(var m in o){
            this[m] = o[m];
        }
    };
    var oc = Object.prototype.constructor; // 如果一个对象的 constructor == oc，说明它是使用类似 { age:22 } 这种语法创建的字面量对象，
                                           // 而且没有对constructor属性赋值

    return function(subClass, superClass, overrides){
        if(typeof superClass == 'object'){
            // 如果 superClass 是对象而不是构造函数，就说明是使用的是
            // var Cat = Ext.extend(Animal, {
            //     say : function() {
            //         document.writeln("I'm a cat name " + this.name);
            //     }
            // });
            // 这种方式调用的。也就是说返回值是subClass, subClass 参数其实是 superClass，superClass参数其实是overrides，overrides参数应该被忽略
            overrides = superClass; // 忽略 overrides 参数
            superClass = subClass; // subClass 参数其实是 superClass
            // subClass 参数将作为将来的返回值。
            // 如果 overrides 对象没有自定义构造函数，为其定义一个，并且里面调用父类构造函数；
            // 如果 overrides 对象含有自定义构造函数，把overrides的构造函数赋给子类
            subClass = overrides.constructor != oc ? overrides.constructor : function(){ 
                    superClass.apply(this, arguments); // 调用父类构造函数（前提是子类构造函数的参数可以比父类少，但是顺序要一致）
                };
        }
        
        // 原型式继承。之所以创建一个临时构造函数F，而不是令 subClass.prototype = new SuperClass，
        // 是为了更改子类的prototype的时候不会影响到父类的prototype
        var F = function(){},
            subPrototype, // 子类构造函数的 Prototype
            superPrototype = superClass.prototype; // 父类构造函数的 Prototype 

        F.prototype = superPrototype;
        subPrototype = subClass.prototype = new F();
        subPrototype.constructor=subClass;
        // 只所以没写成 subClass.superclass=superClass，是为了在overrides对象的constructor方法里
        // 可以使用诸如 “MyGridPanel.superclass.constructor.call(this, config)”这种（读起来比较
        // 自然的）写法调用父类构造函数。
        subClass.superclass=superPrototype;
        // 如果 superclass.prototype 是字面量对象，确保 superclass.prototype。constructor 指向 superClass
        if(superPrototype.constructor == oc){
            superPrototype.constructor=superClass;
        }
        // 为子类增加一个override()方法。调用　subClass.override(o) 等价于调用 Ext.override(subClass, o)
        subClass.override = function(o){
            Ext.override(subClass, o);
        };
        // 增加一个名为 superclass() 的实例方法，这样在overrides对象的constructor方法里
        // 就可以使用诸如 “this.superclass().constructor.call(this, config)”来调用父类
        // 构造函数，而且没有依赖子类构造函数的名称。
        subPrototype.superclass = subPrototype.supr = (function(){
            return superPrototype;
        });
        // 为子类增加一个实例方法: override()
        subPrototype.override = io;
        // 将 overrides 对象里的方法复写到 subClass.prototype 中
        Ext.override(subClass, overrides);
        // 为子类增加一个extend()方法。调用　subClass.extend(o); 等价于调用 Ext.extend(subClass, o);
        subClass.extend = function(o){return Ext.extend(subClass, o);};
        return subClass;
    };
}();

下面这张对象图则是执行了 var SubClass = Ext.extend(SuperClass, { someprop : 'some' }) 之后的效果。