`
lorry1113
  • 浏览: 262414 次
  • 性别: 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 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 常用插件...

    Ext+JS高级程序设计.rar

    第3章 Ext Core实例—.NET语言实现 35 3.1 创建应用并设置开发环境 35 3.2 自定义Membership提供程序 37 3.3 创建母版页 38 3.4 首页设计 42 3.5 产品列表页 47 3.6 产品详细信息页 51 3.7 登录对话框 56 3.8 用户...

Global site tag (gtag.js) - Google Analytics