我們來模仿一下最OO的mootools的繼承機制。它的類都有一個叫做initialize構(gòu)造方法，這與Java的類都有一個與類名同名的構(gòu)造方法一樣的道理。只不過，這些叫initialize或init都是借鑒自Prototype，而Prototype那幫人是Ruby出身。為了區(qū)別mootools那種污染原生方法的做法，我把類的構(gòu)造器命名為variant，并且禁止查看構(gòu)造方法（像瀏覽器禁止查看原生對象的構(gòu)造方法那樣）。

var variant = function (options){ options = options || {}; var initialize = options.initialize || function(){}; var klass = initialize ; klass.constructor = arguments.callee; klass.prototype.constructor = klass; klass.toString = function(){//禁止查看構(gòu)造方法 return "function variant(){/n [variant code]/n}" } return klass; }; var Person = variant({initialize:function(age){ this.age = age; }}); alert(Person)//看不到構(gòu)造方法的實現(xiàn) var p = new Person(3); alert(p) alert(p.age); alert(p.constructor);//看不到構(gòu)造方法的實現(xiàn) var P = variant({}) var a = new P; alert(a);

運行代碼

    var variant = function (options){      options = options || {};      var initialize = options.initialize || function(){};      var klass = initialize ;      klass.constructor = arguments.callee;      klass.prototype.constructor = klass;      klass.toString = function(){//禁止查看構(gòu)造方法        return "function variant(){/n    [variant code]/n}"      }      return klass;    };

這是一個非常簡單的工廠方法，用于生產(chǎn)類的。options就是一屬性包，可能裝有我們的類的構(gòu)造方法，我們要做的是把它提取出來，然后輸送出去。

     function factory(a){         a.b = b;         a.c = c;         return a;      }

不過，這就有點像倒?fàn)敚覀儜?yīng)該像水果商，從果農(nóng)收購水果回來包裝一番，才賣出去。這包裝就是往要生成的類添加各種原型方法與類方法。我們進一步打造我們的類工廠，讓生產(chǎn)的類擁有繼承能力，也就是把第一部分的makeBridge 加上去。

var variant = function (options){ options = options || {}; var initialize = options.initialize || function(){}; var superclass = options.inherit; delete options.initialize; delete options.inherit; var klass = initialize ; if(superclass){//如果是通過繼承得來的屬性 var bridge = function() {}; bridge.prototype = superclass.prototype; klass.prototype = new bridge; klass.prototype.superclass = superclass; } for(var i in options){//mixin klass.prototype[i] = options[i] } klass.constructor = arguments.callee;//類的靜態(tài)屬性 klass.prototype.constructor = klass;//真正用來創(chuàng)建實例的 klass.toString = function(){ return "function variant(){/n [variant code]/n}" } return klass; }; var Animal = variant({ initialize:function(name){ this.name = name; }, getName:function(){ return "這是" +this.name; } }); var a = new Animal("動物"); alert(a.name) alert(a.getName()) var Tiger = variant({ inherit:Animal, initialize:function(name,age){ this.name = name; this.age =age; }, getAge : function(){ return this.age; }, setAge : function(age){ this.age = age; } }) var t = new Tiger("老虎",10); alert(t.age) alert(t.getName()) t.setAge(11); alert(t.getAge()); // alert(a.getAge());動物實例并沒有此方法

運行代碼

prototype繼承是通過把子類的原型設(shè)置成父類的一個實例來進行繼承的。因此無論是inherit也好，mixin也好，都是往子類的原型添加?xùn)|西。打個比方，繼承就是把一大堆屬性與方法直接加在子類的原型上，mixin則相當(dāng)于把一打?qū)傩耘c方法逐一加到構(gòu)造函數(shù)的原型。不過在上面Tiger類的構(gòu)造器寫得有點不好，因為name屬性本來父類就有，子類就不用定義一次。如果父類有許多實例屬性，豈不是要寫一大打賦值語句。應(yīng)該改為

    var Tiger = variant({      inherit:Animal,      initialize:function(name,age){        this.superclass(arguments);//this.name = name        this.age =age;      },      getAge : function(){        return this.age;      },      setAge : function(age){        this.age = age;      }    })

但是這種做法在第三代子類就行不通了，比如我們弄個子類叫IndiaTiger，它比Tiger多出一個類例屬性location。

var IndiaTiger = variant({        inherit:Tiger,        initialize:function(name,age,location){          this.superclass(arguments);          this.location =location;        }      });

var variant = function (options){ options = options || {}; var initialize = options.initialize || function(){}; var superclass = options.inherit; delete options.initialize; delete options.inherit; var klass = initialize ; if(superclass){//如果是通過繼承得來的屬性 var bridge = function() {}; bridge.prototype = superclass.prototype; klass.prototype = new bridge; klass.prototype.superclass = superclass; } for(var i in options){//mixin klass.prototype[i] = options[i] } klass.constructor = arguments.callee;//類的靜態(tài)屬性 klass.prototype.constructor = klass;//真正用來創(chuàng)建實例的 klass.toString = function(){ return "function variant(){/n [variant code]/n}" } return klass; }; var Animal = variant({ initialize:function(name){ this.name = name; }, getName:function(){ return "這是" +this.name; } }); var Tiger = variant({ inherit:Animal, initialize:function(name,age){ this.superclass(arguments) this.age =age; }, getAge : function(){ return this.age; }, setAge : function(age){ this.age = age; } }); var IndiaTiger = variant({ inherit:Tiger, initialize:function(name,age,location){ this.superclass(arguments); this.location =location; } }); try{ var i = new IndiaTiger("印度虎",2,"印度"); alert(i.getName()); i.setAge(3); alert(i.getAge()); alert(i.location); }catch(e){ alert("報錯了"); alert(e); }

運行代碼

當(dāng)new印度虎實例時就報錯了，除非其父類的構(gòu)造器沒有用到this.superclass(arguments)。不用說，問題是出自this，它的不確定性總是為我們?nèi)呛芏嗦闊＿@里的this總為IndiaTiger 的實例，因此this.superclass總為Tiger ，也因此我們無法實例化Animal 。Javascript的實例化過程是，有父類先實例化父類，然后再到下級子類。由于我們無法通過klass.prototype.superclass獲取Animal，我們可以用klass.superclass來試一下。klass為類，而this為實例：

IndiaTiger.superclass.apply(this, arguments);//this為IndiaTiger 的實例//arguments為IndiaTiger 構(gòu)造器的參數(shù)對象

但我們不能把前面的IndiaTiger 寫死，因為創(chuàng)建IndiaTiger 這個類時，它還不知自己叫IndiaTiger ，我們可以通過arguments.callee獲取IndiaTiger自身。Tiger的構(gòu)造相仿。

        var IndiaTiger = variant({          inherit:Tiger,          initialize:function(name,age,location){            arguments.callee.superclass.apply(this, arguments);            this.location =location;          }        });

我們可以把它再抽取出來，這樣每次就不用寫這么長的代碼了。

        function _super(o, args) {//o為子類的實例,agrs為子類構(gòu)造的arguments對象            return args.callee.superclass.apply(o, args);        }

上面的代碼已經(jīng)假設(shè)了，它的構(gòu)造器總會有inherit這個屬性，但如果沒有豈不是會報錯，另，它還假設(shè)了我們的類上面有一個屬性叫superclass，因此我們要在類工廠中做相應(yīng)的調(diào)整。添加或修改如下兩行代碼：

  var superclass = options.inherit || Object;  klass.superclass = superclass; //類的superclass

function _super(o, args) {//o為子類的實例,agrs為子類構(gòu)造的arguments對象 return args.callee.superclass.apply(o, args); } var variant = function (options){ options = options || {}; var initialize = options.initialize || function(){}; var superclass = options.inherit || Object; delete options.initialize; delete options.inherit; var klass = initialize ; var bridge = function() {}; bridge.prototype = superclass.prototype; klass.prototype = new bridge; klass.prototype.superclass = superclass;//實例的superclass for(var i in options){//mixin klass.prototype[i] = options[i] } klass.constructor = arguments.callee;//類的靜態(tài)屬性 klass.prototype.constructor = klass;//真正用來創(chuàng)建實例的 klass.superclass = superclass; //類的superclass // klass.toString = function(){ // return "function variant(){/n [variant code]/n}" // } return klass; }; var Animal = variant({ initialize:function(name){ this.name = name; }, getName:function(){ return "這是" +this.name; } }); var Tiger = variant({ inherit:Animal, initialize:function(name,age){ _super(this,arguments) this.age =age; }, getAge : function(){ return this.age; }, setAge : function(age){ this.age = age; } }); var IndiaTiger = variant({ inherit:Tiger, initialize:function(name,age,location){ _super(this,arguments); this.location =location; } }); var i = new IndiaTiger("印度虎",2,"印度"); alert(i.getName()); i.setAge(3); alert(i.getAge()); alert(i.location); alert(i.superclass)//我們暫時撤去toString方法，它將會彈出其父類的構(gòu)造器initialize

運行代碼

不過每次設(shè)置新類的構(gòu)造器時都要添加一行_super(this,arguments)也太麻煩了，最好把它隱藏起來，內(nèi)部調(diào)用。另，把_super方法放到工廠外，顯得太松散，既然也是用來構(gòu)建類，因此也該把它整合到類工廠中。

      function factory(a){         var b = function(){             s();             a();             //*****其他方法         }         return b      }

也就是說，我們只要這樣設(shè)置類的構(gòu)造器即可：

        var IndiaTiger = Variant({          inherit:Tiger,          initialize:function(name,age,location){            this.location =location;//★★★★★          }        });

<!doctype html><html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>類</title> <mce:script type="text/<a href=/itjie/Javajishu/ target=_blank class=infotextkey>Java</a>script" charset="utf-8"><!-- window.onload = function(){ var Variant = function (options){ options = options || {}; var initialize = options.initialize || function(){}; var superclass = options.inherit || Object; var klassname = options.klassname ; delete options.initialize; delete options.inherit; var klass = function() { superclass.apply(this, arguments); initialize.apply(this, arguments) }; var bridge = function() {};//繼承父類 bridge.prototype = superclass.prototype; klass.prototype = new bridge; klass.prototype.superclass = superclass;//實例的superclass klass.superclass = superclass; //類的superclass，用于創(chuàng)建父類的實例 for(var i in options){//mixin klass.prototype[i] = options[i] } klass.constructor = arguments.callee;//類的靜態(tài)屬性 klass.prototype.constructor = klass;//用于創(chuàng)建當(dāng)前類的實例 var getKlassContext = function(c) { var e = c.toString().replace(/[/s/?]/g,""); getKlassContext = function() { return e; }; return getKlassContext(); }; var getKlassName = function(search,context){ var search = search.toString().replace(/[/s/?]/g,""), last = search.length >= 50 ? 50 :search.length; search = search.substring(0,last); var end = context.indexOf(search),start = end-100; start = start < 0 ? 0 :start; var str = context.substring(start,end); str = str.match(/var(/w+)/=Variant/); return (str && str[1]) ? str[1] :"Object"; }; if(!klassname){ context = getKlassContext(arguments.callee.caller); klassname = getKlassName(initialize,context); if(klassname == "Object"){ throw Error("如果沒有klassname就必須顯式設(shè)置initialize"); } } klass.klassname = klassname; klass.prototype.klassname = klassname; klass.toString = function(){ return ("function "+klassname+"(){/n [variant code]/n}"); } return klass; }; var Animal = Variant({ initialize:function(name){ this.name = name; }, getName:function(){ return "這是" +this.name; } }); var Tiger = Variant({ inherit:Animal, initialize:function(name,age){ this.age =age; }, getAge : function(){ return this.age; }, setAge : function(age){ this.age = age; } }); var IndiaTiger = Variant({ inherit:Tiger, initialize:function(name,age,location){ this.location =location; } }); var i = new IndiaTiger("印度虎",2,"印度"); alert(i.klassname); alert(i.getName()); i.setAge(3); alert(i.getAge()); alert(IndiaTiger); alert(Tiger); }// --></mce:script> </head> <body> <pre> var Animal = Variant({ initialize:function(name){ this.name = name; }, getName:function(){ return "這是" +this.name; } }); var Tiger = Variant({ inherit:Animal, initialize:function(name,age){ this.age =age; }, getAge : function(){ return this.age; }, setAge : function(age){ this.age = age; } }); var IndiaTiger = Variant({ inherit:Tiger, initialize:function(name,age,location){ this.location =location; } }); var i = new IndiaTiger("印度虎",2,"印度"); alert(i.klassname); alert(i.getName()); i.setAge(3); alert(i.getAge()); alert(IndiaTiger); alert(Tiger); </pre> </body></html>

運行代碼

it知識庫：javascript框架之繼承機制(二)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。