12.1 Benutzerverwaltung in einer Webanwendung
Objektorientierte Programmierung (OOP) in JavaScript ermöglicht die Erstellung von komplexen, skalierbaren und leicht wartbaren Anwendungen. Schauen wir uns ein paar praktische Beispiele für die Nutzung von OOP in JavaScript an, einschließlich Klassen, Vererbung, Kapselung und Polymorphismus.
Stell dir vor, wir entwickeln eine Webanwendung zur Benutzerverwaltung. Wir können Klassen für verschiedene Benutzertypen erstellen, wie User, Admin und Guest, wobei wir die Vererbung zur Erstellung spezialisierter Klassen nutzen.
Erklärung:
- Die Klasse
Userenthält die Methodenloginundlogout - Die Klasse
Adminerbt vonUserund fügt die MethodedeleteUserhinzu - Die Klasse
Guesterbt vonUserund fügt die MethoderequestAccesshinzu - Instanzen der Klassen
AdminundGuestverwenden die Methoden ihrer Klasse und der Basisklasse
Code:
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 Produktverwaltung in einem Online-Shop
In diesem Beispiel erstellen wir Klassen zur Darstellung verschiedener Produkttypen in einem Online-Shop, wie Product, Electronics und Clothing. Wir implementieren auch Polymorphismus für die Methode calculateDiscount.
Erklärung:
- Die Klasse
Productenthält die MethodecalculateDiscount, die standardmäßig einen Rabatt von 10 % berechnet - Die Klasse
Electronicsüberschreibt die MethodecalculateDiscount, um einen Rabatt von 20 % für Elektronik anzubieten - Die Klasse
Clothingüberschreibt die MethodecalculateDiscount, um einen Rabatt von 15 % für Kleidung anzubieten - Instanzen der Klassen
ElectronicsundClothingverwenden ihre MethodencalculateDiscountzur Rabattberechnung
Code:
JavaScript
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
calculateDiscount() {
return this.price * 0.1; // 10% Rabatt standardmäßig
}
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% Rabatt für Elektronik
}
}
class Clothing extends Product {
constructor(name, price, size) {
super(name, price);
this.size = size;
}
calculateDiscount() {
return this.price * 0.15; // 15% Rabatt für Kleidung
}
}
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: Bibliotheksverwaltung
In diesem Beispiel erstellen wir Klassen zur Verwaltung einer Bibliothek, einschließlich der Klassen Book, Magazine und Library. Wir implementieren auch Methoden zum Hinzufügen und Entfernen von Elementen aus der Bibliothek.
Erklärung:
- Die Klassen
BookundMagazineerben von der KlasseLibraryItemund überschreiben die Methodedisplay - Die Klasse
Libraryverwaltet die Sammlung von Bibliothekselementen und bietet die MethodenaddItem,removeItemunddisplayItems - Instanzen der Klassen
BookundMagazinewerden in die Bibliothek eingefügt und entfernt, ihre Informationen werden mit der Methodedisplayangezeigt
Code:
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