ES6 中新增了類別 (class) 來實現原型繼承，但他並不是一種新原型繼承方式，只是以前原型繼承的語法糖，提供更簡潔的語法來建立物件和處理繼承！

這邊也來看看 ESLint airbnb 相關規則：

9.1 總是使用 class，避免直接操作 prototype。

這麼猛？！看來是必學ㄌ！今天就來練習看看基本使用方式ㄅ～

原型繼承

在開始之前，先來看一下原型繼承的小範例：使用構造函數 Friend 建立朋友名單，並建立方法 hello() console.log 出朋友的資訊：

// 構造函數
function Friend(name, height) {
  this.name = name;
  this.height = height;
}

// 建立方法
Friend.prototype.hello = function () {
  console.log(`哈嚕～我是${this.name}，身高${this.height}`);
};

const QQ = new Friend('映萱', '152');
const BB = new Friend('阿華', '186');

QQ.hello(); //哈嚕～我是映萱，身高152
BB.hello(); // 哈嚕～我是阿華，身高186

接下來就來看看 class 如何實作以上的例子唄！

class 使用方式

使用 class 關鍵字宣告：

class Friend {
  ...
}

使用 constructor 建立構造函數：

class Friend {
  // 構造函數
  constructor(name, height) {
    this.name = name;
    this.height = height;
  }
}

建立方法：

class Friend {
  // 構造函數
  constructor(name, height) {
    this.name = name;
    this.height = height;
  }
  
  // 建立方法
  hello() {
    console.log(`哈嚕～我是${this.name}，身高${this.height}`);
  };
}

這邊要特別注意：class 中的大括弧後方是不能有逗號 , 的，否則會報錯哦！

使用的時候，也是一樣使用 new ：

const QQ = new Friend('映萱', '152');
const BB = new Friend('阿華', '186');

QQ.hello(); //哈嚕～我是映萱，身高152
BB.hello(); // 哈嚕～我是阿華，身高186

以上就是今天的小小練習啦～class 使用相當簡潔的方式達到了原型繼承相同的結果！真是方便！對我這個菜逼八來說感覺好理解多ㄌ～

參考文章
MDN-Class
CodecastsJS：ES6課程