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

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

es5 聲明一個構(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 聲明一個類：

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)層次更加簡潔明了。

有些地方需要注意的是：

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

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

constructor

constructor是默認的方法，就算在聲明類函數(shù)時沒有寫constructor方法，在實例化時會自動添加上一個空的constructor

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

通過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)用，只能通過new實例化

        this.desc = "test";
    };

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

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

static

簡述：顧名思義這是一個靜態(tài)方法，就是不需要實例化類就可以調(diào)用的方法， 實例化對象不能繼承靜態(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沒有指明被誰調(diào)用時，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去定義對象屬性時傳入的對象不同，一個傳入的是構(gòu)造函數(shù)的原型，另一個是傳入構(gòu)造函數(shù)。

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

extends

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

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繼承父類時，子類constructor和super和被默認添加上,并且在構(gòu)造函數(shù)內(nèi)，只有調(diào)用了super函數(shù)后才能使用this,否則會拋出ReferenceError錯誤

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

super

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

super可作為一個對象使用

下面一個子類繼承父類的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

我們可以通過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;

}

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

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

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

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

類不存在變量提升

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

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

靜態(tài)方法

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

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

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

繼承

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

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

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