JavaScript - ObjektKonstruktor

Hallo, ambitionierte Programmierer! Heute tauchen wir in die faszinierende Welt der JavaScript-ObjektKonstruktoren ein. Als dein freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, dich auf dieser Reise zu führen. Also, schnall dir deine virtuellen Helme an und lasst uns einige Objekte bauen!

ObjektKonstruktoren

Stell dir vor, du betreibst einen magischen Tierladen. Du hast viele verschiedene Tiere, jedes mit seinem eigenen Satz von Eigenschaften. Anstatt jedes Tier separately zu schreiben, wäre es nicht großartig, wenn wir ein蓝图 für unsere Tiere erstellen könnten? Genau das machen ObjektKonstruktoren in JavaScript!

Ein ObjektKonstruktor ist wie eine Fabrik, die Objekte mit ähnlichen Eigenschaften und Methoden produziert. Lassen wir einen einfachen Konstruktor für unsere magischen Tiere erstellen:

function MagicalPet(name, species, specialPower) {
this.name = name;
this.species = species;
this.specialPower = specialPower;
this.introduce = function() {
console.log(`Hi, ich bin ${this.name}, ein ${this.species} mit ${this.specialPower} Kraft!`);
};
}

Lassen wir das einmal auseinandernehmen:

1. Wir definieren eine Funktion namens MagicalPet mit Parametern für Name, Art und spezielle Kraft.
2. Innerhalb der Funktion verwenden wir this, um diese Parameter als Eigenschaften des Objekts zuzuweisen.
3. Wir definieren auch eine Methode namens introduce, die eine Begrüßung ausgibt.

Um ein neues magisches Tier zu erstellen, verwenden wir das new- Schlüsselwort:

let fluffy = new MagicalPet("Fluffy", "Drache", "feueratmung");
fluffy.introduce(); // Ausgabe: Hi, ich bin Fluffy, ein Drache mit feueratmender Kraft!

Voilà! Wir haben gerade unser erstes magisches Tier mit einem ObjektKonstruktor erstellt. Ist das nicht aufregend?

Hinzufügen einer Eigenschaft oder Methode zu einem Konstruktor

Manchmal erkennen wir nach Erstellung unseres Konstruktors, dass wir eine wichtige Eigenschaft oder Methode vergessen haben. Keine Sorge! Wir können sie später über das Prototype hinzufügen.

Lassen wir eine age-Eigenschaft und eine birthday-Methode zu unserem MagicalPet hinzufügen:

MagicalPet.prototype.age = 0;
MagicalPet.prototype.birthday = function() {
this.age++;
console.log(`${this.name} ist jetzt ${this.age} Jahre alt!`);
};

Jetzt hat jedes magische Tier ein Alter (beginnend bei 0) und kann Geburtstage feiern:

fluffy.birthday(); // Ausgabe: Fluffy ist jetzt 1 Jahre alt!
fluffy.birthday(); // Ausgabe: Fluffy ist jetzt 2 Jahre alt!

JavaScript-Objekt Prototype

Du fragst dich vielleicht, "Was ist das mit diesem 'Prototype'-Ding, das wir gerade verwendet haben?" Nun, stelle es dir als einen gemeinsamen Rucksack vor, den alle Objekte, die aus dem gleichen Konstruktor erstellt werden, mit sich herumtragen. Alles, was wir in diesen Rucksack legen, ist für alle Objekte zugänglich.

Wenn wir Eigenschaften oder Methoden zum Prototype hinzufügen, legen wir sie praktisch in diesen gemeinsamen Rucksack. Das ist speicherplatz-effizienter als sie direkt jedem Objekt hinzuzufügen, insbesondere wenn wir viele Objekte haben.

Hier ist eine visuelle Darstellung:

MagicalPet Konstruktor
|
v
Prototype (Gemeinsamer Rucksack)
- age
- birthday()
|
v
Individuelle MagicalPet Objekte
- name
- species
- specialPower
- introduce()

Eingebaute ObjektKonstruktoren in JavaScript

JavaScript bringt mehrere eingebaute ObjektKonstruktoren mit, die du in deinen Programmierabenteuern oft verwenden wirst. Sehen wir uns einige davon an:

Konstruktor	Beschreibung	Beispiel
String()	Erstellt String-Objekte	let begrüßung = new String("Hallo");
Number()	Erstellt Number-Objekte	let alter = new Number(25);
Boolean()	Erstellt Boolean-Objekte	let istToll = new Boolean(true);
Array()	Erstellt Array-Objekte	let früchte = new Array("Apfel", "Banane", "Kirsche");
Object()	Erstellt generische Objekte	let leeresObj = new Object();
Date()	Erstellt Datum-Objekte	let heute = new Date();

Obwohl diese Konstruktoren verfügbar sind, ist es erwähnenswert, dass es für primitiv Typen wie Strings, Numbers und Booleans effizienter ist, Literale zu verwenden:

let begrüßung = "Hallo";            // bevorzugt gegenüber new String("Hallo")
let alter = 25;                      // bevorzugt gegenüber new Number(25)
let istToll = true;                  // bevorzugt gegenüber new Boolean(true)
let früchte = ["Apfel", "Banane"];  // bevorzugt gegenüber new Array("Apfel", "Banane")

Konstruktoren wie Date() werden jedoch wie gezeigt oft verwendet:

let geburtstag = new Date("1990-01-01");
console.log(geburtstag.getFullYear()); // Ausgabe: 1990

Und das war's, meine jungen Zauberer des Codes! Wir sind durch die Domäne der JavaScript-ObjektKonstruktoren gereist, haben magische Eigenschaften und Methoden hinzugefügt, die mystische Prototype erkundet und sogar einige eingebaute Konstruktoren angeschaut.

Denke daran, Übung macht den Meister. Versuche, deine eigenen Konstruktoren zu erstellen, vielleicht für verschiedene Arten von Zaubersprüchen oder magischen Kreaturen. Je mehr du mit diesen Konzepten spielst, desto natürlicher werden sie für dich.

Weiterschreiben, weiterlernen und vor allem: weiter Spaß haben! Bis zur nächsten Lektion, möge dein Code frei von Bugs sein und deine Kompilierungszeiten schnell sein!

Credits: Image by storyset