什么是语法糖？
语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言，操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。用比较通俗易懂的方式去理解就是，在之前的某个语法的基础上改变了一种写法，实现的功能相同，但是写法不同了，主要是为了让开发人员在使用过程中更方便易懂。
es6中的语法糖有哪些？
这个话题其实很大，es6中的语法糖太多了，例如常用的箭头函数，解构赋值等都是语法糖，具体的可以看看这篇文章。
es6中的class
es5和es6构造实例的区别
接下来就进入正题了，揭开es6中class的神秘面纱。首先为什么会有class的概念，在es5时期，生成实例是通过构造函数，但是如果要添加方法的话，就必须在原型上去添加，这样构造函数new出来的实例才可以用这个方法。就比如这样：
// Person为构造函数
function Person (name, age) {
this.name = name,
this.age = age
}
// 在构造函数的原型上添加方法
Person.prototype.getName = function () {
return this.name
}
// 构造一个实例
var huhaha = new Person('huhaha', 21)
// 在实例上调用该方法
var myName = huhaha.getName()
console.log(myname) // huhaha
那么在es6中怎么使用class去实现它呢，先看代码再解释～
// 类中的this指向创建的实例
class Person {
constructor (name, age) {
this.name = name
this.age = age
}
getName () {
return this.name
}
}
// 构造一个实例
let huhaha = new Person('huhaha', 21)
// 在实例上调用该方法
const myName = huhaha.getName()
console.log(myname) // huhaha
我们可以看到通过es6去实现，更容易理解，并且代码量也有所减少。使用这种方式，我们可以清楚的明白，前面使用了class的就是一个类，那么它就有构造实例的能力，并且constructor中放的是每个通过该类构造出来的实例都可以获得属性，在constructor外面放的是可以获得的方法。
除了在写法上的区别，class和构造函数还有一个区别就是在class中定义的方法是不可枚举的，而在es5中原型上添加的方法是可枚举的。还有一点就是，使用class，在创建实例的时候必须使用new，而普通的构造函数是可以省略的。
class基本语法
constructor函数
constructor是类的默认方法，如果在写class时，没有添加该方法，js引擎会默认添加这个方法。通过new去构造实例时，会自动去调用该方法，该方法默认返回的是该实例对象，但是也可以指定返回的对象，比如下面的情况：
class Fun {
constructor () {
// 改变默认返回的内容
return Object.create(null)
}
}
let fun = new Fun()
// fun不是Fun的实例
fun instanceof Fun // false
静态属性
如果在类中一个属性的前面有static关键词时，就表明这个属性是静态属性。静态属性是类的属性，通过类构造的实例中是没有这个属性的，只有通过类才可以拿到这个属性。
静态方法
如果在类中一个方法的前面有static关键词时，就表明这个方法就是静态方法。静态方法的特殊性有两点：首先，在由该类创建的实例中，是不能调用该方法的，这个方法只能通过类本身去调用；其次，如果在该方法中包含this，那么this指向的是该类，下面的例子可以证明这两点：
class Person {
constructor (name, age) {
this.name = name
this.age = age
}
getName () {
return this.name
}
static age = 42
static getAge () {
return this.age
}
}
let huhaha = new Person ('huhaha', 21)
huhaha.getName() // huhaha
huhaha.getAge() // TypeError: huhaha.getAge is not a function
Person.getAge() // 42
class的继承
我们知道在es5中继承的方式有很多种，最简单的方式就是通过原型链进行继承，但是就算是这种最简单的方式也会让人很容易混乱；为了解决这个问题，es6中使用extends关键字去表示继承，并在子类中使用super关键字去继承父类的内容，下面这个例子可以很好的表明es6中的继承关系：
// Father为父类
class Father {
constructor (x, y) {
this.x = x
this.y = y
}
toString () {
return 'string'
}
}
// Child为子类，继承Father
class Child extends Father {
constructor (x, y, z) {
super (x, y) // 调用Father类中的constructor(x, y)
this.z = z
}
toString () {
return super.x + super.toString() // 通过super调用Father类中定义的方法
}
}
在上面的例子中，我们可以看到，子类继承父类最关键的地方就是，需要在子类的constructor中使用super去继承父类，它在这里表示的是父类的构造函数，用来新建父类的this对象。这里完成继承的思想是，子类是通过先在父类中创建一个实例，拥有了父类中定义的属性和方法，然后子类再添加自己的属性和方法。这个和es5中的思想不太一致的地方在于es5中是先创建子类的this对象，然后将父类的属性和方法添加到子类的this中。通过图来简单的解释就是：
-
es6中的实现思路
image.png
- es5中的实现思路
image.png
之前我们有讲到类的静态属性和静态方法，当时说的是前面使用了static关键字的就是指这个类上面属性和方法，实例是拿不到的。在这里我们可以看作是这个静态的内容，只是针对于创建实例，对于子类的继承是不影响的，也就是说在子类中是可以继承到父类中的静态属性和方法的，甚至于我们可以在子类中对这些属性和方法进行覆盖。
检验父类的方法
我们可以通过Object.getPrototypeOf方法去检测子类与父类之间的继承关系，如下例：
// 检测Father是否为Child的父类
Object.getPrototypeOf(Child) === Father // true
super关键字
super关键字是实现继承最关键的内容，它有两个身份，第一个是当作函数使用，第二个是当作对象使用，这个点其实在上面的例子也有体现到，现在我们再来仔细说一说。
作为函数使用
当作为函数使用时，super表示的是父类的构造函数，我们需要注意以下几点：
- 在子类中必须包含super
- 子类中的super只能在构造函数中使用
- super内部的this是指向子类的，这一点可以看这里
作为对象使用
当作为对象去使用的时候，一般就是通过super去调用父类的属性和方法了，但是这里需要注意的是，使用super只能获取到父类原型中包含的属性和方法，也就是说后面通过实例添加的属性和方法是获取不到的。我们需要注意以下几点：
- 在静态方法中使用时，super指向的是父类而不是父类的原型对象
- 在普通方法中使用时，super指向的是父类的原型对象而不是父类本身
- 在静态方法中通过super去调用父类的方法时，this指向的是子类，而不是子类的实例
- 在使用super时，我们必须显式地表明作为对象使用还是作为函数使用
网友评论