從Java的角度理解Ext的extend
在Java中,我們在實(shí)現(xiàn)繼承的時(shí)候存在下面幾個(gè)事實(shí):
1, 準(zhǔn)備兩個(gè)類,他們用extends關(guān)鍵字鏈接起來
2, 如果超類沒有默認(rèn)構(gòu)造函數(shù),需要在子類構(gòu)造函數(shù)中顯式的super并傳參,如果都是默認(rèn)構(gòu)造函數(shù)也可以super,不super虛擬機(jī)是自動(dòng)的
3, 子類可追加,覆蓋,重載方法,子類可以有自己的私有屬性,他們在子類構(gòu)造函數(shù)中被構(gòu)造
4, 字段是數(shù)據(jù),方法在代碼區(qū),和類建立方法表,同一個(gè)類的對(duì)象有自己的數(shù)據(jù)但是共享方法代碼
比如有兩個(gè)類,Plane和Space,Plane表示平面,Space表示空間,Space是Plane的子類,在java中
- /**
- * 根據(jù)字段數(shù)量分配內(nèi)存塊
- * 實(shí)例化的時(shí)候虛擬機(jī)調(diào)用Plane.Plane方法把這個(gè)內(nèi)存塊作為this和構(gòu)造參數(shù)傳進(jìn)去,初始化完數(shù)據(jù)字段。
- * 建立方法表映射
- */
- class Plane {
- protected int x;
- protected int y;
- Plane(int x, int y) {
- this.x = x;
- this.y = y;
- }
- public void XY() {
- System.out.println(x * y);
- }
- }
- /**
- * 自動(dòng)擁有了超類的行為,但是超類的屬性需要超類去構(gòu)造
- * 子類可構(gòu)造自己的屬性,添加自己的方法,覆蓋超類的方法
- * <p/>
- * 按照繼承結(jié)構(gòu)的所有字段分配內(nèi)存塊,調(diào)用Space.Space將這個(gè)內(nèi)存塊作為this和參數(shù)一起傳進(jìn)去
- * 把超類的那部分給超類,然后自己初始化自己的。
- * <p/>
- * 建立方法表
- */
- class Space extends Plane {
- private int z;
- Space(int x, int y, int z) {
- super(x, y);
- this.z = z;
- }
- public void XYZ() {
- System.out.println(x * y * z);
- }
- }
- public class Test {
- public static void main(String[] args) {
- Plane plane = new Plane(2,3);
- plane.XY();
- Space space = new Space(2, 3, 4);
- space.XYZ();
- }
- }
那么在js中也一樣,區(qū)別是代碼要放到構(gòu)造函數(shù)(可以理解為Java中的類)的原型上,原型是放置方法和不變屬性的理想場所,原型是一個(gè)對(duì)象,它和普通對(duì)象唯一不同的就是他有一個(gè)constructor屬性指向它所依附的構(gòu)造器,在java中子類查找屬性和方法是通過虛擬機(jī)來完成,但是在js中需要通過原型鏈來完成。也就是說繼承關(guān)系對(duì)程序員是不透明的,需要了解這個(gè)原型機(jī)制,原型機(jī)制上存在兩條鏈,一是原型鏈,二是構(gòu)造函數(shù)鏈。
仿照上面java的代碼,我們可以完成js的寫法,如下:
- var Plane = function(x, y) {
- this.x = x;
- this.y = y;
- };
- Plane.prototype.XY = function() {
- alert(this.x * this.y);
- };
- var Space = function(x, y, z) {
- //用this調(diào)用超類構(gòu)造函數(shù),沒有java的super自動(dòng)調(diào)用,所以要手動(dòng)調(diào)用
- Plane.call(this, x, y);
- //Space.superclass.constructor.call(this, x, y); 可以用一個(gè)統(tǒng)一的語法
- //構(gòu)造自己的數(shù)據(jù)
- this.z = z;
- };
- Space.prototype.XYZ = function() {
- alert(this.x * this.y * this.z);
- }
JS中函數(shù)的this指函數(shù)的調(diào)用者,不管是java還是js,this都可理解為新分配的那段容納對(duì)象的內(nèi)存。在java 中通過Space extends Plane,虛擬機(jī)就維護(hù)好了他們的繼承關(guān)系以完成繼承關(guān)系的自動(dòng)查找,但是在js中需要我們手動(dòng)的處理,在這個(gè)時(shí)候Space是調(diào)用不到XY這個(gè)方法的,因?yàn)樗麄儧]有在原型鏈上。我們可以開發(fā)一個(gè)函數(shù)來模擬java的關(guān)鍵字extends,比如這個(gè)函數(shù)叫做extend,通過執(zhí)行extend(Plane,Space)完成原型鏈的組裝。
那么extend怎么實(shí)現(xiàn)呢?首先要明白原型鏈,子類和父類在原型鏈上的關(guān)系是Space.prototype._proto_ == Plane.prototype,如果你理解不了,那就看String這個(gè)類吧,String.prototype._proto_ == Object.prototype,即String的原型會(huì)鏈接到Object的原型上,鏈接是通過_proto_這個(gè)屬性來完成的。_proto_是一個(gè)只讀的屬性,只能通過構(gòu)造函數(shù)寫入,所以String是Object的子類。
現(xiàn)在Plane的prototype._proto_ 等于Object,Space的prototype._proto_也等于Object,我們要在extend函數(shù)變換這個(gè)關(guān)系,即完成Space.prototype._proto_ == Plane.prototype,我們知道一個(gè)對(duì)象的_proto_要指向某個(gè)構(gòu)造函數(shù)的原型,需要讓這個(gè)對(duì)象由那個(gè)構(gòu)造函數(shù)構(gòu)造,那么我們只需要讓Space.prototype = new Plane()就可以了,這個(gè)時(shí)候Space.prototype._proto_ == Plane.prototype,而不再指向Object,原型還有一個(gè)屬性constructor指向原型所在的構(gòu)造器,由于Space.prototype剛被Plane創(chuàng)建出來,還沒有這個(gè)屬性,我們要手動(dòng)賦值上去,代碼是Space.prototype. constructor = Space。這樣extend的責(zé)任就完成了。
但是這里有兩個(gè)問題:
1, 由于Space的原型在extend中被替換了,那么它原有的方法就沒有了。
2, Space的原型是Plane構(gòu)造的,雖然做到了Space.prototype._proto_ == Plane.prototype,但是Plane也在原型上寫入了x,y這兩個(gè)垃圾數(shù)據(jù),他們都是undefined,沒有意義,所以要手動(dòng)刪除掉,這樣extend這個(gè)方法就不能通用了。
首先解決***個(gè)問題,我們要變化一點(diǎn)思路,利用js中函數(shù)也是數(shù)據(jù)的特性,我們把Space的那些方法拷貝到一個(gè)對(duì)象中,比如
- var sbm= { XYZ : function() {
- alert(this.x * this.y * this.z);
- }
- };
把這個(gè)sbm也傳遞給extend,extend在替換完原型后將sbm上的所有方法復(fù)制到Space的原型上即可,sbm是一個(gè)對(duì)象直接量,用json語法?,F(xiàn)在的extend就變?yōu)榱巳齻€(gè)參數(shù),即extend(sb,sp,sbm),sb是子類,sp是超類,sbm是子類要放到原型上的方法。
對(duì)于第二個(gè)問題,本質(zhì)原因是Plane這個(gè)函數(shù)要完成一些數(shù)據(jù)初始化,它是超類,我們不能控制,我們只關(guān)心Plane的原型而不關(guān)心它構(gòu)造什么數(shù)據(jù),所以我們可以把它的原型單獨(dú)拿出來,再定義一個(gè)干凈的函數(shù),這個(gè)函數(shù)不做任何事,將這個(gè)干凈函數(shù)的原型設(shè)置為Plane的原型,再用這個(gè)干凈函數(shù)構(gòu)造一個(gè)對(duì)象,這樣出來的對(duì)象就是是干凈的,也完成了_proto_指向了Plane.prototype,***!有了這兩個(gè)方法,我們就可以開始實(shí)現(xiàn)這個(gè)extend,代碼如下:
- var extend = function(sb, sp, sbm) {
- var F = function() {
- },sbp,spp = sp.prototype;
- F.prototype = spp;
- //用干凈函數(shù)嫁接得到子類原型
- sbp = sb.prototype = new F();
- sbp.constructor = sb; //然后指定一個(gè)constructor指回子類
- //把sbm的上的屬性拷貝到子類的原型上
- for (var p in sbm) {
- sbp[p] = sbm[p];
- }
- };
那么完成Space繼承Plane的代碼如下:
- extend(Space, Plane, {
- XYZ : function() {
- alert(this.x * this.y * this.z);
- }
- });
- var spaceObject = new Space(2, 3, 4);
- spaceObject.XY();//成功調(diào)用超類方法
- spaceObject.XYZ();
OK,到了這里,我們基本上就完成任務(wù)了,完全從java的方向搞定的。我們現(xiàn)在利用js的特性來優(yōu)化,讓使用extend更加簡單。
我們說在java中必須寫兩個(gè)類,每個(gè)類都寫自己的字段 ,構(gòu)造函數(shù),方法等,在我們實(shí)現(xiàn)的extend函數(shù)中也確實(shí)把子類,父類都傳遞了進(jìn)來,但是我們多了一個(gè)參數(shù),那就是子類的方法集合即sbm,***個(gè)參數(shù)sb本身也是函數(shù),那是不是可以將這個(gè)函數(shù)也放進(jìn)sbm傳進(jìn)來呢?這樣extend就變?yōu)閮蓚€(gè)參數(shù),即extend(sp,sbm),現(xiàn)在extend返回一個(gè)函數(shù),返回的這個(gè)函數(shù)就是sp的子類,這是完全可行的,我們叫做extend2吧。
- var extend2 = function(sp, sbm) {
- var sb = sbm.constructor;
- //如果說沒有顯式的構(gòu)造函數(shù),那么子類就是直接調(diào)用超類構(gòu)造函數(shù)
- if (sb == Object) {
- sb = function() {
- sp.apply(this, arguments);
- };
- }
- extend(sb, sp, sbm);
- return sb;
- }
我們說要把子類的構(gòu)造函數(shù)放到sbm上,放上去的key叫做constructor,就表示構(gòu)造器,js中每一個(gè)對(duì)象都一個(gè)constructor屬性,它指向構(gòu)造了這個(gè)對(duì)象構(gòu)造函數(shù)。sbm本來是個(gè)Object對(duì)象,它的constructor就指向Object,這個(gè)constructor是在sbm關(guān)聯(lián)的那個(gè)原型上的,現(xiàn)在我們在sbm上設(shè)置某個(gè)子類的構(gòu)造函數(shù),這個(gè)時(shí)候表示sbm有個(gè)自己的constructor。
現(xiàn)在我們在extend2中要做的事情就是提取出構(gòu)造函數(shù),然后還原為三個(gè)參數(shù)去調(diào)用之前的extend,在java中我們的子類是可以不用構(gòu)造器的,只要父類也有默認(rèn)的構(gòu)造器,那么在這里一樣,sbm可能不包含constructor,那么我們需要做一個(gè)函數(shù),它調(diào)用父類的構(gòu)造函數(shù),在java中這種情況過程是自動(dòng)的。所以當(dāng)sbm.constructor為Object的時(shí)候表示sbm沒有指定構(gòu)造函數(shù),這個(gè)時(shí)候?qū)?/p>
- sb = function() {
- sp.apply(this, arguments);
- };
即調(diào)用父類構(gòu)造函數(shù)。這樣將sb,sp,sbm傳遞給extend就可以了。
這個(gè)時(shí)候我們新的繼承語法如下:
- var NewSpace = extend2(Plane, {
- constructor : function(x, y, z) {
- Plane.call(this, x, y);
- this.z = z;
- },
- XYZ : function() {
- alert(this.x * this.y * this.z);
- }
- });
- var newObject = new NewSpace(3, 4, 5);
- newObject.XY();
- newObject.XYZ();
和prototype.js和mootolls的實(shí)現(xiàn)比較,大同小異
- // properties are directly passed to `create` method
- var Person = Class.create({
- initialize: function(name) {
- this.name = name;
- },
- say: function(message) {
- return this.name + ': ' + message;
- }
- });
- var Animal = new Class({
- initialize: function(age) {
- this.age = age;
- },
- say : function() {
- alert(this.age);
- }
- });
- var Cat = new Class({
- Extends: Animal,
- initialize: function(name, age) {
- this.parent(age); // calls initalize method of Animal class
- this.name = name;
- }
- });
到了這里其實(shí)已經(jīng)差不多了,但是細(xì)心的讀者會(huì)發(fā)現(xiàn),我們在extend中會(huì)把sbm的所有屬性拷貝到子類的原型上,這里豈不是就要把constructor也拷貝到原型上?如果sbm包含了這個(gè)constructor其實(shí)就無所謂,因?yàn)樽宇惖脑偷腸onstructor本來就是需要指向這個(gè)構(gòu)造函數(shù)的,但是sbm上沒有constructor那豈不是要把Object拷貝到子類原型上,答案是不會(huì)的,我們在拷貝的時(shí)候用的for in循環(huán)是迭代不出默認(rèn)的那個(gè)constructor的。
現(xiàn)在我們來看看Ext.extend,應(yīng)該完全沒有問題了。我們用了兩個(gè)方法extend,extend2,Ext把它合并為了一個(gè)方法Ext.extend,所以它會(huì)判斷傳進(jìn)來的參數(shù)然后進(jìn)行變換,這樣Ext.extend就支持兩個(gè)參數(shù)和三個(gè)參數(shù)進(jìn)行調(diào)用。對(duì)于前面用到拷貝屬性,Ext做了一個(gè)工具函數(shù)叫做Ext.apply,對(duì)于將一個(gè)對(duì)象的屬性拷貝到一個(gè)類的原型上,Ext做了一個(gè)工具類叫做Ext.override。
- Ext.extend = function() {
- // inline overrides 把傳入的對(duì)象屬性復(fù)制到到this中
- var io = function(o) {
- for (var m in o) {
- this[m] = o[m];
- }
- };
- //oc其實(shí)就是Object函數(shù)
- var oc = Object.prototype.constructor;
- return function(sb, sp, overrides) {
- //如果第二個(gè)參數(shù)是個(gè)對(duì)象而不是類,那么是用兩個(gè)參數(shù)調(diào)用的,***個(gè)參數(shù)是父類,第二個(gè)參數(shù)是對(duì)象
- if (typeof sp == 'object') {
- overrides = sp; //將第三個(gè)參數(shù)換為對(duì)象
- sp = sb; //把***個(gè)參數(shù)賦值第二個(gè)當(dāng)成父類
- sb = overrides.constructor != oc ? overrides.constructor : function() {
- sp.apply(this, arguments);
- }; //子類這個(gè)構(gòu)造函數(shù)要么是外界傳入的名字為constructor,要么就是直接調(diào)用超類構(gòu)造函數(shù)的一個(gè)函數(shù)
- //傳入的constructor除了構(gòu)造自己還要調(diào)用超類的構(gòu)造函數(shù)
- }
- /**
- * 繼承的兩種參數(shù)
- * 1,自己寫一個(gè)構(gòu)造函數(shù),初始化一些字段,然后調(diào)用超類構(gòu)造函數(shù),再寫一個(gè)json對(duì)象,里面是要覆蓋超類的方法或者追加的方法
- * 然后這樣調(diào)用extend(sub,sup,{over1:f,over2:f,addf:f}),就像java的語法
- * SubClass extend SuperClass {
- * SubClass(){
- * super();
- * }
- * }
- *
- * 2,***種可以理解為模擬java,但是因?yàn)闃?gòu)造函數(shù)也是數(shù)據(jù),所以完全可以把構(gòu)造函數(shù)也放進(jìn)那個(gè)jdon對(duì)象,只不過約定好一個(gè)名字
- * 比如constructor,然后這樣調(diào)用
- * extend(sup,{constructor:f,over1:f,over2:f,addf:f})
- */
- var F = function() {
- },
- sbp,
- spp = sp.prototype;
- F.prototype = spp;
- sbp = sb.prototype = new F();
- //以上用干凈函數(shù)嫁接得到子類原型
- sbp.constructor = sb; //然后指定一個(gè)constructor指回子類,這樣就大工告成
- sb.superclass = spp; //在子類上指定一個(gè)靜態(tài)字段指向超類原型,這樣在子類構(gòu)造函數(shù)中可訪問超類構(gòu)造函數(shù)sub.superclass.constructor.call(this, config)
- /**
- * 這段代碼是防御性的,在自己實(shí)現(xiàn)繼承的時(shí)候,可能會(huì)出現(xiàn)原型上的構(gòu)造函數(shù)指向問題,所以如果發(fā)現(xiàn)某個(gè)超類
- * 的構(gòu)造函數(shù)是object,要么這個(gè)超類卻是Object,要么出現(xiàn)了失誤,所以這里再一次重設(shè)置一下,以防萬一,這個(gè)代碼我們在分析Ext的Observable的時(shí)候會(huì)提到的它的作用
- */
- if (spp.constructor == oc) {
- spp.constructor = sp;
- }
- //子類上方一個(gè)靜態(tài)的重寫方法,注意js沒有重載,可以用來重寫子類原型上的函數(shù)
- sb.override = function(o) {
- Ext.override(sb, o);
- };
- //用一個(gè)閉包在子類原型上引用一個(gè)超類原型,引用的是一個(gè)函數(shù)
- sbp.superclass = sbp.supr = (function() {
- return spp;
- });
- //子類原型上放置一個(gè)重寫函數(shù),可以用來覆蓋具體實(shí)例對(duì)象
- sbp.override = io;
- //在子類原型上重寫或添加函數(shù)
- Ext.override(sb, overrides);
- //子類上直接放一個(gè)靜態(tài)繼承方法,貌似實(shí)現(xiàn)多繼承
- sb.extend = function(o) {
- return Ext.extend(sb, o);
- };
- return sb;
- };
- }();
現(xiàn)在使用Ext的extend來實(shí)現(xiàn)我們之前的繼承代碼就如下
- var Plane = function(o) {
- this.x = o.x;
- this.y = o.y;
- };
- Plane.prototype.XY = function() {
- alert(this.x * this.y);
- };
- var Space = Ext.extend(Plane, {
- constructor : function(o) {
- Space.superclass.constructor.call(this, o);
- this.z = o.z;
- },
- XYZ : function() {
- alert(this.x * this.y * this.z);
- }
- });
- var space = new Space({ x:2,y:3,z:4});
- space.XY();
- space.XYZ();
現(xiàn)在我們來分析一下Ext中的繼承重頭戲Observable,它位于Ext.util這個(gè)包下,它的意思即是觀察者,使用觀察者模式,EDA模式,UI組件就利用這種基于觀察和事件的機(jī)制進(jìn)行通信和渲染。
所有的UI組件都繼承這個(gè)類,我們看看它的構(gòu)造函數(shù)
- EXTUTIL.Observable = function(){
- var me = this, e = me.events;
- if(me.listeners){
- me.on(me.listeners);
- delete me.listeners;
- }
- me.events = e || {};
- };
這個(gè)構(gòu)造函數(shù)不需要參數(shù),在java中,這種父類的構(gòu)造可以自動(dòng)的調(diào)用默認(rèn)構(gòu)造函數(shù),但是這里要注意,if(me.listeners)依賴了子類的構(gòu)造行為,這在面向?qū)ο笤瓌t中似乎是一個(gè)禁忌,但是如果一個(gè)繼承體現(xiàn)完全由一個(gè)團(tuán)隊(duì)維護(hù),他們同時(shí)制定繼承規(guī)則和繼承規(guī)范,這也無可厚非,這里的listeners可以在子類中不提供,可以讓構(gòu)造出來的對(duì)象自己調(diào)用on方法來添加監(jiān)聽器,同理這里的events,如果子類沒構(gòu)造會(huì)被賦值為一個(gè)空對(duì)象。那么這個(gè)Observable構(gòu)造器做了兩個(gè)事,一個(gè)是看子類是否在對(duì)象上放了監(jiān)聽器,如果放了,就調(diào)用對(duì)象的on方法進(jìn)行事件和監(jiān)聽的綁定,二是看子類是否在對(duì)象上放置了events,如果沒有就把對(duì)象的events屬性設(shè)置為一個(gè)空對(duì)象。也就是說子類是完全可以不做任何事的,子類只負(fù)責(zé)自己的數(shù)據(jù)構(gòu)造和行為覆蓋或追加,events在和監(jiān)聽器綁定之后就是一個(gè)Ext.util.Event對(duì)象的容器,見這行代碼: me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);也就是說,在Ext中,一個(gè)活生生的能夠響應(yīng)事件的對(duì)象有一個(gè)Event容器,它保存了這個(gè)對(duì)象可以響應(yīng)什么事件以及事件被觸發(fā)后被調(diào)用的監(jiān)聽器。
Observable原型上放置的方法都是子類繼承的方法,子類的對(duì)象就可以在運(yùn)行時(shí)調(diào)用這些方法,如下:
原型上放置了一個(gè)靜態(tài)變量和一些方法,這些方法都是和事件以及監(jiān)聽有關(guān),注意Observable的原型是一個(gè)新的對(duì)象直接量,它的constructor屬性肯定指向的是Object,不是指向的Observable,這豈不是存在bug,我通過代碼檢測發(fā)現(xiàn)alert(Ext.util.Observable.prototype.constructor == Ext.util.Observable);的結(jié)果確實(shí)又是true,怎么回事呢?答案就在Ext.extend的那段防御性代碼,大家回過去看看吧!
現(xiàn)在我們寫一個(gè)繼承Obervable的類,不過不是UI組件,而是一個(gè)領(lǐng)域模型,比如論壇帖子,它在被修改之后會(huì)跑出一個(gè)被修改的事件,監(jiān)聽器捕獲這個(gè)事件將修改保存到數(shù)據(jù)庫中,代碼如下:
- ForumThread = Ext.extend(Ext.util.Observable, {
- constructor: function(config) {
- this.name = config.name;
- //把監(jiān)聽器放進(jìn)超類的屬性
- this.listeners = config.listeners;
- this.events = {"change" : true};
- //給領(lǐng)域模型設(shè)置事件,通過上面的寫法也可以
- /* this.addEvents({
- "change" : true
- });*/
- //調(diào)用超類構(gòu)造超類不變量
- ForumThread.superclass.constructor.call(this, config)
- },
- //領(lǐng)域行為,會(huì)觸發(fā)事件
- changeName : function(newName) {
- alert("原主題名字是:" + this.name);
- this.name = newName;
- alert("更改后主題名字是:" + this.name);
- this.fireEvent("change", this);//觸發(fā)事件
- }
- });
- Ext.onReady(function() {
- var forumThread = new ForumThread({
- name : '關(guān)于將Jdon框架提升為DCI框架的設(shè)想',
- //構(gòu)造領(lǐng)域模型時(shí)注入監(jiān)聽處理程序
- listeners : {
- change : function(thread) {
- alert('接受到事件,將異步保存新的名字:' + thread.name);
- }
- }
- });
- //領(lǐng)域行為調(diào)用
- forumThread.changeName("關(guān)于將Jdon框架提升為DCI框架的設(shè)想,整合JdonMVC");
- });
如果事件設(shè)置和監(jiān)聽綁定直接在子類完成,那么就不必顯式調(diào)超類構(gòu)造函數(shù)
- ForumThread = Ext.extend(Ext.util.Observable, {
- constructor: function(config) {
- this.name = config.name;
- this.events = {"change" : true};
- this.on(config.listeners);
- },
- //領(lǐng)域行為,會(huì)觸發(fā)事件
- changeName : function(newName) {
- alert("原主題名字是:" + this.name);
- this.name = newName;
- alert("更改后主題名字是:" + this.name);
- this.fireEvent("change", this);//觸發(fā)事件
- }
- });
原文鏈接:http://www.blogjava.net/Adley/archive/2011/12/01/365300.html
【編輯推薦】