`
lorry1113
  • 浏览: 263146 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext源码分析源码分析之Ext的继承模式解说——第三节、分析Ext.extend

    博客分类:
  • ext
阅读更多
这一节我们贴出Ext.extend的源代码来分析
1.extend : function(){
2.            // 内联函数,不懂?就是将这个方法编译后放入内存中
3.            var io = function(o){
4.                for(var m in o){
5.                    this[m] = o[m];
6.                }
7.            };
8.            return function(sb, sp, overrides){
9.                if(typeof sp == ‘object‘){//如果子类还不存在,只有父类和一些属性,那么就调用这2个参数,来构造一个子类,这里面的第三步非常神奇,很难解释的清楚,大致意思就是构造出这么匿名类,并将父类的构造方法借给它用用,嘿嘿,这么解释还不明白就留言吧
10.                    overrides = sp;
11.                    sp = sb;
12.                    sb = function(){sp.apply(this, arguments);};
13.                }
14.                var F = function(){}, sbp, spp = sp.prototype;//sb代表子类,sbp代表子类prototype,sp代表父类,spp代表父类prototype
15.                F.prototype = spp;
16.                sbp = sb.prototype = new F();//其实就是child.prototype = father.prototype,new F()看不懂看第二节
17.                sbp.constructor=sb;//这2步一会儿细说
18.                sb.superclass=spp;
19.                if(spp.constructor == Object.prototype.constructor){//这个分支也不可以不管
20.                    spp.constructor=sp;
21.                }
22.                sb.override = function(o){//给子类赋予一个override方法
23.                    Ext.override(sb, o);
24.                };
25.                sbp.override = io;//给子类的对象赋予override方法
26.                Ext.override(sb, overrides);//将overrides里面的东西,全部赋予子类的prototype里面,不懂看第二节
27.                return sb;//将这个全新包装的子类返回
28.            };
29.        }(),
我们来详细说说 sbp.constructor=sb 这个东东,为什么要写这么一步呢?因为child.prototype = father.prototype这步执行好后,会把child的constructor给抹掉,所以要把它重新指回来,那么为什么一定要配上这个constructor呢?网上有很多解释,但大都是一抄例子了事,搞了半天还是不明白有什么用处,其实constructor只是类的一个引用,当我们把一个对象调用来调用去,我们都忘记这个对象是由谁创建的时候,它就派上用场了,obj.constructor返回的就是创建obj的那个类了,明白了吧?其次,constructor还有一个方法就是反向调用,比如这样写obj.constructor.call(this),意思是用obj去调用obj的构造方法。恩恩……非常难理解,我打算后面的章节好好介绍它的用途。

sb.superclass=spp呢?superclass又是什么?这个是Ext无中生有的一个属性而已,让子类知道它的父类是谁而已,一个标记,呵呵

综上,三部曲已经出来了吧?
第一、将属性和方法都继承下来
第二、恢复constructor,建立superclass指针
第三、将子类的属性写入到子类里

看完这3节,我想你对Ext.extend不仅有了了解,而且应该体会到Ext的编码规范,通常定义一个类,有这个三步
第一:定义Child类
Child = function(){
}
第二:Ext.extend(Child,Father,{定义Child的属性})
第三:Child.prototyp = {定义Child的方法};

或者可以只用父类和属性直接构造子类
Child = Ext.extend(Father,{});
Ext更多用这个方法,并且将方法也写入{}里面,这个方法较之上面的,多了一个神奇的第三步,见上面的代码,期间的奥秘就在于,new Child()的时候,委托谁来构造,上面是Child自己来构造,而下面这种调用方式是委托Father来构造

您照着这样的思路去看源代码定会轻松不少的:)
分享到:
评论

相关推荐

    Ext.Store的获取方法

    在Ext.js中,`Ext.Store`是用来管理数据的类,它通常与各种UI组件(如Grid、ComboBox等)关联,用于存储和检索数据。然而,获取`Ext.Store`的方式并不像获取其他Ext组件那样直接,因为Store并不是一个具有可视界面的...

    jquery.validate.extend.js

    jquery.validate.extend.js

    Ext继承分析

    在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...

    Extjs 继承Ext.data.Store不起作用原因分析及解决

    关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....

    Ext Js权威指南(.zip.001

    第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / 80 3.2.3 在ie 8或ie 9中调试 / 83 3.3 在chrome中调试...

    ext多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...

    Ext.data.Store 读取XML属性值

    extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] }); var store = Ext.create('Ext.data.Store', { model: 'MyModel', proxy: { type: 'ajax', reader: { type: 'xml', record: 'item' // XML...

    原生js实现jquery $.extend方法

    原生js实现jquery $.extend方法 通过遍历对象属性来实现

    EXT dojochina Ext类静态方法.rar

    3. **常用EXT类静态方法**: - `Ext.create()`: 这是EXT中最常用的静态方法之一,用于创建类的实例。你可以指定类名和配置选项,例如`Ext.create('Ext.window.Window', {title: 'Hello World'})`将创建一个新的窗口...

    underscore.extend与$.extend实例比较分析

    3. `deepCopy`:可选参数,用于深度复制对象(默认为浅复制)。 示例: ```javascript var target = {a: 1}; var source1 = {b: 2}; var source2 = {c: 3}; $.extend(target, source1, source2); console.log...

    Ext.ux.UploadDialog

    Most configuration options are inherited from Ext.Window (see ExtJs docs). The added ones are: url - the url where to post uploaded files. base_params - additional post params (default to {}). ...

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    3. **使用`miframe.js`插件**:从提供的文件名`miframe.js`来看,这可能是一个专门处理IFrame高度的插件。安装并引用该插件后,可以简化处理IFrame高度的工作。 ```javascript // 引入miframe.js Ext.onReady...

    EXT dojochina Ext方法重写.rar

    EXT dojochina Ext方法重写是一个关于EXT.js框架中函数重写的专题。EXT.js是一个流行的JavaScript库,用于构建富客户端应用,它提供了丰富的组件、布局管理和数据绑定机制。在EXT.js中,方法重写是一种常见的实践,...

    EXT dojochina Ext类继承.rar

    在EXTJS中,类继承是其核心特性之一,它允许开发者创建复杂的组件和应用架构,通过继承来重用代码并扩展功能。 在EXTJS中,类系统基于MVC(Model-View-Controller)设计模式,提供了丰富的组件和布局管理。类继承...

    Ext一些方法的重写

    `Ext.extend()` 是`Ext`库中的一个核心函数,它用于创建类的继承链。在JavaScript这种没有类的语言中,`Ext.extend()` 提供了面向对象编程的模拟。当我们想要自定义一个新类,并希望它继承自另一个已有类时,可以...

    jquery $.fn.extend

    `$.fn.extend`是jQuery库中的一个核心方法,主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数,从而实现对DOM元素的操作或添加新的功能。在jQuery中,`$.fn`实际上是`$.prototype`的一个...

    Ext继承和扩展

    然而,`Ext`库提供了一个更优雅、更易于理解和维护的方式来处理继承,这包括`Ext.extend()`方法和`Ext.create()`函数。 ### `Ext.extend()` `Ext.extend()`是`Ext`库中用于创建子类的核心方法。它接受三个参数:...

    Ext.js核心函数详解.docx

    3. `Ext.id( [Mixed el], [String prefix] )`: 这个函数返回一个全局唯一的ID字符串。如果没有提供`el`,它会生成一个新的ID;如果提供了一个DOM元素、ID或者`Ext.Element`对象,它会为该元素生成ID并返回。`prefix`...

    精通JS脚本之ExtJS框架.part1.rar

    14.1 利用Ext.extend实现继承 14.2 与ExtJS扩展相关的预备知识 14.2.1 定义命名空间 14.2.2 使用xtype 14.3 用户扩展和插件 14.3.1 编写自定义用户扩展 14.3.2 常用插件UploadDialog 14.3.3 常用插件...

Global site tag (gtag.js) - Google Analytics