12.1 在網頁應用中管理用戶
JavaScript 的物件導向程式設計 (OOP) 可以讓你建立複雜、可擴展且易於維護的應用程式。讓我們來看看一些在 JavaScript 中使用 OOP 的實用範例，包括類別、繼承、封裝和多型。
假設我們正在開發一個用戶管理的網頁應用。我們可以為不同類型的用戶創建類別，如User、Admin和Guest，並使用繼承來創建專門化的類別。
解釋：
- 類別
User包含login和logout方法 - 類別
Admin繼承自User並添加了deleteUser方法 - 類別
Guest繼承自User並添加了requestAccess方法 Admin和Guest類別的實例使用其類別和基類的方法
程式碼：
JavaScript
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
login() {
console.log(`${this.username} logged in.`);
}
logout() {
console.log(`${this.username} logged out.`);
}
}
class Admin extends User {
constructor(username, email) {
super(username, email);
this.role = 'admin';
}
deleteUser(user) {
console.log(`${this.username} deleted user ${user.username}.`);
}
}
class Guest extends User {
constructor(username, email) {
super(username, email);
this.role = 'guest';
}
requestAccess() {
console.log(`${this.username} requested access.`);
}
}
const admin = new Admin('adminUser', 'admin@example.com');
const guest = new Guest('guestUser', 'guest@example.com');
admin.login(); // "adminUser logged in."
admin.deleteUser(guest); // "adminUser deleted user guestUser."
admin.logout(); // "adminUser logged out."
guest.login(); // "guestUser logged in."
guest.requestAccess(); // "guestUser requested access."
guest.logout(); // "guestUser logged out."
12.2 網路商店中的商品管理
在這個範例中，我們將創建類別來表示網路商店中的不同類型的商品，如Product、Electronics和Clothing。我們還將實現calculateDiscount方法的多型。
解釋：
- 類別
Product包含方法calculateDiscount，默認計算10%的折扣 - 類別
Electronics重寫calculateDiscount方法，為電子產品提供20%的折扣 - 類別
Clothing重寫calculateDiscount方法，為服裝提供15%的折扣 Electronics和Clothing類別的實例使用其自身的calculateDiscount方法來計算折扣
程式碼：
JavaScript
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
calculateDiscount() {
return this.price * 0.1; // 默認10%折扣
}
display() {
console.log(`${this.name} - $${this.price.toFixed(2)}`);
}
}
class Electronics extends Product {
constructor(name, price, brand) {
super(name, price);
this.brand = brand;
}
calculateDiscount() {
return this.price * 0.2; // 電子產品20%折扣
}
}
class Clothing extends Product {
constructor(name, price, size) {
super(name, price);
this.size = size;
}
calculateDiscount() {
return this.price * 0.15; // 服裝15%折扣
}
}
const laptop = new Electronics('Laptop', 1000, 'BrandX');
const tshirt = new Clothing('T-Shirt', 20, 'M');
laptop.display(); // "Laptop - $1000.00"
console.log(`Discount: $${laptop.calculateDiscount().toFixed(2)}`); // "Discount: $200.00"
tshirt.display(); // "T-Shirt - $20.00"
console.log(`Discount: $${tshirt.calculateDiscount().toFixed(2)}`); // "Discount: $3.00"
12.3: 圖書館管理
在這個範例中，我們將創建用於管理圖書館的類別，包括類別Book、Magazine和Library。我們還將實現添加和刪除圖書館項目的方法。
解釋：
- 類別
Book和Magazine繼承自LibraryItem類別並重寫display方法 - 類別
Library管理圖書館項目的集合，提供addItem、removeItem和displayItems方法 Book和Magazine類別的實例被添加和移除到圖書館中，並使用display方法顯示信息
程式碼：
JavaScript
class LibraryItem {
constructor(title, year) {
this.title = title;
this.year = year;
}
display() {
console.log(`${this.title} (${this.year})`);
}
}
class Book extends LibraryItem {
constructor(title, year, author) {
super(title, year);
this.author = author;
}
display() {
console.log(`${this.title} by ${this.author} (${this.year})`);
}
}
class Magazine extends LibraryItem {
constructor(title, year, issueNumber) {
super(title, year);
this.issueNumber = issueNumber;
}
display() {
console.log(`${this.title} - Issue ${this.issueNumber} (${this.year})`);
}
}
class Library {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
console.log(`Added: ${item.title}`);
}
removeItem(title) {
this.items = this.items.filter(item => item.title !== title);
console.log(`Removed: ${title}`);
}
displayItems() {
this.items.forEach(item => item.display());
}
}
const library = new Library();
const book = new Book('JavaScript: The Good Parts', 2008, 'Douglas Crockford');
const magazine = new Magazine('JavaScript Weekly', 2021, 450);
library.addItem(book); // "Added: JavaScript: The Good Parts"
library.addItem(magazine); // "Added: JavaScript Weekly"
library.displayItems();
// "JavaScript: The Good Parts by Douglas Crockford (2008)"
// "JavaScript Weekly - Issue 450 (2021)"
library.removeItem('JavaScript Weekly'); // "Removed: JavaScript Weekly"
library.displayItems(); // "JavaScript: The Good Parts by Douglas Crockford (2008)"
GO TO FULL VERSION