从-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相关的东西还有很多，学习路漫长啊

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