在 JavaScipt 中可以使用 Class 語法糖來建立物件,
但要注意 JavaScript 的 Class 與其他語言的 Class 不同,
在其他語言像是 C# 、 C++ 、 Java 中的 Class 僅是定義物件的模板而不是物件,
然而 JavaScript 中的 Class 就是物件,
可以像是在呼叫建構子前透過 new 運算子來建立物件,

來看個透過 Class 建立物件的範例:

class Person {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  greet() {
    return "Hi " + this.firstname;
  }
}

var jimmy = new Person("Jimmy", "Huang");

console.log(jimmy);

在開發者工具 console 中的結果:

在 Class 中的 constructor 裡可以像之前在建構子裡建立預設屬性一樣,
透過 this 來參考到物件本身,再透過 . 運算子來添加屬性,

Class 中的 greet 則是物件的方法,

將透過 Class 建立的物件設置連結原型物件

可以透過 extends 關鍵字來設置透過 class 建立的物件在原型鏈中要連結的原型物件:

class Person {
  constructor(firstname, lastname) {
    this.firstname = firstname;
    this.lastname = lastname;
  }

  greet() {
    return "Hi " + this.firstname + " " + this.lastname;
  }
}

class informalPerson extends Person {
  constructor(firstname, lastname) {
    super(firstname, lastname);
  }

}

var cloneJimmy = new informalPerson("Jimmy", "Clone");
console.log(cloneJimmy);
console.log(cloneJimmy.greet());

Class constructor 中的 super 方法會呼叫 extends 後方 Class 中的 constructor 來參考到原型物件的屬性,

當透過 class 新建立的 informalPerson 物件(cloneJimmy)執行 greet 方法時,
在自己的物件中找不到,
因為有透過 extends 來把 Person 當作原型物件連結到 informalPerson 物件上,
所以 informalPerson 物件可以在原型鏈下找到原型物件的 greet 方法來使用.

在開發者工具 console 中的結果:

Class 是 JavaScript ES6 規範中提出的一種語法糖,能讓從 C#、C++、Java 來的程式設計師容易上手,
但需要注意不能把在其他語言中對 Class 的了解直接套用在 JavaScript 的 Class 上,
因為 JavaScript 中的 Class 已經是物件了.
而且是基於原型繼承的.