`

Ext extend

阅读更多

一般的,如果我们定义一个类,会定义一个function对象,然后将公用方法写到其原型上,例如:
var Tiger = function(){}
Tiger.prototype.Hunting = function(){}

但是要建立一个完善的框架或者类库,没有继承帮忙,组织代码将是一件非常辛苦且难以管理的工作。Js中的类是function对象,实现继承,主要 要将子类的原型设置为父类的一个实例(这样子类就用有了父类原型的所有成员),并重新将子类原型的构造器设置为子类自己。如以下代码所示:
function Animal(){}
function Tiger(){}
Tiger.prototype = new Animal()
Tiger.prototype.constructor = Tiger

实现继承并不难,将上面的Animal和Tiger参数化封装为一个方法就可以实现(当然实际应用中就要复制一些了),代码如下:
function Extend(subFn, superFn){
    subFn.prototype = new superFn()
    subFn.prototype.constructor = subFn
}
Ext作为一个优秀的框架,当然也少不了继承的实现。如前一篇文章 所谈到的,现在让我们一行行代码理解Ext.extend
        extend : function(){
            // inline overrides
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            return function(sb, sp, overrides){
                if(typeof sp == 'object'){
                    overrides = sp;
                    sp = sb;
                    sb = function(){sp.apply(this, arguments);};
                }
                var F = function(){}, sbp, spp = sp.prototype;
                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;
                sb.superclass=spp;
                if(spp.constructor == Object.prototype.constructor){
                    spp.constructor=sp;
                }
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.override = io;
                Ext.override(sb, overrides);
                return sb;
            };
        }()

本来只有两行代码就可以实现的继承变成了近30行,Ext都做了什么呢?通常情况下只传入两个类型的话(subFn和superFn),上面的代码将简化为
        extend : function(){
            // inline overrides
            var io = function(o){
                for(var m in o){
                    this[m] = o[m];
                }
            };
            return function(sb, sp, overrides){
                var F = function(){}, sbp, spp = sp.prototype;
                F.prototype = spp;
                sbp = sb.prototype = new F();
                sbp.constructor=sb;
                sb.superclass=spp;
                sb.override = function(o){
                    Ext.override(sb, o);
                };
                sbp.override = io;
                Ext.override(sb, overrides);
                return sb;
            };
        }()

定义一个空函数,将其原型设置为sp的原型spp,其实F就是sp的一个替身,理解的时候可以认为就是sp。将子类sb的原型设置为F的一个实例, 然后再将其原型的构造器设置为自己sb,为了方便找到父类sp,在子类sb上添加了一个superclass属性为父类sp的原型spp。为了方便扩展属 性,在子类sb上添加了属性重写的override方法,也在其原型上添加了override方法(这样其所有实例对象就可以从一个对象重写现有属性 了)。

到这里算是对继承有了一些了解(不到位的地方在以后的阅读中继续加强)。好了,有了继承的支持,我们就可以加速类型的扩展了。

分享到:
评论

相关推荐

    ExtJS的extend(Ext Designer的使用)

    这篇博客文章可能是关于如何在Ext Designer中利用`extend`来设计和自定义UI组件的教程。 首先,我们要理解`extend`在Ext JS中的工作原理。`extend`关键字用于声明一个类是另一个类的子类。这在JavaScript中实现了类...

    ext 继承(extend) 理解练习

    这里,我们聚焦于`ext`继承,通常指的是JavaScript中的`extend`方法,这是一种实现继承的方式。在JavaScript中,由于语言本身没有内置的类机制,所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...

    Ext一些方法的重写

    在`ext-extend.js`这个文件中,可能包含了对`Ext.extend()`的进一步实现和扩展,或者展示了如何在实际项目中重写`Ext`库的方法。通常,这样的代码示例会包含具体的类定义、方法重写以及如何在应用中使用这些自定义类...

    ext继承重写

    EXT JS中的“extend”关键字是实现继承的关键。当你创建一个新的类并声明它`extend`另一个类时,新类将自动获取父类的所有属性和方法。这使得我们可以基于已有的基础类构建更复杂的组件或功能,无需从头开始编写代码...

    EXT dojochina Ext类静态方法.rar

    例如,`Ext.extend(MyClass, Ext.Panel, {myMethod: function() {...}})`创建了一个新类MyClass,它继承自Ext.Panel,并添加了一个名为myMethod的方法。 - `Ext.apply()`: 这个静态方法用于合并对象的属性,通常...

    com.guo.android_extend:android-extend:1.0.6

    implementation(name: 'android-extend-release', ext: 'aar') } ``` 3. 最后,执行 `gradlew build` 或者在 Android Studio 中同步项目,使库被正确地引入到项目中。 总之,这个压缩包提供了一个名为 "android-...

    Ext.Store的获取方法

    Leangle.form.combo.ColorComboBox = Ext.extend(Leangle.form.BaseComboBox, { // ComboBox configurations store: new Ext.data.JsonStore({ // store configurations }) }); ``` 在这种情况下,尝试使用`Ext...

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

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

    Ext继承分析

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

    Ext继承和扩展

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

    EXT测试小样例--EXT测试小样例

    EXT测试小样例通常指的是基于EXT JS框架进行的软件测试示例。EXT JS是一个用于构建富客户端Web应用程序的JavaScript库,特别适用于创建数据驱动、交互性强的用户界面。EXT Grid是EXT JS中的一个核心组件,它提供了一...

    ext超酷的grid中放图片(ext3.2.1)

    Ext.extend(Ext.grid.Column, { renderer: function(value, meta, record, rowIndex, colIndex, store) { if (value) { return '图片" />'; } else { return ''; } } }); var grid = new Ext.grid....

    ext api,ext 学习笔记,SWFUpload_多文件上传及部分工具

    "第一章 必须理解Ext_extend函数.mht"和"EXT JS组件事件.mht"可能深入讨论了EXT的扩展机制和组件事件处理,是EXT开发的重要基础。 "EXT 中文手册.pdf"则是EXT的官方中文文档,是学习EXT API的权威参考资料,包含...

    Ext与后台服务器的交互操作

    Mis.Ext.CrudPanel = Ext.extend(Ext.Panel, { // ... 具体实现细节省略 }); ``` 要使用这个CRUD面板,需要进一步继承并实现特定的需求,比如文中给出的例子是创建一个污水厂管理面板: ```javascript ...

    Ext实现java的面向对象实例

    使用`extend`关键字来指定父类,如`Ext.extend('SubClass', 'SuperClass')`。 7. **类实例方法重写**:在子类中,可以重写父类的实例方法,以实现不同的功能。在Ext中,你可以直接在子类中定义相同的方法名来实现...

    ext常用注释

    使用 `Ext.extend` 可以方便地扩展现有的Ext组件类,创建新的组件类型。例如,创建一个搜索面板组件: ```javascript SearchPanel = Ext.extend(Ext.Panel, { constructor: function () { this.addEvents('...

    Ext4 动态加载js例子

    extend: 'Ext.panel.Panel', requires: ['MyApp.util.MyUtil'], // 延迟加载 MyUtil 工具类 // ... }); ``` 当创建 `MyApp.view.MyPanel` 实例时,`MyApp.util.MyUtil` 将自动加载。 4. **路径映射** `paths...

    ext面向对象和继承

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

    Ext3.0 api帮助文档

    - **Ext JS的类系统基于MVC模式,使用EXT.extend方法实现类的继承**,这使得代码复用和模块化成为可能。 - **配置对象(Configurations)**: 大多数类允许通过配置对象进行初始化,简化了组件的创建过程。 3. **...

Global site tag (gtag.js) - Google Analytics