首頁 > web前端 > js教程 > 主體

JS繼承之寄生式繼承

小云云
發布: 2018-03-07 10:50:58
原創
2118 人瀏覽過

一聽到「寄生式繼承」這個名詞很容易產生畏難感,這是什麼東東呢?別急,本篇文章將嘗試用簡單易懂的方式闡述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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!