JavaScript - Object Methods

Hallo, zukünftige JavaScript-Zauberer! Heute tauchen wir in die magische Welt der JavaScript-Objektmethoden ein. Greift zu euren Programmierzauberstäben (Tastaturen) und lasst uns gemeinsam diese aufregende Reise antreten!

Was sind JavaScript-Objektmethoden?

Bevor wir mit der Zauberei mit Objektmethoden beginnen, lassen wir uns erst einmal anschauen, was sie sind. In einfacheren Worten sind Objektmethoden Funktionen, die zu einem Objekt gehören. Sie sind wie spezielle Fähigkeiten, die unsere Objekte besitzen.

Sehen wir uns ein einfaches Beispiel an:

let zauberer = {
name: 'Merlin',
zauberBannen: function() {
console.log('Abrakadabra!');
}
};

zauberer.zauberBannen(); // Ausgabe: Abrakadabra!

Hier ist zauberBannen eine Methode unseres zauberer-Objekts. Wenn wir zauberer.zauberBannen() aufrufen, vollführt unser Zauberer seine Magie!

Objektmethoden Kurzschreibweise

Nun lass uns einen schicken Trick lernen. ES6 hat eine kürzere Weise zur Definition von Methoden in Objekten eingeführt. Es ist wie ein magischer Shortcut für die Schreibweise von Objektmethoden!

let zauberer = {
name: 'Merlin',
zauberBannen() {
console.log('Abrakadabra!');
}
};

zauberer.zauberBannen(); // Ausgabe: Abrakadabra!

Seht ihr, wie wir den Teil : function entfernt haben? Es ist kürzer und sauberer, genau wie ein gut organisiertes Zauberbuch!

Hinzufügen oder Aktualisieren einer Methode im Objekt

Objekte in JavaScript sind flexibel. Wir können neue Methoden hinzufügen oder bestehende sogar nach der Erstellung des Objekts aktualisieren. Es ist, als ob wir unserem Zauberer neue Zauber beibringen!

let zauberer = {
name: 'Merlin'
};

// Hinzufügen einer neuen Methode
zauberer.brennenderBolzen = function() {
console.log('Whoosh! Brennender Bolzen abgefeuert!');
};

zauberer.brennenderBolzen(); // Ausgabe: Whoosh! Brennender Bolzen abgefeuert!

// Aktualisieren einer bestehenden Methode
zauberer.brennenderBolzen = function() {
console.log('Super brennender Bolzen aktiviert!');
};

zauberer.brennenderBolzen(); // Ausgabe: Super brennender Bolzen aktiviert!

In diesem Beispiel haben wir zuerst eine brennenderBolzen-Methode zu unserem Zauberer hinzugefügt, dann haben wir sie aktualisiert, um einen noch mächtigeren brennenden Bolzen zu zaubern!

Verwendung von eingebauten Methoden

JavaScript-Objekte kommen mit einigen vorinstallierten Zauber... ähm, Methoden! Lassen wir uns ein paar davon anschauen:

1. Object.keys()

Diese Methode gibt ein Array der eigenen Eigenschaftsnamen eines gegebenen Objekts zurück.

let zauberBuch = {
brennenderBolzen: 'Verursacht Feuerschaden',
eisstrahl: 'Freezt das Ziel',
Blitzstrahl: 'Elektrifiziert den Feind'
};

console.log(Object.keys(zauberBuch));
// Ausgabe: ['brennenderBolzen', 'eisstrahl', 'Blitzstrahl']

2. Object.values()

Ähnlich wie Object.keys(), gibt aber ein Array der eigenen enumerable Eigenschaftswerte des Objekts zurück.

console.log(Object.values(zauberBuch));
// Ausgabe: ['Verursacht Feuerschaden', 'Freezt das Ziel', 'Elektrifiziert den Feind']

3. Object.entries()

Diese Methode gibt ein Array der eigenen enumerable String-schüssigen Eigenschaft [Schlüssel, Wert]-Paare eines gegebenen Objekts zurück.

console.log(Object.entries(zauberBuch));
// Ausgabe: [
//   ['brennenderBolzen', 'Verursacht Feuerschaden'],
//   ['eisstrahl', 'Freezt das Ziel'],
//   ['Blitzstrahl', 'Elektrifiziert den Feind']
// ]

Hier ist eine Tabelle, die diese eingebauten Methoden zusammenfasst:

Methode	Beschreibung	Beispiel
Object.keys()	Gibt ein Array der Eigenschaftsnamen des Objekts zurück	Object.keys(zauberBuch)
Object.values()	Gibt ein Array der Eigenschaftswerte des Objekts zurück	Object.values(zauberBuch)
Object.entries()	Gibt ein Array der [Schlüssel, Wert]-Paare des Objekts zurück	Object.entries(zauberBuch)

Das 'this'-Schlüsselwort in Objektmethoden

Nun lassen wir uns über ein mächtiges, aber manchmal verwirrendes Konzept unterhalten: das this-Schlüsselwort. In Objektmethoden bezieht sich this auf das Objekt, dem die Methode gehört. Es ist, als ob das Objekt sagt "das bin ich!"

let zauberer = {
name: 'Merlin',
stelle Dich Vor() {
console.log(`Hallo, ich bin ${this.name}!`);
}
};

zauberer.stelle Dich Vor(); // Ausgabe: Hallo, ich bin Merlin!

In diesem Beispiel bezieht sich this.name auf die name-Eigenschaft des zauberer-Objekts.

Praktisches Beispiel: Ein Zauberkastenspiel

Lassen wir alles, was wir gelernt haben, in einem spaßigen kleinen Zauberkastenspiel zusammenfließen!

let zauberer = {
name: 'Merlin',
mana: 100,
zauber: {
brennenderBolzen: 30,
eisstrahl: 20,
heilung: 50
},
zauberBannen-Zauber: function(zauber) {
if (this.mana >= this.zauber[zauber]) {
this.mana -= this.zauber[zauber];
console.log(`${this.name} zaubert ${zauber}! Mana verbleibend: ${this.mana}`);
} else {
console.log(`${this.name} hat nicht genug Mana, um ${zauber} zu zaubern!`);
}
}
};

zauberer.zauberBannen-Zauber('brennenderBolzen'); // Ausgabe: Merlin zaubert brennenderBolzen! Mana verbleibend: 70
zauberer.zauberBannen-Zauber('heilung'); // Ausgabe: Merlin zaubert heilung! Mana verbleibend: 20
zauberer.zauberBannen-Zauber('brennenderBolzen'); // Ausgabe: Merlin hat nicht genug Mana, um brennenderBolzen zu zaubern!

In diesem Spiel kann unser Zauberer Zauber wirken, solange er genug Mana hat. Die zauberBannen-Zauber-Methode überprüft den Mana-Kosten des Zaubers, zieht ihn vom Mana des Zauberers ab, falls möglich, und gibt uns Rückmeldung über die Aktion.

Und da habt ihr es, Lehrlinge! Ihr habt die Grundlagen der JavaScript-Objektmethoden gelernt. Denkt daran, Übung macht den Meister, also experimentiert weiter mit diesen Konzepten. Bald werdet ihr wie ein echter JavaScript-Zauberer programmieren können! Möge euer Code frei von Fehlern sein und eure Methoden stets die erwarteten Ergebnisse liefern. Viel Spaß beim Programmieren!

Credits: Image by storyset