Extjs學(xué)習(xí)筆記之八 繼承和事件基礎(chǔ)
2024-05-06 14:11:52
供稿：網(wǎng)友
這里接口的意思是Observable實(shí)際上起了一個(gè)抽象類的作用，Extjs中有大量的組件都是繼承自這個(gè)類的。這個(gè)類提供了一些基本的方法比如addEvents，addlistener,fireEvent等等。
本文暫時(shí)不介紹如何使用extjs的組件響應(yīng)事件，而是介紹Extjs的事件的一些實(shí)現(xiàn)原理。整個(gè)Extjs框架都是以一種面向?qū)ο蟮姆绞介_發(fā)的，所以理解Javascript中的繼承也很重要。我前面的一篇文章 補(bǔ)點(diǎn)基礎(chǔ)：Javascript中的類和閉包 也是為這篇做準(zhǔn)備。另外，博客園內(nèi)還有一個(gè)寫的很好的系列 JavaScript繼承詳解. 他主要是根據(jù)Douglas Crockford的兩篇文章寫的。 其實(shí)實(shí)現(xiàn)繼承的原理都差不多，大家可以參考閱讀。
Extjs實(shí)現(xiàn)繼承的函數(shù)是一個(gè)很核心的函數(shù)Ext.extend，extend方法有兩個(gè)重構(gòu)版本，第一個(gè)接受兩個(gè)參數(shù)，第一個(gè)是extend( Function superclass, Object overrides ) ，第二個(gè)是extend( Function subclass, Function superclass,Object overrides ) : Function，第二個(gè)版本是在subclass的基礎(chǔ)上。superclass就是超類的構(gòu)造函數(shù)，overrides是一個(gè)對(duì)象，里邊的屬性就是要覆蓋父類的屬性。繼承了父類的子類具有父類的prototype中的所有方法。并且子類可以覆蓋父類的方法（override），更進(jìn)一步，子類的每個(gè)對(duì)象也可以覆蓋父類的方法。其實(shí)我覺得這個(gè)函數(shù)沒什么作用，修改prototype的效果是等效的，當(dāng)然，extjs的目的肯定是要把prototype這個(gè)神奇的東西完全屏蔽起來，使程序員能夠像處理其他語言一樣來處理Javascript。當(dāng)然，即使如此，它的繼承和一般的繼承還是有些不同的，下面先看個(gè)例子，準(zhǔn)備好一個(gè)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(); !!沒有結(jié)果！stu沒有name的定義stu.fn(); !!沒有結(jié)果 stu.showID(); !!!還是沒有結(jié)果到此我們已經(jīng)發(fā)現(xiàn)了一些不同：在父類的構(gòu)造函數(shù)中的內(nèi)容是不會(huì)繼承的，父類的構(gòu)造函數(shù)不會(huì)被調(diào)用，子類（prototype中）已有的方法也會(huì)丟失！繼續(xù)看下去，將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();
這里的函數(shù)都能夠按預(yù)期輸出，showAge是執(zhí)行的父類的方法，stu.print是執(zhí)行的stu.override中指定的方法，而stu2執(zhí)行的是Student.override中指定的方法。到這里，我們已經(jīng)大概能猜出extend是如何實(shí)現(xiàn)的了。下面看它真正的源代碼，這個(gè)方法位于Ext.js中，代碼和注釋如下：extend : function(){
