JavaScript之繼承方式

  真正的面嚮對象語言必須支持繼承機制,即一個類能夠重用(繼承)另一個類的方法和屬性。

      所有開發者定義的類都可作爲基類,出於安全原因,本地類和宿主類不能作爲基類。有時你可能想創建一個不能直接使用的基類,它只是用於給子類提供通用的函數,這種基數被看作抽象類。創建的子類將繼承超類的所有屬性和方法,包括構造函數及方法的實現。所有的屬性和方法都是公用的,子類可直接訪問這些方法,還可添加超類中沒有的屬性和方法,也可覆蓋超類中的屬性和方法。

一、 繼承的方式

      (1) 對象冒充:構造函數使用this關鍵字給所有屬性和方法賦值(即採用聲明的構造函數方式)。因爲構造函數只是一個函數,所在可使ClassA的構造函數成爲ClassB的方法,然後調用它,ClassB就會收到ClassA的構造函數中定義的屬性和方法。所有的新屬性和新方法都必須在刪除了新方法的代碼行後定義。

function ClassA(sColor){
        this.color=sColor;
        this.sayColor=function(){
                alert(this.color);
        }
}
function ClassB(sColor){
       this.newMethod=ClassA;
       this.newMethod(sColor);
       delete this.newMethod //刪除了對ClassAr的引用
       this.name=sName;
       this.sayName=function(){
                alert(this.name);
       }
}
var objA=new ClassA(“red”);
var objB=new ClassB(“blue”,”Nicholas”);
objA.sayColor(); //outputs “red”
objB.sayColor(); //outputs “blue”
objB.sayName(); //outputs “Nicholas”

      對象冒充支持多重繼承,一個類可以繼承多個超類。

       (2)、call()方法

       它的第一個參數用作this的對象,其他參數都直接傳遞給函數自身。

function sayColor(sPrefix,sSuffix){
          alert(sPrefix+this.color+sSuffix);
};
var obj=new Object();
obj.color=”red”;
syaColor.call(obj,”This color is”,”, a very nice color indeed.”);
//outpus “This color is red , a very nice color indeed.”

         要與繼承機制的對象冒充方法一起使用該方法,只需將前三行的賦值、調用和刪除代碼替換即可:

function ClassB(sColor,sName){
         //this.newMethod=ClassA;
         //this.newMethod(sColor);
         ClassA.call(this,sColor);
         this.name=sName;
         this.sayName=function(){
                 alert(this.name);
         };
  }

          (3)、apply()方法

          apply()方法有兩個參數,用作this的對象和要傳遞給函數的參數的數組。

function sayColor(sPrefix,sSuffix){
        alert(sPrefix+this.color+sSuffix);
};
var obj=new Object();
obj.color=”red”;
sayColor.apply(obj,new Array(“The color is ”,”, a very nice color indeed.”));
//outputs “The color is red, a very nice color indeed.”

          該方法也用於替換前三行的賦值、調用和刪除新方法的代碼。

function ClassB(sColor,sName){
         //this.newMethod=ClassA;
         //this.newMethod(sColor);
         classA.apply(this,new Array(sColor));
          this.name=sName;
          this.sayName=function(){
                   alert(this.name);
         };
}

      (4)、原型鏈

      prototype對象是個模版,要實例化的對象都以這個模板爲基礎。prototype對象的任何屬性的方法都被傳遞給那個類的所有實例。

function ClassA(){
}
ClassA.prototype.color=”red”;
ClassA.prototype.sayColor=function(){
         alert(this.color);
};
function ClassB(){
}
ClassB.prototype=new ClassA();
ClassB.prototype.name=””;
ClassB.prototype.sayName=function(){
          alert(this.name);
}

      調用ClassA的構造函數時,沒有給它傳遞參數,這在原型鏈中是標準做法,要確保構造函數沒有任何函數。子類的所有屬性和方法都必須出現在prototype屬性被賦值後,因爲在它之前賦值的所有方法都會被刪除。Prototype屬性被替換成了新對象,添加了新方法的原始對象將銷燬。原型鏈的弊端是不支持多重繼承。

      (5)、混合方式

       用對象冒充繼承構造函數屬性,用原型鏈繼承prototype對象的方法。

function ClassA(sColor){
          this.color=sColor;
}
ClassA.prototype.sayColor=function(){
          alert(this.color);
};
function ClassB(sColor,sName){
          ClassA.call(this,sColor);
          this.name=sName;
}
ClassB.prototype=new ClassA();
ClassB.prototype.sayName=function(){
          alert(this.name);
};

二、其它繼承方式

      由於ECMAScript繼承機制的限制,世界各地的開發者都在爲創建實現繼承機制的其他方式而不懈地努力着。簡單介紹一個其中兩種方式。

      (1)、zlnherit

      利用zlnherit庫,不必須使用原型鏈,也可實現繼承。支持多重繼承,原型鏈不支持這種能力。Zlnherit給Object類添加了兩上方法:inheritFrom()和instanceOf()。
      inheritFrom()方法指定類的所有方法,接受一個參數,即要複製的方法所屬的類。必須在原型賦值之處調用inheritFrom()方法。要繼承屬性和方法,inheritFrom()方法必須與對象冒充一起使用。
      instanceOf()方法是instanceof運算符的替代器。

      (2)、xbObjects

      xbObjects的目的是爲JavaScript提供更強的面向對象範型,不僅支持繼承,還支持方法的重載和調用超類方法的能力。
      第一步:必須註冊類,此時需定義它是由哪個類繼承而來。其必須放在指定子類的前面。
      第二步:在構造函數內調用defineClass()方法,傳給它類名及被Clary稱爲原型函數的指針,該函數用於初始化對象的所有屬性和方法。
      第三步:爲該類創建init()方法,該方法負責設置該類的所有屬性,必須接受與構造函數相同的參數。

_classes.registerClass(“ClassA”);
function ClassA(sColor){
          _classes.defineclass(“classA”,prototypeFunction);
         this.init(sColor);
         function prototypeFunction(){
         ClassA.prototype.init=function(sColor){
                    this.parentMethod(“init”);
                    this.color=sColor;
          } ;
       };
}

原創文章,轉載請註明: 轉載自http://www.yiiyaa.net/
本文鏈接地址: http://www.yiiyaa.net/726
發佈了6 篇原創文章 · 獲贊 1 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章