从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 - 你的对象班（class）里来的？

温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命
温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？
温馨提示-再续：ES6简直了，放着不用简直令人发指！

书接上回，即便是程序员，也还是能够通过自己的努力辛辛苦苦找到合适对象的，见前文《javascript对象不完全探索记录05：小伙子，你对象咋来的？下篇 - 啥样的对象适合你》

还记得我们新建一个炮姐和黑子废了多少事吗

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这个概念，就可以帮你更方便的带来一个相对完美对象，例如刚才我们所做的，还可以通过下面的方式实现

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

我们在控制台上看看两个炮姐有什么不一样

前一种方法的炮姐：

用了Class的炮姐：

除了之前的对象方法是个匿名函数没有name属性之外没什么区别，所以放心的用吧！干的就是一件事！

再看看我们应该怎么做，其实很简单，就是把构造函数construtor()和其他对象方法一起放到你自己命名的class xxx{}中就可以了，再利用同构造函数法相同的方式把对象new出来就OK了
说到底利用这种方式构造的对象的原理其实和混合法／前文有说，是一样的

话又说回来，其实class这个关键字，我早就看好你了，这不就是类吗，上文所干的事情不就是在javascript里建了一个类吗，但事实上并不是这样的

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()的用法也就主要是这两种

super([arguments]);
// 调用 父对象/父类 的构造函数
super.functionOnParent([arguments]);
// 调用 父对象/父类 上的方法`

摘自MDN Web docs - Web技术文档／javascript／super

在这里要注意的一点是，在子class的constructor中必须先调用super才能使用关键字this，不然会报错的，究其原因

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

摘自ECMAScript6入门 Class的继承 - 阮一峰

关于javascript中继承这点事，虽然这看上去跟真的似的，但是这还是个语法糖，还是原型链那点事

这所谓的继承，就是让GirlFirend成为了Sister的原型对象而已

当然ES6中关于class相关的东西还有不少，学习路漫长啊

能看到这的都是真爱
发着烧写，满脸懵逼