首頁  >  文章  >  web前端  >  JS繼承之寄生式繼承

JS繼承之寄生式繼承

小云云
小云云原創
2018-03-07 10:50:582115瀏覽

一聽到「寄生式繼承」這個名詞很容易產生畏難感,這是什麼東東呢?別急,本篇文章將嘗試用簡單易懂的方式闡述JS中的這種繼承方式,希望能幫助大家。

一、一個例子

我們先定義一個空函數,形參是original,就像下面這樣:

function createAnother(original){}

在該函數中建立一個新物件clone:

function createAnother(original){
    var clone=Object.create(original);
}

給clone物件增加屬性sayHi,sayHi屬性是一個函數:

function createAnother(original){
    var clone=Object.create(original);    clone.sayHi=function(){
        alert('hi');
    };
}

最後,回傳clone物件:

function createAnother(original){
    var clone=Object.create(original);    clone.sayHi=function(){
        alert('hi');
    };    return clone;
}

假設我們有這樣一個物件:

var person={
    name:'Nicholas',
    friends:['Shelby','Court','Van']
};

將以上物件作為實參傳入我們的函數運行:

var anotherPerson=createAnother(person);
anotherPerson.sayHi();

運行結果是:將彈出'Hi'的視窗。

二、疑點:該方式與與原型式繼承Object.create(o)有何不同?

我們看到,函數createAnother有這樣一句:

var clone=Object.create(original);

這不就是原型式繼承嗎?
的確,這裡確實在內部使用了原型式繼承的方法,最後回傳的就是clone物件。不過還是跟原型式繼承有點差別:
原型式繼承繼承了原物件的屬性,新物件並沒有新的額外屬性;寄生式繼承在內部就可以為新物件增加屬性,新物件除了擁有原始物件的屬性,也擁有內部增加的屬性。
以上例來說,相較於原型式繼承,多出來的關鍵語句:

    clone.sayHi=function(){
        alert('hi');
    };

建立一個實例後,該實例就擁有該屬性。

相關推薦:

幾種js繼承的式分享

js繼承Base類別的源碼解析_js面向物件

js繼承的實作程式碼_javascript技巧

以上是JS繼承之寄生式繼承的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn