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

Extjs4 源码-Ext.extend解读

阅读更多
    Ext.apply(Ext, {

        
        extend: function() {
            
            var objectConstructor = objectPrototype.constructor,
                inlineOverrides = function(o) {
                for (var m in o) {
                    if (!o.hasOwnProperty(m)) {
                        continue;
                    }
                    this[m] = o[m];
                }
            };

            return function(subclass, superclass, overrides) {
                
                if (Ext.isObject(superclass)) {
                    overrides = superclass;
                    superclass = subclass;
                    subclass = overrides.constructor !== objectConstructor ? overrides.constructor : function() {
                        superclass.apply(this, arguments);
                    };
                }

                if (!superclass) {
                    Ext.Error.raise({
                        sourceClass: 'Ext',
                        sourceMethod: 'extend',
                        msg: 'Attempting to extend from a class which has not been loaded on the page.'
                    });
                }

                
                var F = function() {},
                    subclassProto, superclassProto = superclass.prototype;

                F.prototype = superclassProto;
                subclassProto = subclass.prototype = new F();
                subclassProto.constructor = subclass;
                subclass.superclass = superclassProto;

                if (superclassProto.constructor === objectConstructor) {
                    superclassProto.constructor = superclass;
                }

                subclass.override = function(overrides) {
                    Ext.override(subclass, overrides);
                };

                subclassProto.override = inlineOverrides;
                subclassProto.proto = subclassProto;

                subclass.override(overrides);
                subclass.extend = function(o) {
                    return Ext.extend(subclass, o);
                };

                return subclass;
            };
        }(),

        
        override: function(cls, overrides) {
            if (cls.prototype.$className) {
                return cls.override(overrides);
            }
            else {
                Ext.apply(cls.prototype, overrides);
            }
        }
    });

        针对原型和构造器的重写,会影响到重写前所创建实例的一些重要特性-例如继承性的识别。因此这种重写通常被要求在引擎最先装入的代码中进行。令人遗憾的是,开发人员通常无法保证这一点。所以在多个JavaScript扩展框架复合使用的情况下,经常会因此而出现不可控制的局面。

function MyObject() {
}
var obj1 = new MyObject();

MyObject.prototype.type = 'MyObject';
MyObject.prototype.value = 'test';
var obj2 = new MyObject();

MyObject.prototype = {
        constructor: MyObject,   //<--重写原型时应该维护该属性
        type: 'Bird',
        fly: function()  {/*...*/}
}
var obj3 = new MyObject();

//显示对象的属性
alert(obj1.type);
alert(obj2.type);
alert(obj3.type);

        在这个例子中,第1~7行代码创建了obj1与obj2两个对象,由于第5~6行只进行了“原型修改”,因此根据原型继承的实质我们知道obj1与obj2是类相同的两个实例。第9~13行则将原型重写成一个新的对象。不幸的是,这种重写事实上破坏了原型继承链,其直接的结果就是:obj3与obj1、obj2完全不同-这种不同甚至直接扩展到继承关系的识别上。例如:

//(续上例)
//显示false
alert(obj1 instanceof MyObject);
alert(obj2 instanceof MyObject);
//显示true
alert(obj3 instanceof MyObject);

         对一个函数的原型继承技巧:

function A() {
       alert('a');
}

//B继承A的原型
function B() {
}

//情况1
B.prototype = new A();

//情况2
var F = function() {};
F.prototype = A.prototype;
B.prototype = new F();

        情况2比情况1好的地方在于情况2没有执行alert('a')操作,当我们不希望集成过程中执行父函数的构造方法时就可以借助空函数,空函数的原型是指向复函数的原型的引用。然后子函数再继承空函数从而达到原型继承的目的。

 

分享到:
评论

相关推荐

    ext入门学习.pdf

    类的创建和继承则可以通过JavaScript的原型链实现,或者使用ExtJS提供的`Ext.extend`方法。此外,`Ext.apply`可以用于向对象动态添加属性和方法。 获取界面上的元素是ExtJS中的重要操作,这主要通过Ext.Element实现...

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

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

    ExtJS的extend(Ext Designer的使用)

    ExtJS的`extend`特性是其核心的面向对象机制之一,它允许我们在JavaScript中创建类的继承链。在Ext Designer的环境下,这个概念尤为重要,因为设计师工具提供了可视化的界面来帮助开发者更直观地构建和扩展组件。这...

    Extjs6.x插件,双击关闭选项卡(js源码)

    extend: 'Ext.util.Plugin', alias: 'plugin.closeTabOnDoubleClick', init: function(tabPanel) { tabPanel.on('itemdblclick', this.onTabDoubleClick, this); }, onTabDoubleClick: function(tabPanel, ...

    无废话ExtJs 系列教程十八[继承:Extend]

    继承在ExtJS中的实现主要基于`Ext.extend()`方法,这个方法是ExtJS提供的一个静态方法,它允许一个类(子类)继承另一个类(父类)的所有属性和方法。通过`Ext.extend()`,我们可以定义新的类,同时保留和扩展已存在...

    Ext继承分析

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

    Extjs之旅-combox之远程加载数据

    extend: 'Ext.data.Model', fields: ['id', 'name'] // 这里假设我们有id和name两个字段 }); ``` 3. **配置Combox**:在Combox中关联Store,并设置queryMode为'remote',这样用户输入时会触发远程查询。 ```...

    extjs3.4如何创建对象

    EXTJS中的所有对象都是由`Ext.extend()`函数或`Ext.apply()`函数来创建的。例如,如果你要创建一个简单的Panel对象,可以这样做: ```javascript var myPanel = Ext.extend(Ext.Panel, { title: '我的面板', ...

    ext入门学习[归类].pdf

    继承机制可以通过直接赋值原型链实现,或者使用`Ext.extend`方法。此外,`Ext.apply`可以用来动态地添加属性和方法到对象上。 对于界面元素的获取,ExtJS提供了一套强大的选择器系统,其基础是`Ext.Element`对象。...

    ext面向对象和继承

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

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, { onRender : function(ct, position){ if(!this.el){ this.defaultAutoCreate = { tag: "textarea", autocomplete: "off" }; } Ext.form.TextArea....

    Extjs中文教程

    - 通过`Ext.extend`和`Ext.override`方法可以实现类的继承和重写。 - **配置(config)选项** - 配置选项是Extjs组件的核心,用于设置组件的各种属性和行为。 - 通常在组件构造函数中通过传递一个配置对象来指定...

    ExtJs4 多附件上传组件

    ExtJS4是一款强大的JavaScript框架,用于构建富客户端Web应用程序。在ExtJS4中实现多附件上传功能,可以极大地提升用户体验,使得用户能够一次性上传多个文件,而无需反复操作。本篇将详细介绍如何利用ExtJS4结合...

    extJS 一些简单实例

    3. 定义视图:使用`Ext.extend`创建自定义组件,或者直接使用内置的组件实例化。 4. 数据绑定:如果需要,可以设置数据源和数据模型,进行双向数据绑定。 5. 启动应用:在`launch`函数中启动应用,这将渲染视图并...

    Ext继承和扩展

    在ExtJS中,继承是通过`Ext.extend()`方法实现的,这使得我们能够创建自定义组件,这些组件具有现有组件的特性,并可以添加额外的功能或修改行为。 例如,假设我们有一个基本的`Panel`类,我们可以通过以下方式创建...

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

    Ext.extend(Ext.layout.container.MyIFrameLayout, Ext.layout.container.Fit, { onLayout: function(ct, target) { var iframe = ct.items.first(); if (iframe && iframe.rendered) { var iframeBody = ...

    找到的ExtJS实现多选下拉框3个代码

    Ext.extend(Ext.form.field.ComboBox, { initComponent: function () { this.multiSelect = true; this.callParent(); this.on('beforequery', this.handleBeforeQuery, this); }, handleBeforeQuery: ...

    Extjs4.0视频教程和源代码,另附文档翻译

    - **Ext类详解**:深入探讨了Ext类的功能,包括如何使用Ext.extend扩展类、如何使用Ext.create创建对象等。 - **实用工具函数**:列举了一些常用工具函数,如Ext.String、Ext.Array等,并通过示例展示了它们的使用...

    extjs mvc简单示例

    extend: 'Ext.data.Model', fields: [ {name: 'firstName', type: 'string'}, {name: 'lastName', type: 'string'} ] }); ``` 2. 创建Store:Store是模型数据的容器,用于管理数据的加载、存储和更新。我们将`...

    ext-word文档

    ### EXT中文手册与ExtJS基础知识概览 #### EXT简介 ExtJS是一款强大的开源JavaScript框架,专为Web应用程序的开发而设计。它提供了丰富的用户界面组件和工具,支持开发者快速构建高性能、可定制化的Web应用。ExtJS...

Global site tag (gtag.js) - Google Analytics