一般的,如果我们定义一个类,会定义一个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方法(这样其所有实例对象就可以从一个对象重写现有属性
了)。
到这里算是对继承有了一些了解(不到位的地方在以后的阅读中继续加强)。好了,有了继承的支持,我们就可以加速类型的扩展了。
分享到:
相关推荐
这篇博客文章可能是关于如何在Ext Designer中利用`extend`来设计和自定义UI组件的教程。 首先,我们要理解`extend`在Ext JS中的工作原理。`extend`关键字用于声明一个类是另一个类的子类。这在JavaScript中实现了类...
这里,我们聚焦于`ext`继承,通常指的是JavaScript中的`extend`方法,这是一种实现继承的方式。在JavaScript中,由于语言本身没有内置的类机制,所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...
在`ext-extend.js`这个文件中,可能包含了对`Ext.extend()`的进一步实现和扩展,或者展示了如何在实际项目中重写`Ext`库的方法。通常,这样的代码示例会包含具体的类定义、方法重写以及如何在应用中使用这些自定义类...
EXT JS中的“extend”关键字是实现继承的关键。当你创建一个新的类并声明它`extend`另一个类时,新类将自动获取父类的所有属性和方法。这使得我们可以基于已有的基础类构建更复杂的组件或功能,无需从头开始编写代码...
例如,`Ext.extend(MyClass, Ext.Panel, {myMethod: function() {...}})`创建了一个新类MyClass,它继承自Ext.Panel,并添加了一个名为myMethod的方法。 - `Ext.apply()`: 这个静态方法用于合并对象的属性,通常...
implementation(name: 'android-extend-release', ext: 'aar') } ``` 3. 最后,执行 `gradlew build` 或者在 Android Studio 中同步项目,使库被正确地引入到项目中。 总之,这个压缩包提供了一个名为 "android-...
Leangle.form.combo.ColorComboBox = Ext.extend(Leangle.form.BaseComboBox, { // ComboBox configurations store: new Ext.data.JsonStore({ // store configurations }) }); ``` 在这种情况下,尝试使用`Ext...
"ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...
在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...
然而,`Ext`库提供了一个更优雅、更易于理解和维护的方式来处理继承,这包括`Ext.extend()`方法和`Ext.create()`函数。 ### `Ext.extend()` `Ext.extend()`是`Ext`库中用于创建子类的核心方法。它接受三个参数:...
EXT测试小样例通常指的是基于EXT JS框架进行的软件测试示例。EXT JS是一个用于构建富客户端Web应用程序的JavaScript库,特别适用于创建数据驱动、交互性强的用户界面。EXT Grid是EXT JS中的一个核心组件,它提供了一...
Ext.extend(Ext.grid.Column, { renderer: function(value, meta, record, rowIndex, colIndex, store) { if (value) { return '图片" />'; } else { return ''; } } }); var grid = new Ext.grid....
"第一章 必须理解Ext_extend函数.mht"和"EXT JS组件事件.mht"可能深入讨论了EXT的扩展机制和组件事件处理,是EXT开发的重要基础。 "EXT 中文手册.pdf"则是EXT的官方中文文档,是学习EXT API的权威参考资料,包含...
Mis.Ext.CrudPanel = Ext.extend(Ext.Panel, { // ... 具体实现细节省略 }); ``` 要使用这个CRUD面板,需要进一步继承并实现特定的需求,比如文中给出的例子是创建一个污水厂管理面板: ```javascript ...
使用`extend`关键字来指定父类,如`Ext.extend('SubClass', 'SuperClass')`。 7. **类实例方法重写**:在子类中,可以重写父类的实例方法,以实现不同的功能。在Ext中,你可以直接在子类中定义相同的方法名来实现...
使用 `Ext.extend` 可以方便地扩展现有的Ext组件类,创建新的组件类型。例如,创建一个搜索面板组件: ```javascript SearchPanel = Ext.extend(Ext.Panel, { constructor: function () { this.addEvents('...
extend: 'Ext.panel.Panel', requires: ['MyApp.util.MyUtil'], // 延迟加载 MyUtil 工具类 // ... }); ``` 当创建 `MyApp.view.MyPanel` 实例时,`MyApp.util.MyUtil` 将自动加载。 4. **路径映射** `paths...
EXTJS中的继承是通过`Ext.extend()`或`Ext.createByAlias()`实现的。继承允许子类重写或扩展父类的方法和属性。例如,我们可以创建一个新的按钮类,继承自EXTJS的`Ext.button.Button`: ```javascript MyButton = ...
- **Ext JS的类系统基于MVC模式,使用EXT.extend方法实现类的继承**,这使得代码复用和模块化成为可能。 - **配置对象(Configurations)**: 大多数类允许通过配置对象进行初始化,简化了组件的创建过程。 3. **...