ES6中class的使用

在ES6之前创建类的方式与用class创建类的方式的区别：

function Person(name, age) {
    this.name = name
    this.age = age
}
var person = new Person('张三', 18)

class Person {
    // 这是Person的构造器
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
var person = new Person('李四', 20)

每个类中都有一个构造器，如果没有手动指定构造器，那么，可以认为类内部中有一块隐藏的构造器，类似于constructor(){}，每次执行 new 时，会优先执行构造器中的代码。

实例属性与静态属性

在声明类时，构造函数上传入的属性，称为实例属性。直接挂载到类上的属性，称为静态属性，静态属性无法在实例中调用。ES6 class关键字，静态属性的声明方式：

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    static info = '这是一个静态属性'
}
var person = new Person('张三'， 18)
console.log(person.name)    // 张三
console.log(person.info)    // undefined
console.log(Person.info)    // 这是一个静态属性

实例方法与静态方法

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 实例方法
    sayHello() {
        console.log('Hello, ' + this.name)
    }
    // 静态方法
    static eat() {
        console.log('eat')
    }
}
var person = new Person('张三', 20)
person.sayHello()   // Hello, 张三
person.eat()        // undefined
Person.eat()        // eat

继承

class通过extends关键字实现继承

语法：class 子类 extends 父类 {}

原代码：

class Chinese {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
class American {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

通过extends继承：

// 父类
class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    sayHello() {
        console.log('Hello, ' + this.name)
    }
}
// 子类
class Chinese extends Person {}
class American extends Person {}

var zs = new Chinese('张三', 18)
var jack = new American('jack', 18)

super函数的使用

1. 如果一个子类通过extends关键字继承了父类，那么在子类的constructor中必须优先调用一次super()
2. super是一个函数，父类的构造器，子类中调用super，就是对父类构造器的引用。
3. 在子类中，this只能放在super后使用。

示例：

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
class Chinese extends Person {
    constructor(name, age, idcard) {
        super(name, age)
        this.idcard = idcard
    }
}

注意

1. 在class{ ... }区间内，只能写构造器、静态方法、静态属性、实例方法、实例属性。
2. class关键字内部还是使用原来的方法实现，为JavaScript的语法糖。