JavaScript - Das 'new' Schlüsselwort: Dein Tor zur Objekterstellung

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute begeben wir uns auf eine aufregende Reise in die Welt der Objekterstellung mit dem magischen 'new' Schlüsselwort. Mach dir keine Sorgen, wenn du neu im Programmieren bist; ich werde dein freundlicher Guide sein, und wir werden dieses Konzept Schritt für Schritt erkunden. Also, hol dir deine virtuellen Zauberstäbe (Tastaturen) und tauchen wir ein!

Was ist das 'new' Schlüsselwort?

Bevor wir anfangen, Zauber zu wirken (Code zu schreiben), lassen wir uns erstmal anschauen, was das 'new' Schlüsselwort eigentlich ist. In JavaScript ist 'new' wie eine besondere Beschwörung, die uns hilft, neue Objekte basierend auf Konstruktoren oder Klassen zu erstellen. Es ist wie ein Bauplan für ein Haus, den man verwendet, um mehrere Häuser zu bauen.

Syntax: Wie man das 'new' Schlüsselwort verwendet

Die Syntax für die Verwendung des 'new' Schlüsselworts ist relativ einfach:

let objectName = new ConstructorFunction(arguments);

Mach dir keine Sorgen, wenn das jetzt ein bisschen verwirrend aussieht. Wir werden es mit Beispielen näher erläutern.

Verwendung von 'new' mit Funktion Konstruktoren

Lassen wir mit Funktion Konstruktoren beginnen. Diese sind wie Rezepte zum Erstellen von Objekten. Hier ist ein Beispiel:

function Wizard(name, house) {
this.name = name;
this.house = house;
this.cast = function() {
console.log(this.name + " zaubert einen Zauber!");
};
}

let harry = new Wizard("Harry Potter", "Gryffindor");
console.log(harry.name); // Ausgabe: Harry Potter
harry.cast(); // Ausgabe: Harry Potter zaubert einen Zauber!

In diesem Beispiel haben wir einen Wizard Konstruktor erstellt. Wenn wir 'new Wizard()' verwenden, ist es so, als ob wir sagen: "Erstelle einen neuen Zauberer basierend auf diesem Bauplan." Das 'new' Schlüsselwort erledigt für uns mehrere Dinge:

1. Es erstellt ein neues leeres Objekt.
2. Es setzt 'this' innerhalb des Konstruktors, damit es auf dieses neue Objekt refers.
3. Es führt die Konstruktorenfunktion aus und fügt Eigenschaften dem neuen Objekt hinzu.
4. Es gibt das neue Objekt zurück.

Ist das nicht zauberhaft? Wir können so viele Zauberer wie wir wollen mit diesem Konstruktor erstellen!

Verwendung von 'new' mit Klassen

Nun arbeiten wir uns hoch und schauen uns die Verwendung von 'new' mit Klassen an. Klassen in JavaScript sind wie leistungsfähigere, organisierte Konstruktoren. Hier ist ein Beispiel:

class SpellBook {
constructor(title, author) {
this.title = title;
this.author = author;
this.spells = [];
}

addSpell(spell) {
this.spells.push(spell);
console.log(`Hinzugefügt ${spell} zu ${this.title}`);
}

castSpell(index) {
if (index < this.spells.length) {
console.log(`Zauber ${this.spells[index]} wird gewirkt!`);
} else {
console.log("Zauber wurde im Buch nicht gefunden!");
}
}
}

let beginnerBook = new SpellBook("Anfängerleitfaden für Zauber", "Merlin");
beginnerBook.addSpell("Lumos"); // Ausgabe: Hinzugefügt Lumos zu Anfängerleitfaden für Zauber
beginnerBook.castSpell(0); // Ausgabe: Zauber Lumos wird gewirkt!

Hier verwenden wir 'new' mit unserer SpellBook Klasse. Es funktioniert ähnlich wie bei Funktion Konstruktoren, aber Klassen bieten eine sauberere, organisierte Methode, um Objekte mit Methoden zu erstellen.

Verwendung von 'new' mit eingebauten Objekten

JavaScript hat auch eingebauten Objekte, die wir mit 'new' erstellen können. Hier sind einige Beispiele:

// Erstellen eines neuen Datum-Objekts
let today = new Date();
console.log(today); // Ausgabe: Aktuelles Datum und Uhrzeit

// Erstellen eines neuen Arrays
let magicItems = new Array("Zauberstab", "Trank", " Besen");
console.log(magicItems); // Ausgabe: ["Zauberstab", "Trank", " Besen"]

// Erstellen eines neuen RegExp (Regulärer Ausdruck)
let spell = new RegExp("abracadabra", "i");
console.log(spell.test("ABRACADABRA")); // Ausgabe: true

In diesen Beispielen verwenden wir 'new' mit JavaScripts eingebauten Objekten. Es ist wie das Verwenden von vorgefertigten magischen Werkzeugen!

Die Magie hinter 'new': Ein genaueres Blick

Nun, da wir 'new' in Aktion gesehen haben, werfen wir einen Blick hinter die Kulissen, um zu verstehen, was es wirklich macht. Wenn du 'new' verwendest, führt JavaScript diese Schritte aus:

1. Erstellen eines neuen leeren Objekts.
2. Setzen des Prototyps dieses neuen Objekts auf die Prototype-Eigenschaft des Konstruktors.
3. Aufrufen der Konstruktorenfunktion mit 'this', das auf das neue Objekt refers.
4. Rückgabe des neuen Objekts (es sei denn, der Konstruktor gibt einen nicht-primitiven Wert zurück).

Hier ist eine Tabelle, die die wichtigsten Methoden in Bezug auf 'new' zusammenfasst:

Methode	Beschreibung
Object.create()	Erstellen eines neuen Objekts mit dem angegebenen Prototyp-Objekt und Eigenschaften
Object.setPrototypeOf()	Setzen des Prototyps eines angegebenen Objekts auf ein anderes Objekt
Function.prototype.call()	Aufrufen einer Funktion mit einem gegebenen 'this'-Wert und einzeln übergebenen Argumenten
Function.prototype.apply()	Aufrufen einer Funktion mit einem gegebenen 'this'-Wert und Argumenten, die als Array übergeben werden

Abschluss unserer magischen Reise

Und das war's, junge Programmierer! Wir haben das mystische 'new' Schlüsselwort erkundet, von grundlegenden Funktion Konstruktoren bis hin zu Klassen und eingebauten Objekten. Denke daran, 'new' ist dein Zauberstab für die Erstellung von Objekten in JavaScript. Verwende ihn weise, und du wirst in keine Zeit erstaunliche Programme zaubern!

Bevor wir uns verabschieden, hier ist eine kleine Coding-Herausforderung für dich: Versuche, eine 'Potion' Klasse mit Eigenschaften wie 'name', 'effect' und einer Methode 'drink()' zu erstellen. Dann erstelle ein paar Tränke mit dem 'new' Schlüsselwort. Viel Spaß beim Programmieren und möge deine JavaScript-Reise mit Magie und Wundern gefüllt sein!

Credits: Image by storyset