JavaScript裡繼承的實現

來源:互聯網
上載者:User
真正的物件導向語言必須支援繼承機制,即一個類能夠重用(繼承)另一個類的方法和屬性,在上一篇文章裡介紹了 javascript 裡的類實現 ,這裡介紹下繼承的實現。
JavaScript裡的繼承機制並不是明確規定的,而是通過模仿實現的。
一:對象冒充(object masquerading)
對象冒充是如何在函數環境中使用this關鍵字後發展起來的,其原理如下:建構函式使用this關鍵字給所有的屬性和方法賦值(採用類聲明的建構函式方式)。因為建構函式只是一個函數,所以可以使用ClassA的建構函式成為ClassB的方法,然後調用它。ClassB就會收到ClassA的建構函式中定義的屬性和方法。

function ClassA(sColor)
{
    this.color = sColor;
    this.sayColor = function()
    {
        alert(this.color);
    };
}
function ClassB(sColor)
{
    this.newMethord= ClassA;
    this.newMethod(sColor);
    delete this.newMethod;
}

上面的代碼中ClassA賦予了方法newMethod(函數只是指向它的指標)。然後調用了該方法,傳遞給它的是ClassB的建構函式的參數sColor。最後的代碼刪除了對ClassA的引用,這樣以後就不能再調用它了,所有的新屬性和新方法都必須在刪除了newMethod的程式碼後定義,否在會覆蓋超類的相關屬性和方法:function ClassB(sColor,sName)
{
    this.newMethor = ClassA;
    this.newMethor(sColor);
    delete this.newMethor;
    
    this.name = sName;
    this.sayName = function()
    {
        alert(this.name);
    };
}

二:call()方法
call()方法是與經典的對象冒充方法最相似的方法,它的第一個參數用作this的對象,其它參數都直接傳遞給函數自身,如:function sayColor(sPrefix,sSuffix)
{
    alert(sPrefix + this.color + sSuffix);
}
var obj = new object();
obj.color = "red";
sayColor.call(obj,"The color is ",", a very nice color indeed.");
//outputs "The color is red, a very nice color indeed."

  在上面的例子裡,函數sayColor()在對象外定義,即使它不屬於任何對象,也可以引用關鍵字this,對象obj的color屬性等於"red",調用call()方法時對一個參數是obj,說明應賦予sayColor()函數中的this關鍵字是obj,要與繼承機制的對象冒充方法一起使用該方法,只需將前三行的賦值,調用和刪除代碼替換:function ClassB(sColor,sName)
{
//    this.newMethor = ClassA;
//    this.newMethor(sColor);
//    delete this.newMethor;
    ClassA.call(this,sColor);
    
    this.name = sName;
    this.sayName = function()
    {
        alert(this.name);
    };
}

三: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."

四:原型鏈
prototype對象是個模板,要執行個體化的對象都以這個模板為基礎,prototype對象的任何屬性和方法都被傳遞給那個類的所有執行個體,原型鏈用這種功能實現繼承機制:function ClassA()
{
}

ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function()
{
    alert(this.color);
};

function ClassB()
{
}
ClassB.prototype = new ClassA();

ClassB.prototype = new ClassA(); 這句把ClassB的prototype屬性設定為ClassA的執行個體,與對象冒充相似,子類的所有屬性和方法都必須出現在prototype屬性被賦值後,因為在它之前所有的方法都會被刪除,因為prototype屬性被替換成了新的對象,添加了新的原始對象將被銷毀,所以,為ClassB類添加name屬性和sayName()方法的代碼如下:function ClassB()
{
}

ClassB.prototype = new ClassA();

ClassB.prototype.name = "";
ClassB.prototype.sayName = function()
{
    alert(this.name);
};

五:混合方式
這種方式使用建構函式定義類,並未使用任何原型。重寫前面的例子,代碼如下: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);
}

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.