摘要：在上一篇文章里我介紹了一下面向?qū)ο缶幊痰母拍?，在最后終于喜出望外看到了提供了類的概念了。而到了里面真正的類與構(gòu)造函數(shù)現(xiàn)在是分離的，通過上面的代碼可以看出來，這種寫法正是面向?qū)ο蟮恼y(tǒng)寫法。

在上一篇文章里我介紹了一下面向?qū)ο缶幊痰母拍?，在最后終于喜出望外看到了ES6提供了類的概念了。那這個(gè)類如何去用，是這篇文章的主題。ES6給我們提供了一個(gè)class關(guān)鍵字。這個(gè)關(guān)鍵字跟以前的var let const很像，它們都是用做聲明的，而class就是用來聲明一個(gè)類的。

class name [extends]{   //extends是用來繼承的，可選參數(shù)
    //class body
};

注意

class不能重復(fù)聲明（與let、const一樣）
類的本質(zhì)還是一個(gè)構(gòu)造函數(shù)

class Div{  //類
    constructor(x,y){   //構(gòu)造函數(shù)
        this.x=x;    //共享屬性，放在constructor里
        this.y=y;
    }//注意這里是沒有逗號(hào)的
    move(){    //共享方法，這里相當(dāng)于在Div.prototye上添加方法
        console.log("動(dòng)起來");
    }
}
console.dir(Div);   //在控制臺(tái)里看一下與ES5的面向?qū)ο蟪绦蛴惺裁床煌?/pre>
在ES5里面的面向?qū)ο螅^的“類”與構(gòu)造函數(shù)其實(shí)是一個(gè)東西，也就是雙重角色。而到了ES6里面真正的類與構(gòu)造函數(shù)現(xiàn)在是分離的，通過上面的代碼可以看出來，這種寫法正是面向?qū)ο蟮恼y(tǒng)寫法。同時(shí)，我們?cè)诳刂婆_(tái)里看到這個(gè)對(duì)象與ES5的對(duì)象區(qū)別僅在于顯示的名字上多了一個(gè)class關(guān)鍵字，如下圖：

下面我要詳細(xì)的對(duì)比一下ES5與ES6的面向?qū)ο笥惺裁磪^(qū)別，以及用這種方式寫出來的對(duì)象與ECMAScript的內(nèi)置對(duì)象有什么區(qū)別，這樣做的目的能讓你清晰的明白面向?qū)ο缶幊叹烤故且环N什么樣的形式。
1、與ES5對(duì)比
const [div1,div2]=[new Div(10,20),new Div(15,20)];    //這兩個(gè)對(duì)象是為了對(duì)比他們身上的原型
div1.z=30;    //給實(shí)例添加一個(gè)私有屬性

console.log(
    typeof Div,    //function 構(gòu)造函數(shù)（雖說是類，但實(shí)質(zhì)還是構(gòu)造函數(shù)）
    Div.prototype.constructor===Div,    //true 類本質(zhì)還是構(gòu)造函數(shù)（披著羊皮的狼）
    
    //Object.getPrototypeOf方法是用來取對(duì)象身上的原型，用它代替__proto__
    Object.getPrototypeOf(div1)===Div.prototype,    //true 實(shí)例的原型就是構(gòu)造函數(shù)的原型
    Object.getPrototypeOf(div1)===Object.getPrototypeOf(div2),  //true 兩個(gè)實(shí)例的原型都一樣，指向構(gòu)造函數(shù)的原型對(duì)象
    
    div1 instanceof Div,        //true div是它的實(shí)例
    div1.constructor===Div,        //true 實(shí)例的構(gòu)造函數(shù)就是類
    
    /*
     * 方法說明
     *  Object.getOwnPropertyNames()這個(gè)方法是用來獲取對(duì)象身上的所有屬性名
     *  hasOwnProperty()用來判斷某個(gè)屬性是對(duì)象自身的(true)，還是繼承自原型對(duì)象的(false)
     *  Object.keys()返回對(duì)象所有可枚舉（遍歷）的屬性名
     */
    Object.getOwnPropertyNames(div1),//["x", "y", "z"] 實(shí)例自己的屬性
    div1.hasOwnProperty("x"),        //true 實(shí)例的屬性
    div1.hasOwnProperty("move"),    //false 這個(gè)方法是繼承而來的
    Object.keys(Div.prototype)        //[] 對(duì)象身上的方法都是不可枚舉的
);

//ES5定義的對(duì)象，身上的方法是可以枚舉的
function Car(){}
Car.prototype.drive=function(){
    console.log("竄的老快了");
}
console.log(Object.keys(Car.prototype));  //["drive"] 所有方法都是可枚舉的
從上面的代碼得出以下的結(jié)論
類的本質(zhì)還是構(gòu)造函數(shù)，其實(shí)class就是個(gè)語法糖，它的內(nèi)部還是個(gè)構(gòu)造函數(shù)
class聲明的對(duì)象與ES5聲明的對(duì)象實(shí)質(zhì)上一樣
class聲明的對(duì)象，它身上的方法都不能被枚舉

2、與內(nèi)置對(duì)象對(duì)比
const [d1,d2]=[new Date(),new Date()];  //聲明兩個(gè)內(nèi)置對(duì)象實(shí)例
d1.x=10,d1.y=20,d1.z=30;    //給實(shí)例添加三個(gè)私有屬性

console.log(
    typeof Date,    //function
    Date.prototype.constructor===Date,    //true
    Object.getPrototypeOf(d1)===Date.prototype, //true
    Object.getPrototypeOf(d1)===Object.getPrototypeOf(d1),  //true
    d1 instanceof Date, //true
    d1.constructor===Date,  //true
    Object.getOwnPropertyNames(d1), //["x", "y", "z"]
    d1.hasOwnProperty("x"),  //true
    d1.hasOwnProperty("getDate"),   //false 這個(gè)方法是繼承于Date對(duì)象的
    Object.keys(Date.prototype),    //內(nèi)置對(duì)象身上的方法都是不可枚舉的
);
從上面的代碼得出以下的結(jié)論
自定義對(duì)象就是我們聲明的一個(gè)類似于內(nèi)置對(duì)象的對(duì)象
JavaScript的面向?qū)ο缶幊蹋瑢?shí)質(zhì)是把某個(gè)功能寫成一個(gè)對(duì)象，并且這個(gè)對(duì)象是在模仿內(nèi)置對(duì)象

添加屬性與方法
class聲明的對(duì)象同樣允許小伙伴們?nèi)涡缘奶砑訉傩耘c方法，包括共享與私有的。
共享屬性放在constructor里，共享方法放在大括號(hào)內(nèi)
私有屬性放在類身上，私有方法放在大括號(hào)內(nèi)同時(shí)前面要加static關(guān)鍵字
私有方法里this指向類本身，其它方法里的this指向?qū)嵗龑?duì)象

class Bear{
    constructor(){
        this.name="熊大";   //共享屬性（放在constructor里）
    }
    sleep(){    //共享方法（直接放在大括號(hào)里）
        this.name="熊二";    //this指向?qū)嵗?，所以在這里給this添加屬性還是實(shí)例的屬性
        console.log(`${this.name}愛睡覺`);
    }
    static gohome(){    //私有方法
        //類會(huì)默認(rèn)添加一個(gè)name屬性，值為class后面的那個(gè)單詞
        console.log(`${this.name}的家在森林`);  //這里的this并不會(huì)指向?qū)嵗?，而是指向?    }
}

//共享屬性與方法
const b1=new Bear();
console.log(b1.name);    //熊大    
b1.sleep();    //熊大愛睡覺
console.log(b1.name);    //熊二  sleep里重新定義了name屬性，所以在這就被改了

//私有屬性與方法
Bear.age=5;        //在外面添加私有屬性
console.log(b1.age);    //undefined 實(shí)例不具備
Bear.gohome();            //Bear的家在森林
//b1.goHome();            //報(bào)錯(cuò)，它是私有方法
下篇文章會(huì)詳細(xì)介紹class里的繼承。