`
piperzero
  • 浏览: 3549819 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起

阅读更多
转自JS堂
一般的,如果我们定义一个类,会定义一个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-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....

    EXT文档 不下后悔.doc

    - 类的继承在EXT中通过`Ext.extend()`实现,有两种形式,其中第二种形式允许在已有的类上扩展新的功能。 5. **类继承**: - EXT支持两种类继承方式: 1. `MyClass = Ext.extend(SuperClass, { /* */ });` 2. `...

    Ext入门学习.docx

    - **继承**:使用 `new` 关键字创建新对象并赋予原型属性来实现继承,或者使用 `Ext.extend()` 方法来简化继承过程。 - **属性与方法添加**:使用 `Ext.apply()` 方法可以在运行时向对象添加新的属性和方法。 #### ...

    Ext+JS高级程序设计.rar

    9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备知识 256 9.2.1 定义命名空间 256 9.2.2 重写构造函数 257 9.2.3 继承组件的一些准备 257 9.2.4 常用的辅助函数 258 9.2.5 使用xtype 258 9.3 实现一个功能...

    EXT JS 3.0 Core Class Diagram

    - `Ext.extend()`: 创建新的类(构造函数),继承自父类。 - `Ext.fy()`: 将元素转换为`Ext.Element`对象。 - `Ext.get()`: 获取DOM元素。 - `Ext.id()`: 生成唯一的ID。 - `Ext.isArray()`, `Ext.isBoolean()`...

    ext-word文档

    extend: 'Ext.grid.Panel', ... }); ``` #### EXT的布局(Layout) 布局是ExtJS中用于管理UI组件排列的关键特性。ExtJS提供了多种布局策略,如`fit`、`vbox`、`hbox`等,可以根据需要选择合适的布局策略。 #### ...

    javascript 写类方式之八

    8、Ext.js的写类方式 这里用的是Ext core3.0,Ext中用Ext.extend来定义一个类(当然它更多用来扩展一个类),Ext整个框架各种控件如Panel,MessageBox等都是用Ext.extend方法来扩展。这里仅仅用它来定义一个最简单的...

    ExtJS对几种面向对象体现.txt

    extend: 'Ext.button.Button', alias: 'widget.mybutton', text: 'Click Me' }); ``` 这里使用了`Ext.define`函数来定义一个新的类`MyApp.view.MyButton`,它继承自`Ext.button.Button`。 2. **模块化**:...

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

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

    thinkphp5 加载静态资源路径与常量的方法

    '__PUBLIC__'=>'../public/static/admin', '__ROOT__' => '/', '__APP__' => 'app/admin/', ], ]; ``` 这样做之后,你就可以在模板中使用`__PUBLIC__`来引用公共静态资源。 接下来,我们探讨一下ThinkPHP5中的...

Global site tag (gtag.js) - Google Analytics