分析ext之Panel的实例化进程 _Web前端

分析ext之Panel的实例化过程
首先我们来看下Panel的父类对象
Panel -> Container -> BoxComponent -> Component -> Observable

当我们实例化一个Panel的时候("new Ext.Panel({...})")，他首先执行的是构造函数constructor方法，但由于Panel并没有constructor方法，所以在extend的时候，已经默认使用了父类的构造方法，纵观Panel的父类对象，
发现只有Component和Observable有对应的构造方法，再仔细看看Component的构造方法，发现了一行代码:

Ext.Component.superclass.constructor.call(this);

很明显，在Component的构造方法里又调用了其父类Observable的构造方法，所以这里当子类要实现自己的构造方法时必须去调用父类的构造方法。

在这里我们又发现了为什么每次实例化一个ext组件时都会去执行initComponent方法了，原来是在Component的构造方法里开始调用的。

这里我们分析下initComponent方法的执行顺序:首先是执行了子类的initComponent方法，在子类的initComponent方法中调用了相应父类的initComponent方法，以下一行代码是Panel调用父类的initComponent方法：

Ext.Panel.superclass.initComponent.call(this);

所以我们也发现Component的initComponent方法其实就是一个空函数。

分析到这里，我们可以简单的总结一下Panel的实例化过程(这里假设所有子类都有constructor方法)：
Panel.constructor -> Container.constructor -> BoxComponent.constructor -> Component.constructor -> Observable.constructor -> Panel.initComponent -> Container.initComponent -> BoxComponent.initComponent -> Component.initComponent

1 楼 574673325 2010-06-25

还是不太懂啊，解释的不是很清楚。

2 楼 lym6520 2010-06-25

574673325 写道

还是不太懂啊，解释的不是很清楚。

你可以试着实例化一个Panel，然后按照我上面的思路，一步一步调试进去看看，，

3 楼 574673325 2010-06-25

lym6520 写道

574673325 写道

还是不太懂啊，解释的不是很清楚。

你可以试着实例化一个Panel，然后按照我上面的思路，一步一步调试进去看看，，

那要调多久啊？
你看我理解的对不

貌似constructor 只有组组件有 initComponent 只有那种控件有
显示出来的是initComponent 因为继承与Component
而不显示出来的，如store 是 constructor ，系统内置函数（JS）,也是从基类继承而来

4 楼 lym6520 2010-06-25

574673325 写道

lym6520 写道

574673325 写道

还是不太懂啊，解释的不是很清楚。

你可以试着实例化一个Panel，然后按照我上面的思路，一步一步调试进去看看，，

恩，是的，你可以看下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(Ext.isObject(sp)){
                    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;
            };
        }()

可以好好分析下这段js代码，注意其中的superclass