`
隆中青年
  • 浏览: 8524 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
wakedemo
社区版块
存档分类
最新评论

ExtJs中继承的实现与理解—extend

ext 
阅读更多

引自linda0209

EXTprototypeJavaScriptF#IE

以下总结参考网络上资源

 

extend (Object subclass,Object superclass,[Object overrides] : Object)  

extend (Object subclass,Object superclass,[Object overrides] : Object)

 
第一个参数：子类
第二个参数：父类
第三个参数：要覆盖的属性。
这里需要强调一下，子类继承下来的是父类中通过superclass.prototype方式定义的属性（包括用此方法定义的函数）,而不继承superclass中的定义的属性和方法，如果子类中的方法名与父类中相同则会覆盖。例子

    父类

Js代码 复制代码 收藏代码
  1. BaseClass = function() {   
  2.  f1 = function() {   
  3.   alert("f1 in base");   
  4.  },   
  5.  f2 = function() {   
  6.   alert("f2 in base");   
  7.  }   
  8. }   
  9. BaseClass.prototype = {   
  10.  f3 : function() {   
  11.   alert("f3 in base");   
  12.  },   
  13.  f4 : function() {   
  14.   alert("f4 in base");   
  15.  }   
  16. };  
BaseClass = function() {
 f1 = function() {
  alert("f1 in base");
 },
 f2 = function() {
  alert("f2 in base");
 }
}
BaseClass.prototype = {
 f3 : function() {
  alert("f3 in base");
 },
 f4 : function() {
  alert("f4 in base");
 }
};

 
    子类

Js代码 复制代码 收藏代码
  1. ChildClass = function() {   
  2. }   
  3. // 继承   
  4. Ext.extend(ChildClass, BaseClass, {   
  5.    f1 : function() {   
  6.     alert("f1 in child");   
  7.    },   
  8.    f3 : function() {   
  9.     alert("f3 in child");   
  10.    }   
  11.   });  
ChildClass = function() {
}
// 继承
Ext.extend(ChildClass, BaseClass, {
   f1 : function() {
    alert("f1 in child");
   },
   f3 : function() {
    alert("f3 in child");
   }
  });

 
    实例化

Js代码 复制代码 收藏代码
  1. var b = new ChildClass();   
  2. b.f1();// 调用子类中的实现   
  3. //b.f2();// 会报错，因为子类中没有该方法，并且父类中定义的f2是内部变量，作用域只有在内部可见（闭包）   
  4. b.f3();// 继承并覆盖，调用子类的中的实现   
  5. b.f4();// 继承，调用父类的中的实现   
var b = new ChildClass();
b.f1();// 调用子类中的实现
//b.f2();// 会报错，因为子类中没有该方法，并且父类中定义的f2是内部变量，作用域只有在内部可见（闭包）
b.f3();// 继承并覆盖，调用子类的中的实现
b.f4();// 继承，调用父类的中的实现

 

     补充：通过对 JavaScript 的原型继承的了解，可以知道，实例变量的优先级是高于 prototype 的，参见我之前写的文章javascript中静态方法、实例方法、内部方法和原型的一点见解 又如以下例子：
    父类

Js代码 复制代码 收藏代码
  1. BaseClass = function() {   
  2.  this.f1 = function() {   
  3.   alert("f1 in base");   
  4.  },   
  5.  this.f2 = function() {   
  6.   alert("f2 in base");   
  7.  }   
  8. }  
BaseClass = function() {
 this.f1 = function() {
  alert("f1 in base");
 },
 this.f2 = function() {
  alert("f2 in base");
 }
}

 
    子类

Js代码 复制代码 收藏代码
  1. ChildClass = function() {   
  2.  ChildClass.superclass.constructor.call( this );    
  3. }   
  4. // 继承   
  5. Ext.extend(ChildClass, BaseClass, {   
  6.    f1 : function() {   
  7.     alert("f1 in child");   
  8.    },   
  9.    f3 : function() {   
  10.     alert("f3 in child");   
  11.    }   
  12.   });  
ChildClass = function() {
 ChildClass.superclass.constructor.call( this ); 
}
// 继承
Ext.extend(ChildClass, BaseClass, {
   f1 : function() {
    alert("f1 in child");
   },
   f3 : function() {
    alert("f3 in child");
   }
  });

 
    实例化

Js代码 复制代码 收藏代码
  1. var b = new ChildClass();   
  2. b.f1();// 调用父类中的实现，注意不会调用子类中的实现   
  3. b.f2();// 调用父类中的实现   
  4. b.f3();// 调用子类中的实现   
var b = new ChildClass();
b.f1();// 调用父类中的实现，注意不会调用子类中的实现
b.f2();// 调用父类中的实现
b.f3();// 调用子类中的实现

 

    分析：在 ChildClass.superclass.constructor.call(this); 这句上， BaseClass 的 f1 成了 ChildClass 的变量，而不是 ChildClass.prototype 。由于实例变量的优先级是高于 prototype 的，所以上面的这个代码是达不到 override 的功能的。


    了解了以上知识，下面讲解一下extend的实现，先看最简单的继承，实现原理，1、将子类的原型prototype设置为父类的一个实例，也就是说把父类的实例赋值给子类的prototype（这样子类就有了父类原型的所有成员），2、重新将子类原型的构造器设置为子类自己，也就是把子类赋值给子类原型的构造器。
    以下代码把 subFn 的 prototype 设置为 superFn 的一个实例，然后设置 subFn.prototype.constructor 为 subFn。

Js代码 复制代码 收藏代码
  1. function Extend(subFn, superFn) {   
  2.  subFn.prototype = new superFn();   
  3.  subFn.prototype.constructor = subFn;   
  4. }   
  5.   
  6. //父类   
  7. function Animal() {   
  8.  this.say1 = function() {   
  9.   alert("Animal");   
  10.  }   
  11. }   
  12. //子类   
  13. function Tiger() {   
  14.  this.say2 = function() {   
  15.   alert("Tiger");   
  16.  }   
  17.   
  18. }   
  19. //继承应用   
  20. Extend(Tiger, Animal);   
  21. var tiger = new Tiger();   
  22. tiger.say1();// "Animal"   
  23. tiger.say2();// "Tiger"   
function Extend(subFn, superFn) {
 subFn.prototype = new superFn();
 subFn.prototype.constructor = subFn;
}

//父类
function Animal() {
 this.say1 = function() {
  alert("Animal");
 }
}
//子类
function Tiger() {
 this.say2 = function() {
  alert("Tiger");
 }

}
//继承应用
Extend(Tiger, Animal);
var tiger = new Tiger();
tiger.say1();// "Animal"
tiger.say2();// "Tiger"

 

     可以看到最简单的继承只做了两件事情，一是把 subFn 的 prototype 设置为 superFn 的一个实例，然后设置 subFn . prototype . constructor 为 subFn 。


Ext.extend 的代码


     Ext.extend 函数中用到了 Ext.override ，这个函数把第二个参数中的所有对象复制到第一个对象的 prototype 中。首先贴上 Ext.override 函数的代码：

Js代码 复制代码 收藏代码
  1. /**  
  2.          * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.  
  3.          * Usage:<pre><code>  
  4. Ext.override(MyClass, {  
  5.     newMethod1: function(){  
  6.         // etc.  
  7.     },  
  8.     newMethod2: function(foo){  
  9.         // etc.  
  10.     }  
  11. });  
  12. </code></pre>  
  13.          * @param {Object} origclass The class to override  
  14.          * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal  
  15.          * containing one or more methods.  
  16.          * @method override  
  17.          */  
  18.         override : function(origclass, overrides){   
  19.             if(overrides){   
  20.                 var p = origclass.prototype;   
  21.                 Ext.apply(p, overrides);   
  22.                 if(Ext.isIE && overrides.hasOwnProperty('toString')){   
  23.                     p.toString = overrides.toString;   
  24.                 }   
  25.             }   
  26.         }  
/**
         * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
         * Usage:<pre><code>
Ext.override(MyClass, {
    newMethod1: function(){
        // etc.
    },
    newMethod2: function(foo){
        // etc.
    }
});
</code></pre>
         * @param {Object} origclass The class to override
         * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal
         * containing one or more methods.
         * @method override
         */
        override : function(origclass, overrides){
            if(overrides){
                var p = origclass.prototype;
                Ext.apply(p, overrides);
                if(Ext.isIE && overrides.hasOwnProperty('toString')){
                    p.toString = overrides.toString;
                }
            }
        }

 

    以下是 Ext.extend的代码

Js代码 复制代码 收藏代码
  1. /**   
  2.   * 继承，并由传递的值决定是否覆盖原对象的属性   
  3.   * 返回的对象中也增加了 override() 函数，用于覆盖实例的成员   
  4.   * @param { Object } subclass 子类，用于继承（该类继承了父类所有属性，并最终返回该对象）   
  5.   * @param { Object } superclass 父类，被继承   
  6.   * @param { Object } overrides （该参数可选） 一个对象，将它本身携带的属性对子类进行覆盖   
  7.   * @method extend   
  8.   */    
  9.         extend : function(){   
  10.             // inline overrides   
  11.             var io = function(o){   
  12.                 for(var m in o){   
  13.                     this[m] = o[m];   
  14.                 }   
  15.             };   
  16.             var oc = Object.prototype.constructor;   
  17.   
  18.             //匿名函数实现   
  19.             //三个参数sb、sp、overrides分别代表subClass(子类)、superClass(父类)及覆盖子类的配置参数   
  20.             return function(sb, sp, overrides){   
  21.                 if(typeof sp == 'object'){//传递两个参数时superClass, overrides   
  22.                     overrides = sp;   
  23.                     sp = sb;   
  24.                     sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);};   
  25.                 }   
  26.                 var F = function(){},//定义一空函数，用来赋给其对象时清空该对象   
  27.                     sbp,   
  28.                     spp = sp.prototype;   
  29.   
  30.                 F.prototype = spp;   
  31.                 // 注意下面两句就是JavaScript中最简单的继承实现。   
  32.                 sbp = sb.prototype = new F();//清空   
  33.                 sbp.constructor=sb;   
  34.                 // 添加了 superclass 属性指向 superclass 的 prototype   
  35.                 sb.superclass=spp;   
  36.                 if(spp.constructor == oc){   
  37.                     spp.constructor=sp;   
  38.                 }   
  39.                 // 为 subClass 和 subClassPrototype 添加 override 函数   
  40.                 sb.override = function(o){   
  41.                     Ext.override(sb, o);   
  42.                 };   
  43.                 sbp.superclass = sbp.supr = (function(){   
  44.                     return spp;   
  45.                 });   
  46.                 sbp.override = io;   
  47.                 // 覆盖掉子类 prototype 中的属性   
  48.                 Ext.override(sb, overrides);   
  49.                 //为子类加上类方法：extend   
  50.                 sb.extend = function(o){return Ext.extend(sb, o);};   
  51.                 return sb;   
  52.             };   
  53.         }(),  
/** 
  * 继承，并由传递的值决定是否覆盖原对象的属性 
  * 返回的对象中也增加了 override() 函数，用于覆盖实例的成员 
  * @param { Object } subclass 子类，用于继承（该类继承了父类所有属性，并最终返回该对象） 
  * @param { Object } superclass 父类，被继承 
  * @param { Object } overrides （该参数可选） 一个对象，将它本身携带的属性对子类进行覆盖 
  * @method extend 
  */ 
        extend : function(){
            // inline overrides
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            var oc = Object.prototype.constructor;

            //匿名函数实现
            //三个参数sb、sp、overrides分别代表subClass(子类)、superClass(父类)及覆盖子类的配置参数
            return function(sb, sp, overrides){
                if(typeof sp == 'object'){//传递两个参数时superClass, overrides
                    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;
                // 注意下面两句就是JavaScript中最简单的继承实现。
                sbp = sb.prototype = new F();//清空
                sbp.constructor=sb;
                // 添加了 superclass 属性指向 superclass 的 prototype
                sb.superclass=spp;
                if(spp.constructor == oc){
                    spp.constructor=sp;
                }
                // 为 subClass 和 subClassPrototype 添加 override 函数
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.superclass = sbp.supr = (function(){
                    return spp;
                });
                sbp.override = io;
                // 覆盖掉子类 prototype 中的属性
                Ext.override(sb, overrides);
                //为子类加上类方法：extend
                sb.extend = function(o){return Ext.extend(sb, o);};
                return sb;
            };
        }(),

 

    代码中进行了太多的简写，看起来不是特别方便，把代码中的简写补全，代码如下：

Js代码 复制代码 收藏代码
  1. extend : function(){   
  2.             // inline overrides   
  3.             var inlineOverride = function(o){   
  4.                 for(var m in o){   
  5.                     this[m] = o[m];   
  6.                 }   
  7.             };   
  8.             var oc = Object.prototype.constructor;   
  9.   
  10.             return function(subFn, superFn, overrides){   
  11.                 if(typeof superFn == 'object'){   
  12.                  // 如果 superFn 也是对象的话（一般来说 superFn 这里放的是父类的构造函数），那么第三个参数 overrides 参数相当于被忽略掉   
  13.                     overrides = superFn;   
  14.                     superFn = subFn;   
  15.                     //重新定义了函数 subFn    
  16.                     subFn = overrides.constructor != oc ? overrides.constructor : function(){superFn.apply(this, arguments);};   
  17.                 }   
  18.                 var F = function(){},   
  19.                     subFnPrototype,   
  20.                     superFnPrototype = superFn.prototype;   
  21.   
  22.                 F.prototype = superFnPrototype;   
  23.                 subFnPrototype = subFn.prototype = new F();   
  24.                 subFnPrototype.constructor=subFn;   
  25.                 subFn.superclass=superFnPrototype;   
  26.                 if(superFnPrototype.constructor == oc){   
  27.                     superFnPrototype.constructor=superFn;   
  28.                 }   
  29.                 subFn.override = function(o){   
  30.                     Ext.override(subFn, o);   
  31.                 };   
  32.                 subFnPrototype.superclass = subFnPrototype.supr = (function(){   
  33.                     return superFnPrototype;   
  34.                 });   
  35.                 subFnPrototype.override = inlineOverride;   
  36.                 Ext.override(subFn, overrides);   
  37.                 subFn.extend = function(o){return Ext.extend(subFn, o);};   
  38.                 return subFn;   
  39.             };   
  40.         }()  
extend : function(){
            // inline overrides
            var inlineOverride = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            var oc = Object.prototype.constructor;

            return function(subFn, superFn, overrides){
                if(typeof superFn == 'object'){
                 // 如果 superFn 也是对象的话（一般来说 superFn 这里放的是父类的构造函数），那么第三个参数 overrides 参数相当于被忽略掉
                    overrides = superFn;
                    superFn = subFn;
                    //重新定义了函数 subFn 
                    subFn = overrides.constructor != oc ? overrides.constructor : function(){superFn.apply(this, arguments);};
                }
                var F = function(){},
                    subFnPrototype,
                    superFnPrototype = superFn.prototype;

                F.prototype = superFnPrototype;
                subFnPrototype = subFn.prototype = new F();
                subFnPrototype.constructor=subFn;
                subFn.superclass=superFnPrototype;
                if(superFnPrototype.constructor == oc){
                    superFnPrototype.constructor=superFn;
                }
                subFn.override = function(o){
                    Ext.override(subFn, o);
                };
                subFnPrototype.superclass = subFnPrototype.supr = (function(){
                    return superFnPrototype;
                });
                subFnPrototype.override = inlineOverride;
                Ext.override(subFn, overrides);
                subFn.extend = function(o){return Ext.extend(subFn, o);};
                return subFn;
            };
        }()

 

     代码中糅合了传两个参数和三个参数的实现，理解起来不容易明白，我们可以把代码拆分为两个参数和三个参数的实现，如下两个参数的 Ext.extend 代码

 

Js代码 复制代码 收藏代码
  1. function extend() {   
  2.  // inline overrides   
  3.  var inlineOverride = function(o) {   
  4.   for (var m in o) {   
  5.    this[m] = o[m];   
  6.   }   
  7.  };   
  8.  return function(superFn, overrides) {   
  9.   // 定义返回的子类   
  10.   var subFn=overrides.constructor != Object.prototype.constructor ? overrides.constructor : function(){superFn.apply(this, arguments);};   
  11.   //以下为中间变量，或叫过程变量   
  12.   var F = function() {   
  13.   
  14.   }, subFnPrototype, superFnPrototype = superFn.prototype;   
  15.   
  16.   F.prototype = superFnPrototype;//F中含有了所有 superFn.prototype 中的功能   
  17.   
  18.   // 注意下面两句就是JavaScript中最简单的继承实现。   
  19.   subFnPrototype = subFn.prototype = new F();   
  20.   subFnPrototype.constructor = subFn;   
  21.   //改变父类实例对象中的constructor，使其指向自身的构建函数   
  22.   if(superFnPrototype.constructor == oc){   
  23.         superFnPrototype.constructor=superFn;   
  24.   }   
  25.   // 添加了 superclass 属性指向 superFn 的 prototype   
  26.   subFn.superclass = superFnPrototype;   
  27.   
  28.   // 为 subFn 和 subFnPrototype 添加 override 函数   
  29.   subFn.override = function(obj) {   
  30.    Ext.override(subFn, obj);   
  31.   };   
  32.   subFnPrototype.override = inlineOverride;   
  33.      
  34.   // 覆盖掉子类 prototype 中的属性   
  35.   Ext.override(subFn, overrides);   
  36.   //为子类加上类方法：extend   
  37.   subFn.extend=function(o){   
  38.    Ext.extend(subFn,o);   
  39.   }   
  40.   return subFn;   
  41.  };   
  42.   
  43. };  
function extend() {
 // inline overrides
 var inlineOverride = function(o) {
  for (var m in o) {
   this[m] = o[m];
  }
 };
 return function(superFn, overrides) {
  // 定义返回的子类
  var subFn=overrides.constructor != Object.prototype.constructor ? overrides.constructor : function(){superFn.apply(this, arguments);};
  //以下为中间变量，或叫过程变量
  var F = function() {

  }, subFnPrototype, superFnPrototype = superFn.prototype;

  F.prototype = superFnPrototype;//F中含有了所有 superFn.prototype 中的功能

  // 注意下面两句就是JavaScript中最简单的继承实现。
  subFnPrototype = subFn.prototype = new F();
  subFnPrototype.constructor = subFn;
  //改变父类实例对象中的constructor，使其指向自身的构建函数
  if(superFnPrototype.constructor == oc){
        superFnPrototype.constructor=superFn;
  }
  // 添加了 superclass 属性指向 superFn 的 prototype
  subFn.superclass = superFnPrototype;

  // 为 subFn 和 subFnPrototype 添加 override 函数
  subFn.override = function(obj) {
   Ext.override(subFn, obj);
  };
  subFnPrototype.override = inlineOverride;
  
  // 覆盖掉子类 prototype 中的属性
  Ext.override(subFn, overrides);
  //为子类加上类方法：extend
  subFn.extend=function(o){
   Ext.extend(subFn,o);
  }
  return subFn;
 };

};

 

     从注释中可以看到，做的工作很简单，只是定义一个 subFn 函数，这个函数中会调用 superFn 函数。定义了 subFn 以后，就使用上面的最简单的继承方式实现继承。然后为 subFn 和 subFn 的 prototype 添加了一个 override 函数。最后的 Ext.override(subFn, overrides); 把 overrides 中的函数写入 subFn 的 prototype 中。

     以下是传两个参数的简单例子

 

Js代码 复制代码 收藏代码
  1. var BaseClass = function(){};   
  2. BaseClass.prototype = {   
  3.     method1 : function(){   
  4.         alert('father class');   
  5.     }   
  6. };   
  7. //两个参数的继承   
  8. var subClass = Ext.extend(BaseClass,{   
  9.     method2 : function(){   
  10.         alert('sub class');   
  11.     }   
  12. });   
  13.   
  14. var sub = new subClass();   
  15. sub.method1();   
  16. sub.method2();  
	var BaseClass = function(){};
	BaseClass.prototype = {
		method1 : function(){
			alert('father class');
		}
	};
	//两个参数的继承
	var subClass = Ext.extend(BaseClass,{
		method2 : function(){
			alert('sub class');
		}
	});
	
	var sub = new subClass();
	sub.method1();
	sub.method2();
 

    三个参数的 Ext.extend 代码

Js代码 复制代码 收藏代码
  1. function extend() {   
  2.  // inline overrides   
  3.  var inlineOverride = function(o) {   
  4.   for (var m in o) {   
  5.    this[m] = o[m];   
  6.   }   
  7.  };   
  8.  return function(subFn, superFn, overrides) {   
  9.         // 以下为中间变量，或叫过程变量   
  10.   var F = function() {   
  11.   
  12.   }, subFnPrototype, superFnPrototype = superFn.prototype;   
  13.   
  14.   F.prototype = superFnPrototype;// F中含有了所有 superFn.prototype 中的功能   
  15.   
  16.   // 注意下面两句就是JavaScript中最简单的继承实现。   
  17.   subFnPrototype = subFn.prototype = new F();   
  18.   subFnPrototype.constructor = subFn;   
  19.   
  20.   // 添加了 superclass 属性指向 superFn 的 Prototype   
  21.   subFn.superclass = superFnPrototype;   
  22.   //改变父类实例对象中的constructor，使其指向自身的构建函数   
  23.   if(superFnPrototype.constructor == oc){   
  24.         superFnPrototype.constructor=superFn;   
  25.   }    
  26.   // 为 subFn 和 subFnPrototype 添加 override 函数   
  27.   subFn.override = function(obj) {   
  28.    Ext.override(subFn, obj);   
  29.   };   
  30.   subFnPrototype.override = inlineOverride;   
  31.   // 覆盖掉子类 prototype 中的属性   
  32.   Ext.override(subFn, overrides);   
  33.   // 为子类加上类方法：extend   
  34.   subFn.extend = function(o) {   
  35.    Ext.extend(subFn, o);   
  36.   }   
  37.   return subFn;   
  38.  };   
  39. };  
function extend() {
 // inline overrides
 var inlineOverride = function(o) {
  for (var m in o) {
   this[m] = o[m];
  }
 };
 return function(subFn, superFn, overrides) {
        // 以下为中间变量，或叫过程变量
  var F = function() {

  }, subFnPrototype, superFnPrototype = superFn.prototype;

  F.prototype = superFnPrototype;// F中含有了所有 superFn.prototype 中的功能

  // 注意下面两句就是JavaScript中最简单的继承实现。
  subFnPrototype = subFn.prototype = new F();
  subFnPrototype.constructor = subFn;

  // 添加了 superclass 属性指向 superFn 的 Prototype
  subFn.superclass = superFnPrototype;
  //改变父类实例对象中的constructor，使其指向自身的构建函数
  if(superFnPrototype.constructor == oc){
        superFnPrototype.constructor=superFn;
  } 
  // 为 subFn 和 subFnPrototype 添加 override 函数
  subFn.override = function(obj) {
   Ext.override(subFn, obj);
  };
  subFnPrototype.override = inlineOverride;
  // 覆盖掉子类 prototype 中的属性
  Ext.override(subFn, overrides);
  // 为子类加上类方法：extend
  subFn.extend = function(o) {
   Ext.extend(subFn, o);
  }
  return subFn;
 };
};

 
      过程与两个参数的时候相差无几，只是两个参数的时候， subFn 时重新定义的一个 function ，而三个参数的时候，这个步骤就省略了。

 

      以下是传三个参数的例子

Js代码 复制代码 收藏代码
  1. var BaseClass = function(){};   
  2. BaseClass.prototype = {   
  3.     method1 : function(){   
  4.     alert('father class');   
  5.     }   
  6. };   
  7.   
  8. //三个参数的继承   
  9. var subClass = function(){}   
  10. Ext.extend(subClass,BaseClass,{   
  11.    method2 : function(){   
  12.     alert('sub class');   
  13.    }   
  14. });   
  15.   
  16. var sub = new subClass();   
  17. sub.method1();   
  18. sub.method2();  
	var BaseClass = function(){};
	BaseClass.prototype = {
	    method1 : function(){
		alert('father class');
	    }
	};
	
	//三个参数的继承
	var subClass = function(){}
	Ext.extend(subClass,BaseClass,{
	   method2 : function(){
		alert('sub class');
	   }
	});
	
	var sub = new subClass();
	sub.method1();
	sub.method2();
 


      这样大家就对这个函数很明白了吧，也可以知道 Ext.extend 的继承只会覆写构造函数 prototype 中的对象，使用的时候需要多加注意。

分享到：
| ExtJs源码分析与学习—ExtJs源码结构
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    无废话ExtJs 系列教程十八[继承：Extend]

    继承在ExtJS中的实现主要基于`Ext.extend()`方法，这个方法是ExtJS提供的一个静态方法，它允许一个类（子类）继承另一个类（父类）的所有属性和方法。通过`Ext.extend()`，我们可以定义新的类，同时保留和扩展已存在...

    ExtJS的extend（Ext Designer的使用）

    这在JavaScript中实现了类的继承，使得子类可以继承父类的所有属性和方法。例如，如果你想要创建一个新的表单字段类，你可以这样定义： ```javascript Ext.define('MyApp.MyField', { extend: 'Ext.form.field....

    轻松搞定Extjs 带目录

    - **类的定义**: Extjs中的类继承于JavaScript原生类，通过Ext.extend来定义。这是Extjs实现面向对象编程的基础。 - **命名空间**: 命名空间在Extjs中用于组织和管理代码，避免变量和函数名的冲突。 #### 3. Extjs ...

    EXtJS学习 EXtJS学习

    EXTJS 学习：深入理解 `Ext.extend` 及其在继承中的陷阱 EXTJS 是一个强大的 JavaScript 框架，用于构建富客户端应用程序。它提供了丰富的组件库和强大的数据绑定机制。在 EXTJS 中，`Ext.extend` 是核心的继承机制...

    Extjs Grid 扩展实例

    在JavaScript（ExtJS基于的脚本语言）中，通过原型链实现类的继承。在ExtJS中，我们可以通过`Ext.extend()`或使用`Ext.define()`方法创建一个新的类，该类继承自现有类并可以添加新的属性和方法。对于ExtJS Grid，...

    ExtJs 带清空功能的日期组件

    在ExtJs框架中，日期组件（DateField）是用于用户输入日期的常见控件。然而，标准的ExtJs DateField并未内置清空日期的功能，这可能会在某些应用场景中造成不便。为了解决这个问题，我们需要自定义一个扩展，为日期...

    ExtJs-API中的一些重要的详解文档

    6. **Ext.extend()**: 这是实现JavaScript面向对象继承的关键方法。它创建了一个子类（subclass），继承自父类（superclass），并可以添加额外的方法或属性（通过`overrides`参数）。 7. **Ext.namespace()**: 创建...

    extJS 一些简单实例

    在"extJS 一些简单实例"这个主题中，我们将探讨ExtJS的基础知识以及如何通过一些简单的示例来理解和运用它。 首先，ExtJS的核心是它的组件模型。这些组件包括按钮、表格、窗口、菜单等，可以构建出复杂的用户界面。...

    Extjs 性能优化 High Performance ExtJs

    本文旨在针对具有一定 JavaScript 基础（理解面向对象、继承、作用域等概念）并且熟悉 Extjs 框架（了解组件间继承关系）的开发者，提供一些关于如何对 Extjs 的前台架构进行性能优化的方法。 #### 二、缓存 缓存...

    extjs中dateField日期精确到时分秒的扩展控件

    在EXTJS中，我们可以使用`Ext.extend`方法或者`Ext.define`方法来创建一个新类。这个新类应该包含我们对日期时间选择的定制逻辑，如增加小时、分钟和秒的选择器。 2. **配置项和样式**： 我们需要添加一些新的配置...

    ExtJs培训sample_for面向对象设计

    2. **继承**：ExtJS支持类之间的继承，这使得我们可以创建一个基础类，并在其他类中扩展其功能。通过`extend`属性，子类可以继承父类的所有属性和方法。例如，`Ext.extend()`或者在`Ext.define()`中设置`extend`选项...

    Extjs 重写Panel添加click事件

    总结，重写Ext JS的Panel并添加click事件是一个常见的需求，通过继承Panel并使用事件监听机制，我们可以轻松实现这一功能。这不仅增强了Panel的功能，也使我们的应用更加灵活和可定制。记得在编写代码时，根据实际...

    Extjs中文教程

    - 通过`Ext.extend`和`Ext.override`方法可以实现类的继承和重写。 - **配置(config)选项** - 配置选项是Extjs组件的核心，用于设置组件的各种属性和行为。 - 通常在组件构造函数中通过传递一个配置对象来指定...

    jquery 插件开发 extjs中的extend用法小结

    标题所涵盖的知识点为：jquery 插件开发及 extjs 中的 extend 用法总结。在这个标题下，我们将详细解释在 jQuery 插件开发中 extend 方法的使用，以及 Ext JS 框架中 extend 方法的特点和区别。这个知识点对于前端...

    EXTJS学习笔记，自己学习的过程，不多但是实用

    - 继承：`Ext.extend()`方法实现类的继承，例如`Ext.roy.Student`继承自`Ext.roy.Person`，并增加`Role`属性和`setRole`方法。 4. **事件处理**： - `Ext.util.Observable`类提供事件机制，可以声明并监听自定义...

    extjs自定义控件

    ExtJS是一款强大的JavaScript框架，主要用于构建富客户端应用。在ExtJS中，自定义控件（或组件）是扩展其功能和灵活性的关键。...理解并熟练掌握这些概念和技术，将有助于开发出高效、灵活且富有特色的ExtJS应用。

    ext面向对象和继承

    EXTJS中的继承是通过`Ext.extend()`或`Ext.createByAlias()`实现的。继承允许子类重写或扩展父类的方法和属性。例如，我们可以创建一个新的按钮类，继承自EXTJS的`Ext.button.Button`： ```javascript MyButton = ...

    EXT dojochina Ext类继承.rar

    1. **Ext.extend()**：这是EXTJS中最基础的类继承方法。通过调用`Ext.extend(baseClass, subClass, overrides)`，可以创建一个新的子类，其中`baseClass`是父类，`subClass`是新创建的子类名称，`overrides`是一个...

    ExtJs.doc 扩展介绍 英文

    `Ext.extend()` 是 ExtJS 提供的面向对象继承机制，允许你创建新的类或者扩展已有的类。在 Ext2.x 及更早版本中，它是扩展内置类的主要方式。即使在 Ext2.x 之后，理解 `Ext.extend()` 仍然是很重要的，因为它在许多...

    Extjs学习笔记有用

    `Ext.extend` 是ExtJS中实现类继承的关键方法。它允许一个类（子类）继承另一个类（父类）的属性和方法。子类可以覆盖父类的某些属性或方法。例如，创建一个名为 `b` 的类，继承自 `a` 类，`b` 类可以重写 `...

Magicbox
Global site tag (gtag.js) - Google Analytics