首先先來學(xué)習(xí)一下js 的幾種繼承方法: 1、原型鏈繼承: - var Base = function()
- {
- this.level = 1;
- this.name = "base";
- this.toString = function(){
- return "base";
- };
- };
- Base.CONSTANT = "constant";
-
- var Sub = function()
- {
- };
- Sub.prototype = new Base();
- Sub.prototype.name = "sub";
優(yōu)點(diǎn):從instanceof關(guān)鍵字來看,實(shí)例既是父類的實(shí)例,又是子類的實(shí)例,看起來似乎是最純粹的繼承。 缺點(diǎn):子類區(qū)別于父類的屬性和方法,必須在Sub.prototype = new Base();這樣的語句之后分別執(zhí)行,無法被包裝到Sub這個(gè)構(gòu)造器里面去。例如:Sub.prototype.name = "sub";無法實(shí)現(xiàn)多重繼承。 2、構(gòu)造繼承: - var Base = function()
- {
- this.level = 1;
- this.name = "base";
- this.toString = function(){
- return "base";
- };
- };
- Base.CONSTANT = "constant";
-
- var Sub = function()
- {
- Base.call(this);
- this.name = "sub";
- };
優(yōu)點(diǎn):可以實(shí)現(xiàn)多重繼承,可以把子類特有的屬性設(shè)置放在構(gòu)造器內(nèi)部。 缺點(diǎn):使用instanceof發(fā)現(xiàn),對(duì)象不是父類的實(shí)例。 3、實(shí)例繼承: - var Base = function()
- {
- this.level = 1;
- this.name = "base";
- this.toString = function(){
- return "base";
- };
- };
- Base.CONSTANT = "constant";
-
- var Sub = function()
- {
- var instance = new Base();
- instance.name = "sub";
- return instance;
- };
優(yōu)點(diǎn):是父類的對(duì)象,并且使用new構(gòu)造對(duì)象和不使用new構(gòu)造對(duì)象,都可以獲得相同的效果。 缺點(diǎn):生成的對(duì)象實(shí)質(zhì)僅僅是父類的實(shí)例,并非子類的對(duì)象;不支持多繼承。 4、拷貝繼承: - var Base = function()
- {
- this.level = 1;
- this.name = "base";
- this.toString = function(){
- return "base";
- };
- };
- Base.CONSTANT = "constant";
-
- var Sub = function()
- {
- var base = new Base();
- for(var i in base)
- Sub.prototype[i] = base[i];
- Sub.prototype["name"] = "sub";
- };
優(yōu)點(diǎn):支持多繼承。 缺點(diǎn):效率較低;無法獲取父類不可枚舉的方法。 這幾種形式各有特點(diǎn),僅就我提供的代碼而言,滿足下面的表格: | instanceof父類 | instanceof子類 | 子類constructor | 不可枚舉方法的繼承 | 多繼承可實(shí)現(xiàn) | 原型鏈繼承 | TRUE | TRUE | FALSE | TRUE | FALSE | 構(gòu)造繼承 | FALSE | TRUE | TRUE | TRUE | TRUE | 實(shí)例繼承 | TRUE | FALSE | FALSE | TRUE | FALSE | 拷貝繼承 | FALSE | TRUE | TRUE | FALSE | TRUE |
補(bǔ)充,如果我們不需要類繼承,只需要對(duì)象繼承,對(duì)于支持 ECMAScript 5 的瀏覽器來說,還可以用Object.create方法來實(shí)現(xiàn): - var Base = function()
- {
- this.level = 1;
- this.name = "base";
- this.toString = function(){
- return "base";
- };
- };
- Base.CONSTANT = "constant";
-
- var sub = Object.create(new Base());
- sub.name = "sub";
類似接口 功能: Java代碼  - function Rect(){
- this.drawRect = function(){
- alert("rect");
- }
- }
-
- function Person(obj){
-
- for(var i in obj){
- this.doWhat = i;
- this.who = obj[i];
- break;
- }
- this.draw = function(){
- this.who[this.doWhat].call(this.who);
- };
- }
-
- var rou = { drawRound : new Round() };
- var rec = { drawRect : new Rect() };
- (new Person(rou)).draw();
- (new Person(rec)).draw();
|