5.1 類別的宣告
自從 ECMAScript 6 (ES6) 推出後，JavaScript 擁有了一個新的結構來創建物件和管理繼承，就是使用關鍵字 class。類別提供了一個更方便和可讀的語法來創建物件和處理原型。
JavaScript 的類別 是對現有的原型繼承系統的語法糖。它們使得創建和管理物件變得更清晰和結構化。
類別的宣告
在 JavaScript 中，類別使用關鍵字 class 宣告，後面接著類別名稱。類別的主體用大括號 {} 包圍。
範例：
JavaScript
class Person {
// 類別方法
greet() {
console.log('Hello!');
}
}
// 創建類別的實例
const person = new Person();
person.greet(); // 顯示：Hello!
類別的表達式
類別可以通過宣告或表達式方式創建。類別表達式可以是命名或匿名的。
命名類別範例：
JavaScript
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 顯示：Hello!
匿名類別範例：
JavaScript
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 顯示：Hello!
5.2 類別的欄位和方法
類別屬性
在 ES6 中，類別屬性只能在建構式內宣告。然而在較新的 JavaScript 版本（ES2022）中已引入類別欄位，可以在建構式外宣告屬性。
在建構式中使用屬性的範例：
JavaScript
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
使用類別欄位的範例（ES2022）：
JavaScript
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
解釋：
- 在第一個範例中，屬性
username和email在建構式中被宣告並初始化 - 在第二個範例中，屬性
username和email被作為類別欄位在建構式外宣告
類別的方法
類別可以包含在類別主體中定義的方法。這些方法自動添加到創建的物件的原型中。
類別方法的範例：
JavaScript
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // 顯示：Animal speaks
animal.eat(); // 顯示：Animal eats
3.3 類別使用範例
創建複雜的物件
類別允許創建具有多種方法和屬性的複雜物件。
範例：
JavaScript
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // 顯示：Toyota Camry engine started.
myCar.stopEngine(); // 顯示：Toyota Camry engine stopped.
GO TO FULL VERSION