iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 28
3
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 28

Day28【ES6 小筆記】 建構式ㄉ語法糖 - Class 超基本使用範例

建構式語法糖 - Class
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課程


上一篇
Day27【ES6 小筆記】 物件好兄弟 Map 使用方式
下一篇
Day29【ES6 小筆記】陣列搜尋新方法 find() findIndex() - 以工具人清單為例
系列文
透過 ESLint 練習 JavaScript ES630

尚未有邦友留言

立即登入留言