Extjs学习笔记之八学习笔记之八 继承和事件基础继承和事件基础
这里接口的意思是Observable实际上起了一个抽象类的作用，Extjs中有大量的组件都是继承自这个类的。这个类提供了一些
基本的方法比如addEvents，addlistener,fireEvent等等。
本文暂时不介绍如何使用extjs的组件响应事件，而是介绍Extjs的事件的一些实现原理。整个Extjs框架都是以一种面向对象的
方式开发的，所以理解Javascript中的继承也很重要。我前面的一篇文章 补点基础：Javascript中的类和闭包 也是为这篇做准
备。另外，博客园内还有一个写的很好的系列 JavaScript继承详解. 他主要是根据Douglas Crockford的两篇文章写的。 其实实
现继承的原理都差不多，大家可以参考阅读。
Extjs实现继承的函数是一个很核心的函数Ext.extend，extend方法有两个重构版本，第一个接受两个参数，第一个是extend(
Function superclass, Object overrides ) ，第二个是extend( Function subclass, Function superclass,Object overrides ) :
Function，第二个版本是在subclass的基础上。superclass就是超类的构造函数，overrides是一个对象，里边的属性就是要覆
盖父类的属性。继承了父类的子类具有父类的prototype中的所有方法。并且子类可以覆盖父类的方法（override），更进一
步，子类的每个对象也可以覆盖父类的方法。其实我觉得这个函数没什么作用，修改prototype的效果是等效的，当然，extjs
的目的肯定是要把prototype这个神奇的东西完全屏蔽起来，使程序员能够像处理其他语言一样来处理Javascript。当然，即使
如此，它的继承和一般的继承还是有些不同的，下面先看个例子，准备好一个Person类
代码如下:
Person = function(name) {
this.name = name;
this.fn = function() { alert(‘I am a person’) };
}
Person.prototype.print=function(){ alert(‘I am a person’);}
Person.prototype.showAge = function() { alert(‘I am older than 0’); }
Person.prototype.showName = function() { alert(‘Show Name:’+this.name) };
var per = new Person(‘Tom’);
per.showName();子类：Student = function(id) {
this.id = id;
}
Student.prototype.showID = function() { alert(this.id); } //子类的方法
继承：
Ext.extend(Student, Person);
stu.showName(); !!没有结果！stu没有name的定义stu.fn(); !!没有结果 stu.showID(); !!!还是没有结果到此我们已经发现了一些
不同：在父类的构造函数中的内容是不会继承的，父类的构造函数不会被调用，子类（prototype中）已有的方法也会丢失！
继续看下去，将Ext.extend下面的代码替换成：
代码如下:
var stu = new Student(’01’);
Student.override({ print: function() { alert(‘I am a student’); } });
stu.override({ print: function() { alert(‘I am a bad student,but I won\’t affect others’); } });
stu.print();
stu.showAge();
var stu2 = new Student();
stu2.print();
这里的函数都能够按预期输出，showAge是执行的父类的方法，stu.print是执行的stu.override中指定的方法，而stu2执行的是
Student.override中指定的方法。到这里，我们已经大概能猜出extend是如何实现的了。下面看它真正的源代码，这个方法位
于Ext.js中，代码和注释如下：extend : function(){
代码如下:
// inline overrides
var io = function(o){ //注意这个方法的this，仅看这里并不知道这个this是什么，下面这个io会被赋值给sbp.override，也就是子
类的prototype
for(var m in o){ //从而每个子类的对象的override都会指向这个方法，如果子类对象调用了override，那么这个this就是子类的
对象了。也就是
this[m] = o[m]; //上面的例子中stu.override表现出来的效果，仅对当前对象有效。从这里可以看出，override不仅仅是传统意义
上的覆盖，完全也可以
} //用来添加新方法。
};
var oc = Object.prototype.constructor;
return function(sb, sp, overrides){
if(Ext.isObject(sp)){ //是在检测当前使用的是哪个版本的重构函数。如果sp实际上是overrides，就做些替换工作，让变量的实
际意义和名称相符合。
overrides = sp;
sp = sb;
sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; //这个没看懂……
}
var F = function(){},
sbp,
spp = sp.prototype;
资源评论
weixin_38702515
- 粉丝: 12
- 资源: 927
最新资源
- MySQL卸载文档，卸载不会有残留
- 工具变量-数字建设-大数据管理机构改革DID（2007-2023）.xlsx
- SQL SERVER数据库设计期末复习代码.zip
- QMenuBar中item同时显示图标和文字
- 永磁同步电机末端振动抑制（输入整形）simulink仿真模型，包含ZV，ZVD，EI整形
- IMG_20241125_212210.jpg
- 本地安装GSVA，有很多选择，我选了相对最新的
- yolo算法-橡胶圈数据集-23984张图像带标签-机器人-橡胶圈.zip
- wordpress网址导航主题模板 自适应手机端+附整站源码
- yolo算法-手套-无手套-人数据集-14773张图像带标签-手套-无手套-人-无头盔-无口罩-没有安全鞋-无护耳器-无背心-护耳器-背心-安全鞋-无玻璃-头盔-面具-玻璃杯.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
