Extjs学习笔记之八继承和事件基础资源-CSDN文库

javascript

65 浏览量 2020-12-11 09:11:41 上传评论收藏 79KB PDF 举报

资源推荐

资源详情

资源评论

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;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈

weixin_38702515

粉丝: 12
资源: 927

Extjs学习笔记之八 继承和事件基础

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

Extjs学习笔记之六 面版

Extjs学习笔记之二 初识Extjs之Form

extjs 学习笔记 四 带分页的grid

Extjs学习笔记有用

JavaScript.-Extjs基础学习笔记

老师整理的extjs学习笔记

extjs学习笔记

python超基础学习笔记 （二十三）- 继承

vbnet学习笔记(十二)继承中的构造事件共享方法共享事件.doc

ExtJS4中文教程2 开发笔记 chm

（转载）GWT -EXT学习笔记-基础

prototype 开发应用手册，笔记，prototype.js文件下载

EXTJS学习笔记

JS程序设计笔记JS程序设计笔记.doc

EXT学习笔记-项目应用实践

javase6 学习笔记(李兴华培训课堂笔记所有.)

韩顺平java从入门到精通视频教程(全94讲)学习笔记整理(齐全).doc

echarts-gl.min.js

基于html+vue绘制银色圣诞树（超级好看！！）（附完整代码）

自主研发的软著申请代码文档整理输出工具

某红书x-s加密算法补环境版本（当前可用，8.28更新）

2023前端面试八股文.pdf

javascript网页设计期末作业 购物网站

javaWeb楠小弟自助图书系统项目，使用注解方式配合原生js、axios方式完成整个项目的开发，系统只适合在javaWeb阶段

echarts.min.js

基于JavaScript网红太空人表盘

小兔鲜项目源码（动态网页，包含首页、注册页、登录页、购物页）原生HTML、CSS、Javascript

最新资源

Extjs学习笔记之八继承和事件基础

Extjs学习笔记之六面版

Extjs学习笔记之二初识Extjs之Form

extjs 学习笔记四带分页的grid

python超基础学习笔记（二十三）- 继承

javascript网页设计期末作业购物网站