首页 / EXTJS / extjs extends

extjs extends

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了extjs extends，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8576字，纯文字阅读大概需要13分钟。

内容图文

Ext中实现类的继承

Js代码
  1. 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. };


子类

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. });


实例化

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


子类

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. });


实例化

Js代码
  1. var b = new ChildClass();
  2. b.f1();// 调用父类中的实现，注意不会调用子类中的实现
  3. b.f2();// 调用父类中的实现
  4. 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. }
  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. }
  18. }
  19. //继承应用
  20. Extend(Tiger, Animal);
  21. var tiger = new Tiger();
  22. tiger.say1();// "Animal"
  23. 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. }

以下是 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;
  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;
  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. }(),

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

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;
  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;
  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. }()

代码中糅合了传两个参数和三个参数的实现，理解起来不容易明白，我们可以把代码拆分为两个参数和三个参数的实现，如下两个参数的 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 () {
  14. }, subFnPrototype, superFnPrototype = superFn.prototype;
  16. F.prototype = superFnPrototype;//F中含有了所有 superFn.prototype 中的功能
  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;
  28. // 为 subFn 和 subFnPrototype 添加 override 函数
  29. subFn.override = function(obj) {
  30. Ext.override(subFn, obj);
  31. };
  32. subFnPrototype.override = inlineOverride;
  34. // 覆盖掉子类 prototype 中的属性
  35. Ext.override(subFn, overrides);
  36. //为子类加上类方法：extend
  37. subFn.extend=function(o){
  38. Ext.extend(subFn,o);
  39. }
  40. return subFn;
  41. };
  43. };

从注释中可以看到，做的工作很简单，只是定义一个 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. });
  14. var sub = new subClass();
  15. sub.method1();
  16. 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 () {
  12. }, subFnPrototype, superFnPrototype = superFn.prototype;
  14. F.prototype = superFnPrototype;// F中含有了所有 superFn.prototype 中的功能
  16. // 注意下面两句就是JavaScript中最简单的继承实现。
  17. subFnPrototype = subFn.prototype = new F();
  18. subFnPrototype.constructor = subFn;
  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. };


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

以下是传三个参数的例子

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


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

原文：http://my.oschina.net/u/1398304/blog/307157

内容总结

以上是互联网集市为您收集整理的extjs extends全部内容，希望文章能够帮你解决extjs extends所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1203458.html

来源：【匿名】