在ES6之前創(chuàng)建類的方式與用class創(chuàng)建類的方式的區(qū)別：

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

class Person {
    // 這是Person的構(gòu)造器
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
var person = new Person('李四', 20)

每個類中都有一個構(gòu)造器，如果沒有手動指定構(gòu)造器，那么，可以認(rèn)為類內(nèi)部中有一塊隱藏的構(gòu)造器，類似于constructor(){}，每次執(zhí)行 new 時，會優(yōu)先執(zhí)行構(gòu)造器中的代碼。

實例屬性與靜態(tài)屬性

在聲明類時，構(gòu)造函數(shù)上傳入的屬性，稱為實例屬性。直接掛載到類上的屬性，稱為靜態(tài)屬性，靜態(tài)屬性無法在實例中調(diào)用。ES6 class關(guān)鍵字，靜態(tài)屬性的聲明方式：

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    static info = '這是一個靜態(tài)屬性'
}
var person = new Person('張三'， 18)
console.log(person.name)    // 張三
console.log(person.info)    // undefined
console.log(Person.info)    // 這是一個靜態(tài)屬性

實例方法與靜態(tài)方法

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    // 實例方法
    sayHello() {
        console.log('Hello, ' + this.name)
    }
    // 靜態(tài)方法
    static eat() {
        console.log('eat')
    }
}
var person = new Person('張三', 20)
person.sayHello()   // Hello, 張三
person.eat()        // undefined
Person.eat()        // eat

繼承

class通過extends關(guān)鍵字實現(xiàn)繼承

語法：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函數(shù)的使用

1. 如果一個子類通過extends關(guān)鍵字繼承了父類，那么在子類的constructor中必須優(yōu)先調(diào)用一次super()
2. super是一個函數(shù)，父類的構(gòu)造器，子類中調(diào)用super，就是對父類構(gòu)造器的引用。
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{ ... }區(qū)間內(nèi)，只能寫構(gòu)造器、靜態(tài)方法、靜態(tài)屬性、實例方法、實例屬性。
2. class關(guān)鍵字內(nèi)部還是使用原來的方法實現(xiàn)，為JavaScript的語法糖。