分析ext之Panel的实例化过程

理解Ext.js组件的实例化过程

最新推荐文章于 2019-03-24 18:42:51 发布

最新推荐文章于 2019-03-24 18:42:51 发布 · 206 阅读

文章标签：

#EXT #prototype #F#

EXT 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨了Ext.js组件的实例化过程，从Panel的父类对象出发，详细解析了构造函数和initComponent方法的作用，揭示了组件实例化顺序及关键步骤。

首先我们来看下Panel的父类对象
[b]Panel -> Container -> BoxComponent -> Component -> Observable[/b]

当我们实例化一个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方法)：
[b]Panel.constructor -> Container.constructor -> BoxComponent.constructor -> Component.constructor -> Observable.constructor -> Panel.initComponent -> Container.initComponent -> BoxComponent.initComponent -> Component.initComponent[/b]