当前位置:编程学习 > JAVA >>

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

Ext.extend() 体现了程序员非凡的制造轮子的能力。它基于 javascript 古老的对象模型,最大程度地模拟出现代面向对象语言的类型继承的语意。但是在程序界有太多的“与XXX很像”,但是实际上又有很多差别。要想最彻底、最精确地理解 Ext.extend(),最直接(往往也是最有效)的方法就是去读它的源代码。为了达到更好的可读性,我更改了部分变量名称,加上了详细的注释。
 
  1 /**
  2          * <p>Extends one class to create a subclass and optionally overrides members with the passed literal. This method
  3          * also adds the function "override()" to the subclass that can be used to override members of the class.</p>
  4          * For example, to create a subclass of Ext GridPanel:
  5          * <pre><code>
  6 MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
  7     constructor: function(config) {
  8
  9 //      Create configuration for this Grid.
 10         var store = new Ext.data.Store({...});
 11         var colModel = new Ext.grid.ColumnModel({...});
 12
 13 //      Create a new config object containing our computed properties
 14 //      *plus* whatever was in the config parameter.
 15         config = Ext.apply({
 16             store: store,
 17             colModel: colModel
 18         }, config);
 19
 20         MyGridPanel.superclass.constructor.call(this, config);
 21
 22 //      Your postprocessing here
 23     },
 24
 25     yourMethod: function() {
 26         // etc.
 27     }
 28 });
 29 </code></pre>
 30  *
 31  * <p>This function also supports a 3-argument call in which the subclass's constructor is
 32  * passed as an argument. In this form, the parameters are as follows:</p>
 33  * <div class="mdetail-params"><ul>
 34  * <li><code>subclass</code> : Function <div class="sub-desc">The subclass constructor.</div></li>
 35  * <li><code>superclass</code> : Function <div class="sub-desc">The constructor of class being extended</div></li>
 36  * <li><code>overrides</code> : Object <div class="sub-desc">A literal with members which are copied into the subclass's
 37  * prototype, and are therefore shared among all instances of the new class.</div></li>
 38  * </ul></div>
 39  *
 40  * @param {Function} superclass The constructor of class being extended.
 41  * @param {Object} overrides <p>A literal with members which are copied into the subclass's
 42  * prototype, and are therefore shared between all instances of the new class.</p>
 43  * <p>This may contain a special member named <tt><b>constructor</b></tt>. This is used
 44  * to define the constructor of the new class, and is returned. If this property is
 45  * <i>not</i> specified, a constructor is generated and returned which just calls the
 46  * superclass's constructor passing on its parameters.</p>
 47  * <p><b>It is essential that you call the superclass constructor in any provided constructor. See example code.</b></p>
 48  * @return {Function} The subclass constructor from the <code>overrides</code> parameter, or a generated one if not provided.
 49  */
 50 Ext.extend = function(){
 51     // inline overrides
 52     var io = function(o){
 53         for(var m in o){
 54             this[m] = o[m];
 55         }
 56     };
 57     var oc = Object.prototype.constructor; // 如果一个对象的 constructor == oc,说明它是使用类似 { age:22 } 这种语法创建的字面量对象,
 58                                            // 而且没有对constructor属性赋值
 59
 60     return function(subClass, superClass, overrides){
 61         if(typeof superClass == 'object'){
 62             // 如果 superClass 是对象而不是构造函数,就说明是使用的是
 63             // var Cat = Ext.extend(Animal, {
 64             //     say : function() {
 65             //         document.writeln("I'm a cat name " + this.name);
 66             //     }
 67             // });
 68             // 这种方式调用的。也就是说返回值是subClass, subClass 参数其实是 superClass,superClass参数其实是overrides,overrides参数应该被忽略 www.zzzyk.com
 69             overrides = superClass; // 忽略 overrides 参数
 70             superClass = subClass; // subClass 参数其实是 superClass
 71             // subClass 参数将作为将来的返回值。
 72             // 如果 overrides 对象没有自定义构造函数,为其定义一个,并且里面调用父类构造函数;
 73             // 如果 overrides 对象含有自定义构造函数,把overrides的构造函数赋给子类
 74             subClass = overrides.constructor != oc ? overrides.constructor : function(){
 75                     superClass.apply(this, arguments); // 调用父类构造函数(前提是子类构造函数的参数可以比父类少,但是

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,