# Objektorientierte Programmierung in JavaScript
## Überblick
Die objektorientierte Programmierung (OOP) ermöglicht es, Code in wiederverwendbare und strukturierte Einheiten zu organisieren. In JavaScript werden Klassen als Vorlagen für Objekte verwendet.
## Grundkonzepte
### 1. Klassen Definition
```javascript
class Person {
firstName;
lastName;
constructor(firstNameX, lastNameX) {
this.firstName = firstNameX;
this.lastName = lastNameX;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
}
```
**Wichtige Punkte:**
- Klassen sind Vorlagen/Schablonen für Objekte
- Properties werden am Anfang der Klasse deklariert
- Der `constructor` wird automatisch beim Erstellen einer Instanz aufgerufen
- Methoden werden ohne das Schlüsselwort `function` definiert
### 2. Vererbung mit `extends`
```javascript
class Contact extends Person {
phone;
constructor(firstNameX, lastNameX, phoneX) {
super(firstNameX, lastNameX);
this.phone = phoneX;
console.log('new Contact Created!');
}
call() {
window.location.href = `tel:${this.phone}`;
}
printFullName() {
console.log(`${this.firstName} ${this.lastName}`);
}
}
```
**Vererbung Konzepte:**
- `extends` erbt alle Properties und Methoden der Elternklasse
- `super()` ruft den Constructor der Elternklasse auf
- Muss als erstes im Constructor der Kindklasse stehen
- Kindklassen können eigene Properties und Methoden hinzufügen
### 3. Weitere Vererbungsbeispiele
```javascript
class Friend extends Person {
constructor(fn, ln) {
super(fn, ln);
}
}
```
**Vereinfachte Vererbung:**
- Minimale Implementierung möglich
- Erbt automatisch alle Funktionalitäten der Elternklasse
## Praktische Anwendung
### Instanzen erstellen und verwenden
```javascript
let contacts = [
new Contact('xTests', 'dissltel', '0123456789'),
new Friend('seladts', 'lastname')
];
```
### Funktionen für Objekterstellung
```javascript
function addContact(firstName, lastName, phone) {
let myContact = new Contact(firstName, lastName, phone);
contacts.push(myContact);
return myContact;
}
// Verwendung
addContact('copy', 'gast', '02384951');
addContact('test', 'past', '02384951');
```
## Dateistruktur und Organisation
### HTML Integration
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="classes/person.class.js"></script>
<script src="classes/contact.class.js"></script>
<script src="classes/friend.class.js"></script>
<script src="script.js"></script>
</body>
</html>
```
**Organisationsstruktur:**
- Separate Dateien für jede Klasse
- Logische Reihenfolge beim Laden (Elternklasse zuerst)
- Hauptscript am Ende
## Objekterstellung Vergleich
### Moderne Klassen-Syntax
```javascript
let myContact = new Contact(firstName, lastName, phone);
contacts.push(myContact);
```
### Veraltete Objekt-Notation (nicht empfohlen)
```javascript
// JSON = Javascript Object Notation
contacts.push({
'firstName': 'p_none',
'lastName': 'd_none'
});
```
## Wichtige Unterschiede
### Klassen vs. Objekte
- **Klassen**: Vorlagen/Schablonen für Objekte
- **Objekte**: Konkrete Instanzen einer Klasse
- **Constructor**: Spezielle Methode zur Initialisierung
- **Vererbung**: Wiederverwendung von Code durch `extends`
### Syntax-Besonderheiten
- Kein `function` Schlüsselwort in Klassen-Methoden
- `this` referenziert die aktuelle Instanz
- `super()` für Zugriff auf Elternklasse
- Properties können vor dem Constructor deklariert werden
## Vorteile der OOP
- **Wiederverwendbarkeit**: Code kann in verschiedenen Kontexten genutzt werden
- **Struktur**: Klare Organisation des Codes
- **Vererbung**: Funktionalitäten können erweitert werden
- **Kapselung**: Zusammengehörige Daten und Funktionen sind gruppiert
- **Wartbarkeit**: Änderungen sind lokalisiert und kontrolliert
Sign in with Wallet
Connect another wallet