- 浏览: 315409 次
- 性别:
文章分类
最新评论
-
i042416:
分析在哪?
angular分析 -
何盆盆:
你好,请问您这是Extjs3还是Extjs4
ExtJs源码分析与学习—ExtJs事件机制(一) -
124753561:
引用引用引用引用引用[u][u][u][u][i][i][i] ...
Subvision SVN 服务端与客户端的安装 -
谷超:
请问一下例子中itext是什么版本的?
利用iText生成word文档例子参考 -
geosmart:
正好要用到执行字符串中方法,学习了
java中利用反射机制实现调用给定为字符串的方法名
以下总结参考网络上资源
Ext中实现类的继承
extend (Object subclass,Object superclass,[Object overrides] : Object)
第一个参数:子类
第二个参数:父类
第三个参数:要覆盖的属性。
这里需要强调一下,子类继承下来的是父类中通过superclass.prototype方式定义的属性(包括用此方法定义的函数),而不继承superclass中的定义的属性和方法,如果子类中的方法名与父类中相同则会覆盖。例子
父类
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"); } };
子类
ChildClass = function() { } // 继承 Ext.extend(ChildClass, BaseClass, { f1 : function() { alert("f1 in child"); }, f3 : function() { alert("f3 in child"); } });
实例化
var b = new ChildClass(); b.f1();// 调用子类中的实现 //b.f2();// 会报错,因为子类中没有该方法,并且父类中定义的f2是内部变量,作用域只有在内部可见(闭包) b.f3();// 继承并覆盖,调用子类的中的实现 b.f4();// 继承,调用父类的中的实现
补充:通过对 JavaScript 的原型继承的了解,可以知道,实例变量的优先级是高于 prototype 的,参见我之前写的文章javascript中静态方法、实例方法、内部方法和原型的一点见解
又如以下例子:
父类
BaseClass = function() { this.f1 = function() { alert("f1 in base"); }, this.f2 = function() { alert("f2 in base"); } }
子类
ChildClass = function() { ChildClass.superclass.constructor.call( this ); } // 继承 Ext.extend(ChildClass, BaseClass, { f1 : function() { alert("f1 in child"); }, f3 : function() { alert("f3 in child"); } });
实例化
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。
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 函数的代码:
/** * 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的代码
/** * 继承,并由传递的值决定是否覆盖原对象的属性 * 返回的对象中也增加了 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; }; }(),
代码中进行了太多的简写,看起来不是特别方便,把代码中的简写补全,代码如下:
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 代码
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 中。
以下是传两个参数的简单例子
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 代码
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 ,而三个参数的时候,这个步骤就省略了。
以下是传三个参数的例子
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源码分析与学习—Ext.ToolTip应用
2011-12-29 14:18 1796源码待分析,先粘一例子备用 // ... -
ExtJs源码分析与学习—遮罩层
2011-09-06 16:49 4733类Ext.LoadMask ... -
ExtJs源码分析与学习—Ext.UpdateManager
2011-09-06 16:12 2135如果想让html页面中任意元素自动局部刷新,而不是整 ... -
ExtJs源码分析与学习—ExtJs元素Element(六)
2011-06-08 10:41 1754批量操作元素Ext.CompositeElementLite ... -
ExtJs源码分析与学习—ExtJs元素Element(五)
2011-06-07 17:35 1890元素的查询Ext.DomQuery 该 ... -
ExtJs源码分析与学习—ExtJs元素Element(四)
2011-06-07 17:17 2941元素的操作Ext.DomHelper ... -
ExtJs源码分析与学习—ExtJs元素Element(三)
2011-06-07 17:06 1005Ext.Element扩展 通过Ex ... -
ExtJs源码分析与学习—ExtJs元素Element(二)
2011-06-07 16:42 2581元素操作核心类Ext.Elemen ... -
ExtJs源码分析与学习—ExtJs元素Element(一)
2011-06-07 15:47 2080从这一节开始 ... -
ExtJs源码分析与学习—工具类Ext.util.TextMetrics
2011-06-07 15:11 2001Ext提供了一个 ... -
ExtJs源码分析与学习—ExtJs事件机制(六)
2011-06-07 11:25 1441最后把涉及到Ext事件的相关类图贴到这里 ... -
ExtJs源码分析与学习—ExtJs事件机制(五)
2011-06-07 11:15 3013最近一直忙着做产品,所以好久没有写文章了,下面接着 ... -
Ext 组件操作总结——会不断完善
2011-05-10 16:36 26511、Ext.Component 该组件在渲染的时候会默认的 ... -
ExtJs表单几种验证与扩展
2011-05-03 16:26 4855首先说明一下表单验证与其相关的一些设置 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(四)
2011-03-19 23:37 5270ExtJs组件事件——ExtJs自定义事件的处理 ... -
ExtJs源码分析与学习—ExtJs事件机制(三)
2011-03-15 20:20 3171这篇讲ExtJs对事件的管理和调用 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(二)
2011-03-15 20:15 2519在ExtJs源码分析与学习—ExtJs事件机制( ... -
ExtJs源码分析与学习—ExtJs事件机制(一)
2011-03-15 18:53 2748前面讲了ExtJs核 ... -
ExtJs源码分析与学习—ExtJs核心代码扩展
2011-01-20 19:16 2042前面三篇文章参考作者snandy总结了Ext中核心 ... -
ExtJs源码分析与学习—ExtJs核心代码(三)
2011-01-17 17:29 2123Ext为javascript的一些对象进行了扩展,主要有Str ...
相关推荐
Extjs中使用extend(js继承) 的代码,抄<深入浅出Extjs>书
extjs组建继承结构图 让你了解extjs的整个架构!
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
此压缩包中完全能实现的功能是在extjs中让本地照片预览,并且将地址传递给java后台,将图片文件以blob的形式存储到oracle数据库,并且可以默认将数据库中的数据第一次加载在预览框里(也就是从数据库中读出blob数据...
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219592
Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。
Extjs 下拉菜单实现拼音输入进行检索
extjs实现动态树
Extjs 中文API文档,有对Extjs相关API的中文说明
storebar extjs通过store实现toolbar
ExtJS6 viewModel继承 viewModel各级控件继承演示,动态改变viewModel 详见文章解释 https://blog.csdn.net/ZYD45/article/details/87867454
ExtJS实现Excel导出,最常用的可以解决大部分问题
该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能
extjs中的多选列表,extjs中没有实现多选列表。这是别人作的封装。我找到的。
ExtJS 表格的功能实现,包括单元格编辑,数据的获取。
extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例
extjs的默认皮肤很好看 但是我们还可以变换样式切换其他皮肤 1 直接添加其他css文件换肤 好多皮肤上网就可以收到的 如皮肤文件:xtheme olive zip下载 把皮肤文件解压 把css文件 如xtheme olive css 拷贝到...
基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的企业应用系统通用平台的设计与实现.docx基于SpringBoot+ExtJS的...
Extjs 组件继承结构图,亲手整理,可用于Extjs学习时快速理清组件之间的关系