通過(guò)上一篇文章想必各位老鐵已經(jīng)熟悉了class了，這篇文章接著介紹繼承。面向?qū)ο罄镒畲蟮奶攸c(diǎn)應(yīng)該就屬繼承了。一個(gè)項(xiàng)目可能需要不斷的迭代、完善、升級(jí)。那每一次的更新你是要重新寫(xiě)呢，還是在原有的基礎(chǔ)上改吧改吧呢？當(dāng)然，不是缺心眼的人肯定都會(huì)在原來(lái)的基礎(chǔ)上改吧改吧，那這個(gè)改吧改吧就需要用到繼承了。

創(chuàng)新互聯(lián)公司是一家集成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)站頁(yè)面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專(zhuān)業(yè)網(wǎng)絡(luò)公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁(yè)面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huán)境中,互促共生。

在第二篇文章里說(shuō)過(guò)原型實(shí)例跟構(gòu)造函數(shù)之間的繼承，并且還講了一道推算題。最終我們明白，實(shí)例為什么能繼承原型上的內(nèi)容是因?yàn)?code>prototype，所以在ES5里面想要繼承的話就得通過(guò)原型，需要對(duì)prototype進(jìn)行一頓蹂躪才行。那到了ES6里面一切就簡(jiǎn)單了，像開(kāi)了掛似的！so easy，哪里不會(huì)點(diǎn)哪里！

繼承

• class類(lèi)可以通過(guò)extends實(shí)現(xiàn)繼承
• 利用super關(guān)鍵字引入父類(lèi)的構(gòu)造函數(shù)
• ES6規(guī)定子類(lèi)必需在構(gòu)造函數(shù)（constructor）里先調(diào)用super方法
• 子類(lèi)能同時(shí)繼承父類(lèi)的共享方法與私有方法

//這個(gè)類(lèi)做為父類(lèi)('老王')
class OldWang{   
    constructor(work,money){
        this.work=work;
        this.money=money;
    }
    showWork(){
        console.log(`老王是個(gè)${this.work}，看了我的文章后，能力達(dá)到了${this.level}，一個(gè)月能掙${this.money}元`);
    }
    static play(){  //這是個(gè)私有方法，但子類(lèi)依然能繼承到
        console.log('大吉大利，今晚吃雞！不會(huì)玩游戲的前端不是個(gè)好前端！');
    }
}

//子類(lèi)繼承父類(lèi)
class SmallWang extends OldWang{   
    constructor(work,money,level){
        //這里必需先寫(xiě)super，不然會(huì)報(bào)錯(cuò)
        super(work,money,level);
        this.level=level;   //只有用了super，才能使用this
    }
}

//生成實(shí)例
const wang=new SmallWang('前端',20000,'T5');
wang.showWork();    //老王是個(gè)前端，看了我的文章后，能力達(dá)到了T5，一個(gè)月能掙20000元
SmallWang.play();   //大吉大利，今晚吃雞！不會(huì)玩游戲的前端不是個(gè)好前端！  子類(lèi)能繼承父類(lèi)的私有方法

//與ES5里的實(shí)例是一致的
console.log(
    Object.getPrototypeOf(SmallWang)===OldWang, //true 子類(lèi)的原型是OldWang，也就是說(shuō)，它是OldWang的實(shí)例
    wang instanceof OldWang,        //true
    wang instanceof SmallWang,      //true
);

ES5的繼承，實(shí)質(zhì)是先聲明子類(lèi)，然后通過(guò)call方法將父類(lèi)的方法添加到子類(lèi)上，而ES6的繼承機(jī)制完全不同。實(shí)質(zhì)是聲明了子類(lèi)后，子類(lèi)并沒(méi)有this對(duì)象，而是利用super方法引入父類(lèi)的this對(duì)象，再將this修改成子類(lèi)，就這么神奇！

new.target

new是生成實(shí)例的命令。ES6為new命令引入了一個(gè)new.target屬性，該屬性一般用在構(gòu)造函數(shù)之中

• new.target返回new命令作用于的那個(gè)類(lèi)
• 子類(lèi)繼承父類(lèi)時(shí)，new.target返回子類(lèi)

class Person{
    constructor(){
        //如果類(lèi)不是通過(guò)new調(diào)用的，就會(huì)返回undefined
        if(new.target===undefined){
            throw new Error('請(qǐng)使用new生成實(shí)例！');
        }
        console.log(new.target.name);
    }
}
new Person();   //Person類(lèi)(返回了new作用于的那個(gè)類(lèi))
Person();       //有些瀏覽器可以不帶new生成實(shí)例，就會(huì)拋出一個(gè)錯(cuò)誤

class Man extends Person{
}
new Man();  //Man（子類(lèi)繼承父類(lèi)時(shí)，new.target會(huì)返回子類(lèi)）

//利用這個(gè)特性實(shí)現(xiàn)一個(gè)不能獨(dú)立使用，必需繼承后才能用的類(lèi)（像React里的組件）
class Uncle{
    constructor(){
        if(new.target===Uncle){
            throw new Error('這個(gè)類(lèi)不能實(shí)例化，只能繼承后再用');
        }
    }
    showUncle(){
        console.log('都是他舅');
    }
}
//new Uncle();  報(bào)錯(cuò)

//通過(guò)繼承就可以使用Uncle了
class BigUncle extends Uncle{
    constructor(){
        super();    //引入父類(lèi)的構(gòu)造函數(shù)，必須加不然報(bào)錯(cuò)
        this.uncle='他大舅';
    }
}

//實(shí)例
const uncle=new BigUncle();
uncle.showUncle();  //都是他舅

原型

class里的原型關(guān)系相對(duì)于ES5里的原型關(guān)系，ES6對(duì)其進(jìn)行了修改，但只修改了子類(lèi)與父類(lèi)之間的關(guān)系，其它的關(guān)系并沒(méi)有修改。

1. 子類(lèi)的__proto__，表示構(gòu)造函數(shù)的繼承，指向父類(lèi)構(gòu)造函數(shù)
2. 子類(lèi)prototype屬性的__proto__，表示方法的繼承，指向父類(lèi)的prototype

ES5里的繼承關(guān)系，在第二篇文章里詳細(xì)介紹過(guò)，再回顧一下：

//ES5的繼承關(guān)系
const str=new String(123);
console.log(
    str.__proto__===String.prototype，       //true
    String.__proto__===Function.prototype   //true
);  

//可以看到不管實(shí)例還是構(gòu)造函數(shù)，它們的__proto__屬性永遠(yuǎn)都指向原型

ES6與ES5的對(duì)比如下：

//ES5
function Ball(){}
function Football(){
    Ball.call(this);    //ES5的繼承
}

//ES6
class Father{};
class Son extends Father{}

//構(gòu)造函數(shù)，關(guān)系沒(méi)變
console.log(
    '構(gòu)造函數(shù)',
    Ball.__proto__===Ball.prototype,    //false
    Father.__proto__===Father.prototype,//false

    Ball.__proto__===Function.prototype,    //true
    Father.__proto__===Function.prototype   //true
);

//實(shí)例，關(guān)系沒(méi)變
console.log(
    '實(shí)例',
    new Ball().__proto__===Ball.prototype,      //true
    new Father().__proto__===Father.prototype   //true
);

//子類(lèi)，關(guān)系變了
console.log(
    '子類(lèi)的__proto__',
    Football.__proto__===Ball,  //false ES5
    Football.__proto__===Function.prototype,//true  ES5

    Son.__proto__===Father,     //true ES6
    Son.__proto__===Father.prototype,   //false ES6

    //ES6的變化為：子類(lèi)的__proto__指向父類(lèi)
);

console.log(
    '子類(lèi)的prototype的__proto__屬性',
    Football.prototype.__proto__===Ball.prototype,  //false ES5
    Football.prototype.__proto__===Object.prototype,//true  ESS

    Son.prototype.__proto__===Object.prototype,     //false ES6
    Son.prototype.__proto__===Father.prototype,     //true ES6

    //ES6的變化為：子類(lèi)的prototype的__proto__屬性指向父類(lèi)的prototype
);

由此可以看出ES6只修改了子類(lèi)跟父類(lèi)間的原型關(guān)系，其它的不受影響。那至于ES6對(duì)這兩條關(guān)系做了修改的原因跟ES6的繼承機(jī)制有關(guān)系，ES6內(nèi)部的繼承用的是Object.setPrototypeOf方法（ES6新增的方法，作用是把第一個(gè)參數(shù)的原型設(shè)置成第二個(gè)參數(shù)），以下為內(nèi)部過(guò)程：

{
    class Father{};
    class Son{};

    //son的實(shí)例繼承Father的實(shí)例，內(nèi)部會(huì)執(zhí)行下面的代碼
    Object.setPrototypeOf(Son.prototype,Father.prototype);
    //等同于Son.prototype.__proto__=Father.prototype;所以得出結(jié)果：子類(lèi)prototype屬性的__proto__屬性，表示方法的繼承，指向父類(lèi)的prototype屬性

    //son繼承Father的私有屬性，內(nèi)部會(huì)執(zhí)行下面的代碼
    Object.setPrototypeOf(Son,Father);
    //等同于Son.__proto__=Father;所以得出結(jié)果：子類(lèi)的__proto__屬性，表示構(gòu)造函數(shù)的繼承，指向父類(lèi)
}

為什么用了setPrototypeOf后，等價(jià)于把第一個(gè)參數(shù)的__proto__的值設(shè)置成第二個(gè)參數(shù)？是因?yàn)?code>setPrototypeOf方法的內(nèi)部是這樣的：

//setPrototypeOf方法內(nèi)部主要代碼
Object.setPrototypeOf=function(obj,proto){
    obj.__proto__=proto;
    return obj;
}

下一篇介紹super關(guān)鍵字

網(wǎng)站題目：再和“面向?qū)ο蟆闭剳賽?ài)-繼承（五）
標(biāo)題鏈接：http://www.chinadenli.net/article34/gidgse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、虛擬主機(jī)、定制網(wǎng)站、全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)