摘要：聲明和定義聲明一個(gè)構(gòu)造函數(shù)聲明一個(gè)類以上兩者相比之下，很可以看出，類函數(shù)比構(gòu)造函數(shù)，代碼量更少，并且結(jié)構(gòu)層次更加簡(jiǎn)潔明了。類主要內(nèi)容是構(gòu)造函數(shù)靜態(tài)方法繼承。構(gòu)造函數(shù)一個(gè)類里，必有一個(gè)函數(shù)，默認(rèn)。

ES6中class是基于原型的繼承的語(yǔ)法糖，提供更加清晰的語(yǔ)法來(lái)創(chuàng)建對(duì)象和原型。

es5 聲明一個(gè)構(gòu)造函數(shù)：

function Student(name, age) {
    this.name = name;
    this.age = age;
}

Student.prototype.getInfo = function() {
    return "{name:" + this.name + ",age:" + this.age + "}";
}

Student.prototype.setInfo = function(name, age) {
    this.name = name;
    this.age = age;
}

var p = new Student("nico", 1);
p.getInfo(); //{name:nico,age:1}
p.setInfo("siip", 10);
p.getInfo(); //{name:siip,10}

es6 聲明一個(gè)類：

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    getInfo() {
        return `{name:${this.name},age:${this.age}}`;
    }
    setInfo(name, age) {
        this.name = name;
        this.age = age;
    }
}
let p = new Student("nico", 1);
p.setInfo("siip", 10);
p.getInfo();//{name:siip,10}

以上兩者相比之下，很可以看出，es6類函數(shù)比es5構(gòu)造函數(shù)，代碼量更少，并且結(jié)構(gòu)層次更加簡(jiǎn)潔明了。

有些地方需要注意的是：

es5存在變量提升(var xxx,function xxx(){})

es6不存在變量提升(const,let,class)

constructor

constructor是默認(rèn)的方法，就算在聲明類函數(shù)時(shí)沒(méi)有寫(xiě)constructor方法，在實(shí)例化時(shí)會(huì)自動(dòng)添加上一個(gè)空的constructor

class Student {
    constructor() {
        this.desc = "test";
    }
}

通過(guò)babel轉(zhuǎn)碼：

   function _classCallCheck(instance, Constructor) {
        if (!(instance instanceof Constructor)) {
            throw new TypeError("Cannot call a class as a function");
        }
    }

    var Student = function Student() {
        _classCallCheck(this, Student);//類不能直接被調(diào)用，只能通過(guò)new實(shí)例化

        this.desc = "test";
    };

constructor方法指向自身，在一個(gè)類中只能有一個(gè)名為 “constructor” 的特殊方法。

Student === Student.prototype.constructor;//true

static

簡(jiǎn)述：顧名思義這是一個(gè)靜態(tài)方法，就是不需要實(shí)例化類就可以調(diào)用的方法， 實(shí)例化對(duì)象不能繼承靜態(tài)方法。

class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    static ageFilter(...args) {
        let stuAge = args;
        let arr = [];

        for (let i = 0; i < stuAge.length; i++) {
            if (stuAge[i].age > 12) {
                arr.push(stuAge[i])
            }
        }
        return arr;
    }
    getInfo() {
        return `{name:${this.name},age:${this.age}}`;
    }
    setInfo(name, age) {
        this.name = name;
        this.age = age;
    }
}
Student.ageFilter({
    name: "a",
    age: 1
}, {
    name: "b",
    age: 14
});//{name: "a", age: 14}

靜態(tài)函數(shù)的this指向類函數(shù)自身，當(dāng)this沒(méi)有指明被誰(shuí)調(diào)用時(shí)，this為undefined

我們將上面代碼用babel編譯，從結(jié)果上看：

    var _createClass = function() {
        function defineProperties(target, props) {
            for (var i = 0; i < props.length; i++) {
                var descriptor = props[i];
                descriptor.enumerable = descriptor.enumerable || false;
                descriptor.configurable = true;
                if ("value" in descriptor) descriptor.writable = true;
                Object.defineProperty(target, descriptor.key, descriptor);
            }
        }
        return function(Constructor, protoProps, staticProps) {
            if (protoProps) defineProperties(Constructor.prototype, protoProps);
            if (staticProps) defineProperties(Constructor, staticProps);
            return Constructor;
        };
    }();

從代碼可以看出，靜態(tài)方法與類函數(shù)方法的區(qū)別是：當(dāng)用Object.defineProperty去定義對(duì)象屬性時(shí)傳入的對(duì)象不同，一個(gè)傳入的是構(gòu)造函數(shù)的原型，另一個(gè)是傳入構(gòu)造函數(shù)。

es6當(dāng)前還不支持靜態(tài)屬性

extends

關(guān)鍵字在類聲明或類表達(dá)式中用于創(chuàng)建一個(gè)類作為另一個(gè)類的一個(gè)子類

class Student {
    constructor(name = null, age = null) {
        this.name = name;
        this.age = age;
    }
    getInfo() {
        return `{name:${this.name},age:${this.age}}`;
    }
    setInfo(name, age) {
        this.name = name;
        this.age = age;
    }
}

class Citizen extends Student {
    constructor(name, age) {
        super(name, age);
        this.name = 123;
    }
}
let stu = new Citizen("siip", "25");
stu.getInfo(); //{name:siip,age:25}

可以看到子類可以調(diào)用父類上的方法和屬性，當(dāng)使用extends繼承父類時(shí)，子類constructor和super和被默認(rèn)添加上,并且在構(gòu)造函數(shù)內(nèi)，只有調(diào)用了super函數(shù)后才能使用this,否則會(huì)拋出ReferenceError錯(cuò)誤

     constructor() {
        this.name = "xxx"
         super()
      }//ReferenceError

super

super可作為一個(gè)函數(shù)使用

super可作為一個(gè)對(duì)象使用

下面一個(gè)子類繼承父類的Math的方法：

function MathFns() {
    this.status = "Father"
}
MathFns.prototype = Math;

class Max extends MathFns {
    constructor() {
        super();
    }
    static base() {
        return super.max();
    }
}
let m = new MathFns();
m; //{status: "Father"}
m.max(1, 2);//2

我們可以通過(guò)babel編譯，嘗試去理解es6的繼承，

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });

    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;

}

這個(gè)封裝繼承函數(shù)，主要實(shí)現(xiàn)的功能是，子類原型指向父類，原型構(gòu)造器指向自身，然后再通過(guò)隱式原型鏈指向父類函數(shù)，這樣子類被實(shí)例化后的對(duì)像就能使用父類原型鏈上的方法以及通過(guò)隱式原型鏈訪問(wèn)到父類的屬性。

總的來(lái)看，es6的class類實(shí)際上是基于原型鏈和繼承做的一層封裝，它的結(jié)構(gòu)層次相對(duì)于es5原型鏈寫(xiě)法更加清晰明了，代碼量更少。class類主要內(nèi)容是構(gòu)造函數(shù)、靜態(tài)方法、繼承。

構(gòu)造函數(shù)

一個(gè)類里，必有一個(gè)constructor函數(shù)，默認(rèn)。

類不存在變量提升

一個(gè)類里只能有一個(gè)constructor函數(shù)

constructor函數(shù)指向類自身

靜態(tài)方法

靜態(tài)函數(shù)的this指向類函數(shù)自身，當(dāng)this沒(méi)有指明被誰(shuí)調(diào)用時(shí)，this為undefined

在同一個(gè)類中的一個(gè)靜態(tài)方法調(diào)用另一個(gè)靜態(tài)方法

類實(shí)例化對(duì)象不能調(diào)用類靜態(tài)方法

繼承

子類繼承父類的屬性和方法

在子類繼承父類，子類的構(gòu)造函數(shù)中要先調(diào)用super函數(shù)，才能使用this

super可以作為函數(shù)或?qū)ο笳{(diào)用，但指向都是子類