在前端開發，特別是 JavaScript 中，class 語法和傳統的建構函式方法都可以用來建立物件，但它們之間有一些關鍵的區別：
1. 語法糖:
-
Class:
class語法是 ES6 引入的，本質上是建構函式的語法糖。它提供了一種更簡潔、更物件導向的語法來定義物件藍圖。 -
建構函式: 傳統的建構函式使用
function關鍵字定義，並透過new關鍵字來建立物件例項。
2. 原型繼承:
-
Class: 使用
class定義的類，其原型繼承關係更加清晰。透過extends關鍵字可以方便地實現繼承，子類的原型會指向父類的原型。 -
建構函式: 使用建構函式實現繼承需要手動操作原型鏈，例如將子類的原型指向父類的例項，並設定
constructor屬性。相對來說比較繁瑣，容易出錯。
3. 方法定義:
-
Class: 在
class中定義方法更加簡潔，不需要使用prototype屬性。方法預設會被新增到類的原型上。 -
建構函式: 需要將方法顯式地新增到建構函式的
prototype屬性上，才能被所有例項共享。
4. this 繫結:
-
Class: 類方法中的
this預設繫結到類的例項，除非顯式修改。箭頭函式除外，箭頭函式的this繫結取決於其定義時的上下文。 -
建構函式: 在建構函式中，
this指向新建立的例項。但在建構函式的普通方法中，this的繫結取決於呼叫方式。如果方法被直接呼叫，this會指向全域性物件（瀏覽器中是window，Node.js 中是global）。
5. 靜態方法:
-
Class: 使用
static關鍵字可以定義靜態方法，靜態方法屬於類本身，而不是類的例項。 -
建構函式: 可以透過將方法直接新增到建構函式本身上來模擬靜態方法，但不如
class語法清晰。
6. super 關鍵字:
-
Class: 在子類中，可以使用
super關鍵字來呼叫父類的方法或建構函式，方便實現繼承和擴充套件。 -
建構函式: 在建構函式中，需要透過
Parent.call(this, ...)的方式來呼叫父類的建構函式。
7. new.target:
-
Class: 支援
new.target，可以檢測建構函式是否透過new關鍵字呼叫。 -
建構函式: 也支援
new.target。
示例：
建構函式:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("Hello, my name is " + this.name);
};
let person = new Person("Alice");
person.greet(); // Output: Hello, my name is Alice
Class:
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log("Hello, my name is " + this.name);
}
}
let person = new Person("Bob");
person.greet(); // Output: Hello, my name is Bob
總結:
class 語法本質上是對建構函式的封裝，它提供了更簡潔、更易於理解和維護的語法來定義物件。尤其是在處理繼承、原型等概念時，class 語法更加清晰，更符合物件導向的程式設計思想。 雖然建構函式仍然可以使用，但在現代 JavaScript 開發中，推薦使用 class 語法。