JS面向?qū)ο缶幊讨?- 繼承

簡述

開始前先定一個父類用于繼承

function Persion(name){
    this.name = name || 'Persion';
    this.opt = {
      a: 1,
      b: 2
    };

    this.eat = function(){
        console.log(this.name + '..eating..')
    }
}
Persion.prototype.getName = function(){
    return this.name;
}

1. 原型鏈繼承

核心:將父類的實例作為子類的原型

function Author() {}
Author.prototype = new Persion();
Author.prototype.constructor = Author;


var xxy = new Author()

console.log(xxy.name) // Persion
xxy.eat() // Persion eating
console.log(xxy.getName()) // Persion
console.log(xxy instanceof Persion); // true
console.log(xxy instanceof Author); // true

優(yōu)點:

  1. 實例是子類的實例榕暇,也是父類的實例
  2. 父類新增原型方法/原型屬性筋帖,子類都能訪問到

缺點:

  1. 無法實現(xiàn)多繼承
  2. 來自原型對象的引用屬性是所有實例共享的
var db = new Author()

xxy.opt.a = 22

console.log(xxy.opt.a) // 22
console.log(db.opt) //22
  1. 創(chuàng)建子類實例時,無法向父類構(gòu)造函數(shù)傳參

2. 構(gòu)造繼承

核心:使用父類的構(gòu)造函數(shù)來增強子類實例涡相,等于復(fù)制父類的實例屬性給子類

function Author(){
    Persion.call(this, name);
}

var xxy = new Author()

console.log(xxy instanceof Persion); // false
console.log(xxy instanceof Author); // true

優(yōu)點:

  1. 解決了原型鏈繼承的缺點2
  2. 創(chuàng)建子類實例時斜做,可以向父類傳遞參數(shù)
  3. 可以實現(xiàn)多繼承(call多個父類對象)

缺點:

  1. 實例并不是父類的實例疤祭,只是子類的實例
  2. 只能繼承父類的實例屬性和方法,不能繼承原型屬性/方法
  3. 無法實現(xiàn)函數(shù)復(fù)用茵瘾,每個子類都有父類實例函數(shù)的副本礼华,影響性能

3. 實例繼承

核心:為父類實例添加新特性,作為子類實例返回

function Author(name){
    var instance = new Persion(name)

    return instance
}

var xxy = new Author()

console.log(xxy instanceof Persion); // true
console.log(xxy instanceof Author); // false

優(yōu)點:

  1. 不限調(diào)用方式

缺點:

  1. 不支持多繼承
  2. 實例是父類的實例拗秘,不是子類的實例

4. 拷貝繼承

function Author(name){
    var instance = new Persion(name)
    for (var p in instance) {
        Author.prototype[p] = instance[p];
    }
}

var xxy = new Author('XXY')

console.log(xxy instanceof Persion); // true
console.log(xxy instanceof Author); // false

優(yōu)點:

  1. 支持多繼承

缺點:

  1. 效率較低圣絮,內(nèi)存占用高(因為要拷貝父類的屬性)
  2. 無法獲取父類不可枚舉的方法(不可枚舉方法,不能使用for in 訪問到)

5. 組合繼承

核心:通過調(diào)用父類構(gòu)造雕旨,繼承父類的屬性并保留傳參的優(yōu)點扮匠,然后通過將父類實例作為子類原型,實現(xiàn)函數(shù)復(fù)用

function Author(name, books){
    Persion.call(this, name);
    this.books = books;
}
Author.prototype = new Persion();
Author.prototype.constructor = Author;

Author.prototype.getBooks = function(){
    return this.books;
}

var xxy = new Author('XXY')
  • 使用callapply方法凡涩,將父對象的構(gòu)造函數(shù)綁定在子對象上棒搜。
  • 任何一個prototype對象都有一個constructor屬性,指向它的構(gòu)造函數(shù)活箕,第17行的目的是為了防止繼承鏈的紊亂力麸。

優(yōu)點:

  1. 彌補了構(gòu)造繼承的缺陷,可以繼承實例屬性/方法育韩,也可以繼承原型屬性/方法
  2. 既是子類的實例克蚂,也是父類的實例
  3. 不存在引用屬性共享問題
  4. 可傳參
  5. 函數(shù)可復(fù)用

缺點:

  1. 調(diào)用了兩次父類構(gòu)造函數(shù),生成了兩份實例(子類實例將子類原型上的那份屏蔽了)

6. 寄生組合繼承

核心:通過寄生方式座慰,砍掉父類的實例屬性陨舱,這樣,在調(diào)用兩次父類的構(gòu)造的時候版仔,就不會初始化兩次實例方法/屬性游盲,避免的組合繼承的缺點

提示:推薦使用

function Author(name){
    Persion.call(this, name);
}

(function(){
    // 創(chuàng)建一個沒有實例方法的類
    var Super = function(){};
    Super.prototype = Persion.prototype;
    //將實例作為子類的原型
    Author.prototype = new Super();
    Author.prototype.constructor = Author;
})();


var xxy = new Author('XXY')

為了簡化類的聲明,可以把派生子類的整個過程包裝在一個extend的函數(shù)中蛮粮。

function extend(subClass, superClass) {
    var F = function(){};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;
}

但是益缎,這樣存在一個問題。就是同名函數(shù)會被復(fù)寫然想,可以添加一個superclass屬性來解決這個問題莺奔。

function extend(subClass, superClass) {
    var F = function() {};
    F.prototype = superClass.prototype;
    subClass.prototype = new F();
    subClass.prototype.constructor = subClass;

    subClass.superclass = superClass.prototype; // 添加superclass屬性
    if(superClass.prototype.constructor == Object.prototype.constructor) {
        superClass.prototype.constructor = superClass;
    }
}

function Author(name, books){
    Author.superclass.constructor.call(this, name);
    this.books = books;
}
extend(Author, Persion);
Author.prototype.getBooks = function(){
    return this.books;
}

有了superclass屬性,子類便可定義跟父類重名的原型方法变泄,使用其原有函數(shù)的邏輯令哟。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末恼琼,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子屏富,更是在濱河造成了極大的恐慌晴竞,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狠半,死亡現(xiàn)場離奇詭異噩死,居然都是意外死亡,警方通過查閱死者的電腦和手機神年,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門已维,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人已日,你說我怎么就攤上這事垛耳。” “怎么了捂敌?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵艾扮,是天一觀的道長。 經(jīng)常有香客問我占婉,道長泡嘴,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任逆济,我火速辦了婚禮酌予,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘奖慌。我一直安慰自己抛虫,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布简僧。 她就那樣靜靜地躺著建椰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪岛马。 梳的紋絲不亂的頭發(fā)上棉姐,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機與錄音啦逆,去河邊找鬼伞矩。 笑死,一個胖子當(dāng)著我的面吹牛夏志,可吹牛的內(nèi)容都是我干的乃坤。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼湿诊!你這毒婦竟也來了狱杰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤厅须,失蹤者是張志新(化名)和其女友劉穎浦旱,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體九杂,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年宣蠕,在試婚紗的時候發(fā)現(xiàn)自己被綠了例隆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡抢蚀,死狀恐怖镀层,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情皿曲,我是刑警寧澤唱逢,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站屋休,受9級特大地震影響坞古,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜劫樟,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一痪枫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧叠艳,春花似錦奶陈、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至拒课,卻和暖如春徐勃,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背捕发。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工疏旨, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扎酷。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓檐涝,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子谁榜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 一.子類的原型對象--類式繼承 類式繼承就是將子類的原型_ proto_指向父類的原型對象幅聘,這個新創(chuàng)建的對象可以訪...
    夏liao夏天閱讀 283評論 0 0
  • ??面向?qū)ο螅∣bject-Oriented帝蒿,OO)的語言有一個標(biāo)志,那就是它們都有類的概念巷怜,而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,096評論 0 6
  • 博客內(nèi)容:什么是面向?qū)ο鬄槭裁匆嫦驅(qū)ο竺嫦驅(qū)ο缶幊痰奶匦院驮瓌t理解對象屬性創(chuàng)建對象繼承 什么是面向?qū)ο?面向?qū)ο?..
    _Dot912閱讀 1,401評論 3 12
  • 求歡天喜地葛超,但愿兩情安穩(wěn)。 世情人情延塑,不及東風(fēng)惡绣张。 無奈收拾殘局,心事怕說破关带,人瘦桃花落侥涵。 不許海誓山盟,更怕甜蜜...
    躲進小樓閱讀 311評論 0 0
  • 前情提要:戀你十年,未曾改變(五十六) 我本來想假借志遠婚禮的名義讓坤在婚禮前一天住在我這磨总,畢竟坤媽重病這段時間...
    lemoney閱讀 477評論 7 3