摘要：面向?qū)ο罄镒畲蟮奶攸c應該就屬繼承了。在第二篇文章里說過原型實例跟構(gòu)造函數(shù)之間的繼承，并且還講了一道推算題。

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

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

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

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

//子類繼承父類
class SmallWang extends OldWang{   
    constructor(work,money,level){
        //這里必需先寫super，不然會報錯
        super(work,money,level);
        this.level=level;   //只有用了super，才能使用this
    }
}

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

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

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

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


new.target返回new命令作用于的那個類
子類繼承父類時，new.target返回子類

class Person{
    constructor(){
        //如果類不是通過new調(diào)用的，就會返回undefined
        if(new.target===undefined){
            throw new Error("請使用new生成實例！");
        }
        console.log(new.target.name);
    }
}
new Person();    //Person類(返回了new作用于的那個類)
Person();        //有些瀏覽器可以不帶new生成實例，就會拋出一個錯誤

class Man extends Person{
}
new Man();    //Man（子類繼承父類時，new.target會返回子類）


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

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

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

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

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

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

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

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

ES6與ES5的對比如下：

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

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

//構(gòu)造函數(shù)，關(guān)系沒變
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
);

//實例，關(guān)系沒變
console.log(
    "實例",
    new Ball().__proto__===Ball.prototype,        //true
    new Father().__proto__===Father.prototype    //true
);

//子類，關(guān)系變了
console.log(
    "子類的__proto__",
    Football.__proto__===Ball,    //false ES5
    Football.__proto__===Function.prototype,//true  ES5
    
    Son.__proto__===Father,     //true ES6
    Son.__proto__===Father.prototype,    //false ES6
    
    //ES6的變化為：子類的__proto__指向父類
);

console.log(
    "子類的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的變化為：子類的prototype的__proto__屬性指向父類的prototype
);

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

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

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

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

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