從-1開始的ES6探索之旅02：小夥子，你對象咋來的？續篇 - 你的對象班（class）裏來的？

時間 2019-11-08

標籤開始 es6 探索之旅小夥子對象來的續篇 class 裏來欄目 JavaScript 简体版

原文原文鏈接

舒適提示：做者的爬坑記錄，對你等大神徹底沒有價值，別在我這浪費生命
舒適提示-續：大家要非得看，我也攔不住，可是至少得準備個支持ES6的Chrome瀏覽器吧？
舒適提示-再續：ES6簡直了，放着不用簡直使人髮指！javascript

書接上回，即使是程序員，也仍是可以經過本身的努力辛辛苦苦找到合適對象的，見前文《javascript對象不徹底探索記錄05：小夥子，你對象咋來的？下篇 - 啥樣的對象適合你》java

還記得咱們新建一個炮姐和黑子廢了多少事嗎程序員

function GirlFriend(name,hairColor,power){
    this.name = name;
    this.hairColor = hairColor;
    this.power = power;
}

GirlFriend.prototype.showPower = function(){
    console.log(this.power)
}

var mikoto = new GirlFriend("Mikoto","brown","Bilibili");
var kuroko = new GirlFriend("Kuroko","black","Telesport");

mikoto.showPower();//Bilibili
kuroko.showPower();//Telesport

class裏來了新同窗

當你擦擦額頭的汗水一臉微笑地看着本身建立出的對象時，邊上小哥早就拉着從class裏找的對象去浪漫土耳其玩了一圈了。
其實在ES6的時代，你根本不用那麼費勁，利用class這個概念，就能夠幫你更方便的帶來一個相對完美對象，例如剛纔咱們所作的，還能夠經過下面的方式實現es6

class GirlFriend{
    constructor(name,hairColor,power){
        this.name = name;
        this.hairColor = hairColor;
        this.power = power;
    }
    showPower(){
        console.log(this.power)
    }
}

var mikoto = new GirlFriend("Mikoto","brown","Bilibili");
var kuroko = new GirlFriend("Kuroko","black","Telesport");
mikoto.showPower();//Bilibili
kuroko.showPower();//Telesport

咱們在控制檯上看看兩個炮姐有什麼不同segmentfault

前一種方法的炮姐：
瀏覽器

用了Class的炮姐：
函數

除了以前的對象方法是個匿名函數沒有name屬性以外沒什麼區別，因此放心的用吧！乾的就是一件事！學習

再看看咱們應該怎麼作，其實很簡單，就是把構造函數construtor()和其餘對象方法一塊兒放到你本身命名的class xxx{}中就能夠了，再利用同構造函數法相同的方式把對象new出來就OK了
說到底利用這種方式構造的對象的原理其實和混合法／前文有說，是同樣的this

話又說回來，其實class這個關鍵字，我早就看好你了，這不就是類嗎，上文所幹的事情不就是在javascript裏建了一個類嗎，但事實上並非這樣的spa

ECMAScript 2015 中引入的 JavaScript 類(classes) 實質上是 JavaScript 現有的基於原型的繼承的語法糖。類語法不是向JavaScript引入一個新的面向對象的繼承模型。JavaScript類提供了一個更簡單和更清晰的語法來建立對象並 處理繼承。
摘自MDN Web docs - Web技術文檔／javascript／類

說明白點，其實仍是原型鏈那點事，只不過寫的像類同樣，這樣方便你們理解和使用罷了，因此爲了避免產生沒必要要的誤會，我決定就不叫它類了，就是class一個javascript中特有的概念

因此這回能夠痛快的繼承了？

是這樣的，看上面定義中標黑的部分
在ES6中，經過對class的應用，有更好更方便的方式來處理繼承
咱們曾經舉過妹妹的例子，妹妹是炮姐的克隆人，跟炮姐有相同的髮色和Bilibili的能力，可是每一個人有不一樣的能力級別，在沒有用到class以前，我是這麼幹的

function Sister(level,number){
    this.level = level;
    this.number = number;
    this.showLevel = function(){
        console.log(this.level);
    }
}
Sister.prototype = mikoto;
var sister01 = new Sister(3,'0001');

而這個只是爲了瞭解原型鏈相關原理的嘗試，從最終的結果看借用了一些繼承的思惟，但繼承說究竟是類／class層面的，在以前很多前輩在javascript中嘗試了對繼承的實現，一文蓋之JavaScript 中的繼承 - MDN Web docs

可是在在ES6中既然有了class這個概念那麼繼承的概念呢
固然是有的！妹妹們，出來吧！

class Sister extends GirlFriend {
    constructor(name, hairColor, power, number, level) {
        super(name, hairColor, power);
        this.number = number;
        this.level = level;
    }
    showLevel() {
        console.log(this.level);
        super.showPower();
    }
}

var sister1 = new Sister("Sister", "brown", "Bilibili", "0001", 3);
sister1.showPower();//Bilibili
sister1.showLevel();//3,Bilibili

效果簡直拔羣，咱們創建了和炮姐有一樣髮色和能力的妹妹，並且還能調用炮姐的能力，而且還有本身的新特性。
用法也很好理解，就是在你定義一個新的class Sister的時候讓它extends要繼承的class GirlFriend，新的class也能夠有本身的構造函數，爲本身添加新的屬性，固然也能夠有新的方法，還能夠調用父class中的方法

這裏面有個神奇的函數super()其實跟他一點不陌生，就跟關鍵字class同樣在許多面向對象的語言中都會出現

而在建立妹妹的過程當中，兩次用到了super()，第一次是在構造函數中，經過super()調用了父class的構造函數使得妹妹也能夠擁有和炮姐同樣多的屬性，第二次是在對象方法中，調用了父class的對象方法，使得妹妹在展現本身level的同時能夠展現本身的Bilibili，在javascript中super()的用法也就主要是這兩種