Ext extend

时间：2010-08-24 来源：hdc1112_cu

记录ext源码阅读第一次尝试~

有人说过，越是对Java用得多的人，越是弄不明白Javascript的OO机制。我果真如此。后来一查，原来这两个OO机制根本就不是同一条道上的，若自以为能按Java那套思维来理解Javascript，你是不可能搞清楚的。Java是class-based OO,而Javascript是prototype-based OO.

我把《javascript高级程序设计》的前7章，抱着一种崇敬神圣的心情仔细阅读了一遍（以前总是抱着一种鄙视Javascript的态度阅读，结果P都没学到）。终于摸清楚了点东西。今天我就可以分析Ext的继承机制的源码了。记录一下这个里程碑似的一天。

extend : function(){
// inline overrides

//hdc: 定义一个函数，这个函数是被下面的闭包用到。

//把o中的属性全部搬到this里来

            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };

//hdc: 记录Object的构造函数，用来判断接下来的sp

//是不是Object直接子类
var oc = Object.prototype.constructor;

//hdc: 我们使用的是这个函数。有两种用法

// Subclass = Ext.extend(SuperClass, {overrides} )

// Ext.extend(Subclass, Superclass, {overrides})

return function(sb, sp, overrides){

//hdc:两种用法就通过这个区分。比如以字面量形式

//表达的对象就在Ext.isObject返回true，而若是

                //Ext.util.Observable，则Ext.isObject返回false
                if(Ext.isObject(sp)){
                    overrides = sp;
                    sp = sb;
                    sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};
                }

//hdc: 之所以加上一个过渡性F

//是因为以后对subclass所有的原型修改不会直接

//反应到父类上。这个在《javascript高级程序设计》有讲。

                //也就是说subclass的原型是F，F的原型是SuperClass
                var F = function(){},
                    sbp,
                    spp = sp.prototype;

                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;

//hdc:有意思的地方。SubClass的实例变量里有个

//Ext自己加上去的属性：superclass，用来

                //引用父类的原型.见下面。
                sb.superclass=spp;
                if(spp.constructor == oc){
                    spp.constructor=sp;
                }

                // hdc: 到这里继承已经做好了，下面是收尾
                sb.override = function(o){
                    Ext.override(sb, o);
                };

//hdc:而SubClass原型里面也有一个superclass

//不过这个superclass是个函数，返回SuperClass

//的原型。所以你得到SubClass的实例subc后，

//既可以subc.superclass来访问父类原型，也可以

                //subc.superclass() 或subc.supr()来访问。
                sbp.superclass = sbp.supr = (function(){
                    return spp;
                });
                sbp.override = io;
                Ext.override(sb, overrides);
                sb.extend = function(o){Ext.extend(sb, o);};
                return sb;
            };
        }(),

总结：心中一定要记住javascript原型链图《javascript高级程序设计》书第六章有，这样有助于理解javascript中的诸如：继承，类变量，实例变量，私有变量等等概念。我记得一个同学说过，牢牢理解并记住半导体的电子扩散图就可以把很多课程学得轻松自如，javascript原型链图就是同样的作用吧。

举个例子：（哎，我也是一知半解）：

Ext.ux.Rating = Ext.extend(Ext.util.Observable, {
    // Configuration options

    starWidth: 16, //在Ext.ux.Rating的原型里，相当于静态变量。

    starsLength:10, //在Ext.ux.Rating的原型里

    split: 1, //在Ext.ux.Rating的原型里

    resetValue: '', //在Ext.ux.Rating的原型里

    resetTitle: "重新选择", //在Ext.ux.Rating的原型里

    defaultSelected: -1,     //在Ext.ux.Rating的原型里

    selected: -1,//在Ext.ux.Rating的原型里

    showTitles: true, //在Ext.ux.Rating的原型里

    HideField_name: 'rate',//在Ext.ux.Rating的原型里

    // Our class constructor

    constructor : function(element, config) {
        Ext.apply(this, config);
        Ext.ux.Rating.superclass.constructor.call(this);
        this.addEvents('change', 'reset');

        this.el = Ext.get(element);

....

有三个实体。一个是Ext.ux.Rating本身，一个是Ext.ux.Rating的原型，一个是Ext.ux.Rating的实例。主要说一下什么东西放在什么里面。
什么东西在Ext.ux.Rating里面？上面代码中的constructor的function就是Ext.ux.Rating，所以Ext.ux.Rating就是一个函数，里面的代码就是constructor里的代码。
什么东西在Ext.ux.Rating的原型里面？（在原型里面的都可以类比成java中类的静态变量，是被所有实例共享的）在Ext.extend(Ext.util.Observable, {})这个{}的东西都放在了Ext.ux.Rating.prototype里面。所有{}里定义的东西都是“类静态变量”。
什么东西在Ext.ux.Rating的实例里面？凡属通过this.形式初始化的属性都在实例里面。
三者的关系 var ins = new Ext.ux.Rating(Ext.getBody(), {}); Ext.ux.Rating == Ext.ux.Rating.prototype.constructor //true ins.__proto__ == Ext.ux.Rating.prototype //true
分清楚三者的关系个人感觉有利于很多东西的理解，比如Ext.util.Observable，实际上就是一个函数，你要把它当类使唤，那么就是一个构造函数。在Ext文档里定义的那么多methods，实际上都是放在Ext.util.Observable的原型里的。凡属配置的东西，都是放在实例里的。