摘要：記錄的學(xué)習(xí)筆記，在回答別人的問(wèn)題時(shí)發(fā)現(xiàn)自己的的理解誤差很大的在沒(méi)有帶來(lái)的的時(shí)候，我們編寫(xiě)的時(shí)候很多時(shí)候會(huì)通過(guò)構(gòu)造函數(shù)和原型鏈來(lái)添加方法屬性，實(shí)現(xiàn)的功能。而是看成是構(gòu)造函數(shù)的寫(xiě)法。等同于類的實(shí)例對(duì)象就像使用構(gòu)造函數(shù)一樣使用命令來(lái)創(chuàng)建一個(gè)實(shí)例。

記錄class的學(xué)習(xí)筆記，在回答別人的問(wèn)題時(shí)發(fā)現(xiàn)自己的的理解誤差很大

在沒(méi)有es6帶來(lái)的class的時(shí)候，我們編寫(xiě)JavaScript的時(shí)候很多時(shí)候會(huì)通過(guò)構(gòu)造函數(shù)和原型鏈來(lái)添加方法屬性，實(shí)現(xiàn)class的功能。

// Box是一個(gè)構(gòu)造器
function Box(color) {
    this.type = "circle";
    this.color = color;
}

// 我們可以通過(guò)prototype的方式來(lái)加一條實(shí)例方法
Person.prototype.hello = function() {
    console.log("hello " + this.color);
}

// 對(duì)于私有屬性(Static method)，我們當(dāng)然不能放在原型鏈上了。我們可以直接放在構(gòu)造函數(shù)上面
Person.fn = function() {
    console.log("static");
};
//通過(guò)new來(lái)創(chuàng)建
var circle = new Box("red");

但是在es6的規(guī)范中，可以使用class語(yǔ)法，ES6 的class可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5 都可以做到，新的class寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已。上面的代碼用 ES6 的class改寫(xiě)，就是下面這樣。

class Box {
    constructor(color) {
        this.color = color;
        this.type="corcle"
    }
    hello() {
        console.log("hello " + this.name);
    }
    static fn() {
        console.log("static");
    };
}

上面代碼定義了一個(gè)“類”，可以看到里面有一個(gè)constructor方法，這就是構(gòu)造方法，而this關(guān)鍵字則代表實(shí)例對(duì)象。

需要注意：
1.class內(nèi)的方法不需要 function關(guān)鍵字，直接把函數(shù)定義放進(jìn)去了就可以了。   
2.另外，方法之間不需要逗號(hào)分隔，加了會(huì)報(bào)錯(cuò)。
3.class內(nèi)部默認(rèn)是嚴(yán)格模式，
需要注意這個(gè)和JavaScript中的對(duì)象寫(xiě)法是不一樣的。而是看成是構(gòu)造函數(shù)的寫(xiě)法。而且目前使用typeof來(lái)判斷class的類型的時(shí)候返回的結(jié)果是function。

constructor方法是類的默認(rèn)方法，通過(guò)new命令生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法。一個(gè)類必須有constructor方法，如果沒(méi)有顯式定義，一個(gè)空的constructor方法會(huì)被默認(rèn)添加。

class Box {
}

// 等同于
class Box {
  constructor() {}
}

就像使用構(gòu)造函數(shù)一樣使用new命令來(lái)創(chuàng)建一個(gè)實(shí)例。如果忘記加上new，像函數(shù)那樣調(diào)用Class，將會(huì)報(bào)錯(cuò)。

class Box{...}
var circle = new Box();

class的實(shí)例對(duì)象就和普通的對(duì)象類似，都是可以看過(guò)是通過(guò)new一個(gè)構(gòu)造函數(shù)生成的，

這里有幾個(gè)問(wèn)題需要注意：
class表達(dá)式就像函數(shù)表達(dá)式一樣，可以把class來(lái)賦值給變量，
class不存在變量提升，內(nèi)部默認(rèn)嚴(yán)格模式
暫時(shí)沒(méi)有標(biāo)準(zhǔn)的支持私有方法和私有屬性
this的指向是class實(shí)例對(duì)象，需要注意如果在外多帶帶調(diào)用方法時(shí)需要小心this的指向
Generator函數(shù)前面添加*即可

類相當(dāng)于實(shí)例的原型，所有在類中定義的方法，都會(huì)被實(shí)例繼承。如果在一個(gè)方法前，加上static關(guān)鍵字，就表示該方法不會(huì)被實(shí)例繼承，而是直接通過(guò)類來(lái)調(diào)用，這就稱為“靜態(tài)方法”。
注意，如果靜態(tài)方法包含this關(guān)鍵字，這個(gè)this指的是類，而不是實(shí)例。

ES6 明確規(guī)定，Class 內(nèi)部只有靜態(tài)方法，沒(méi)有靜態(tài)屬性。所以應(yīng)該這樣書(shū)寫(xiě)一個(gè)靜態(tài)屬性：

class Foo {
}

Foo.prop = 1;
Foo.prop // 1

下面是錯(cuò)誤的舉一反三：

// 以下兩種寫(xiě)法目前都無(wú)效
class Foo {
  // 寫(xiě)法一
  prop: 2

  // 寫(xiě)法二
  static prop: 2
}

Foo.prop // undefined

不過(guò)目前已經(jīng)有了新的提案來(lái)支持類的靜態(tài)屬性和實(shí)例屬性，

類的實(shí)例屬性可以用等式，寫(xiě)入類的定義之中。

class MyClass {
  myProp = 42;

  constructor() {
    console.log(this.myProp); // 42
  }
}

類的靜態(tài)屬性只要在上面的實(shí)例屬性寫(xiě)法前面，加上static關(guān)鍵字就可以了。

class MyClass {
  static myStaticProp = 42;

  constructor() {
    console.log(MyClass.myStaticProp); // 42
  }
}