es6中class的语法糖

什么是语法糖？

语法糖(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时，我们必须显式地表明作为对象使用还是作为函数使用