ES6中class類的學習

類是什麼？

類：就是具有相同類型的一類實例的邏輯描述

1.1 類的由來

在ES6當中class的絕大部分功能都是可以在ES5當中做到的，那麼我們爲什麼要用新的class寫法呢？原因其實很簡單。新的class寫法知識讓對象原型的寫法更加清晰 更加的像面向對象編程的語法而已。下面我們來看下傳統的寫法和改寫會有什麼樣的區別呢！

1. 這個即爲傳統寫法。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

2. 這個即爲用ES6的class改寫

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

1.2 constructor方法

在上面的代碼塊當中我們可以看到當中有一個constructor方法。這個就是構造方法而this關鍵字代表實例對象。就是說，ES5的point構造函數對應的就是ES6的point類的方法。
constructor方法是類的默認方法，通過new命令生成對象實例時，就會自動調用這個方法。簡單的說就是類必須有constructor方法，沒有寫入的話，一個空的constructor方法就會唄默認添加。

class Point {
}

// 等同於
class Point {
  constructor() {}
}

在上面代碼塊中，定義了一個空的類point,JavaScript 引擎會自動爲它添加一個空的constructor方法。

1.3 類的實例

既然我們知道什麼是類，那麼我們也應該知道什麼是類的實例，類的實例就是被構造函數出來的具有這個類的實例特徵的一個表；

生成類的實例我們需要使用new命令。如果忘記加上new命令而是像函數一樣來調用的話，那麼就會報錯。

class Point {
  // ...
}

// 報錯
var point = Point(2, 3);

// 正確
var point = new Point(2, 3);

1.4 類的實例屬性、繼承

類的實列屬性是屬於單個對象的，因此必須通過對象來進行訪問，類屬性是屬於整個類本身，因此必須通過類來進行訪問。

Class是可以通過extends關鍵字來實現繼承的，相對比原型鏈實現繼承要清晰和方便很多。

class Point {
}

class ColorPoint extends Point {
}

1.5 super關鍵字和this關鍵字

1. this關鍵字就是代表實例對象
2. super關鍵字既可以當作函數使用也可以當作對象來使用的。

而super的兩種情況下使用方法是完全不同的，在第一種情況中，super作爲函數調用時，代表的是父類的構造函數。ES6 要求，子類的構造函數必須執行一次super函數。

class A {}

class B extends A {
  constructor() {
    super();
  }
}

在上面的代碼塊中，子類B中的super()，代表調用了父類的構造函數。這是必須的，不然就會報錯。

第二種情況呢，super作爲對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

上面代碼中，子類B當中的super.p()，就是將super當作一個對象使用。

1.6 類的靜態方法和靜態屬性

1. 靜態方法：在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱爲“靜態方法”。

在這裏插入代碼片class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

Foo類的classMethod方法前有static關鍵字，表明該方法是一個靜態方法，可以直接在Foo類上調用（Foo.classMethod()），而不是在Foo類的實例上調用。如果在實例上調用靜態方法，會拋出一個錯誤，表示不存在該方法。

2. 靜態屬性：靜態屬性指的是 Class 本身的屬性。

因爲 ES6 明確規定，Class 內部只有靜態方法，沒有靜態屬性。現在有一個[提案]提供了類的靜態屬性，寫法是在實例屬性的前面，加上static關鍵字。

// 老寫法
class Foo {
  // ...
}
Foo.prop = 1;

// 新寫法
class Foo {
  static prop = 1;
}

上面代碼中，老寫法的靜態屬性定義在類的外部。整個類生成以後，再生成靜態屬性。另外，新寫法是顯式聲明（declarative），而不是賦值處理，語義更好。

結尾：今天關於ES6中Class類的基本使用以及繼承就先分享到這裏了，希望會對大家有所幫助