[JS奇怪的世界]No.57 ES6與類別

發表於 2019-05-24 分類於克服JS奇怪的部分系列

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

這章節主要講解 ES6(JavaScript EcmaScript 2015 或 EcmaScript 6) 的部分，而這章節將講解 ES6 另一種建立物件與設定原型的方法。 class 在其他程式語言是非常受歡迎的，可以用來定義物件的方法、屬性等該做什麼，但前面有講過 JavaScript 本身並沒有類別 (class)。

前言

這章節主要講解 ES6(JavaScript EcmaScript 2015 或 EcmaScript 6) 的部分，而這章節將講解 ES6 另一種建立物件與設定原型的方法。

class 在其他程式語言是非常受歡迎的，可以用來定義物件的方法、屬性等該做什麼，但前面有講過 JavaScript 本身並沒有類別 (class)。

ES6與類別

那類別看起來像什麼?

class Person {
  constructor (firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
  greet() {
    return 'Hi' + this.firstname;
  }
}

var john = new Person('John', 'Doe');
console.log(john);
console.log(john.greet());

基本上與原本在寫函數建構子一樣，所以做法完全沒有太大差異。

但是這邊要注意一件事情 JavaScript 的 class 與其他程式語言不同，用 class 建立的內容它還是一個物件。

class Person 其實就是在建立一個物件。

如何設定原型?

class Person {
  constructor (firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }
  greet() {
    return 'Hi' + this.firstname;
  }
}

class InformalPerson extends Perosn {
  constructor (firstname, lastname) {
    super(firstname, firstname);
  }
  greet() {
    return 'Yo!' + this.firstname;
  }
}

var john = new Person('John', 'Doe');
console.log(john);
console.log(john.greet());

透過 extends 可以將 InformalPerson 設定為 Perosn 的原型。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分