JavaScript-Objekte. Teil 8 des JavaScript-Kurses von Anfänger bis Fortgeschrittene in 10 Blogbeiträgen

Dies ist Teil 8 der JavaScript-Blogbeitragsreihe, die Sie von Anfänger zu Fortgeschrittenem führen wird. Wenn Sie den vorherigen Blogbeitrag über JavaScript-Funktionen noch nicht gelesen haben, können Sie es hier nachlesen. Am Ende dieser Reihe werden Sie alle Grundlagen kennen, die Sie benötigen, um mit dem Programmieren in JavaScript zu beginnen. Ohne weitere Umschweife, lassen Sie uns mit dem achten Tutorial beginnen.

JavaScript-Objekte – Inhaltsverzeichnis:

1. JavaScript-Objekte
2. Objektkonstruktorfunktionen

JavaScript-Objekte

JavaScript-Objekte spielen eine wichtige Rolle. Obwohl es sich um ein relativ großes Thema handelt, kann es auch relativ einfach sein, ein Verständnis dafür zu entwickeln. Eine der häufigsten Möglichkeiten, Objekte zu verstehen, besteht darin, sich vorzustellen, dass Sie ein Auto in Code neu erstellen. Wir werden zwei Hauptkonzepte haben, wenn wir mit Objekten arbeiten. Sie werden Eigenschaften und Methoden haben. Eigenschaften sind die Dinge, die JavaScript-Objekte haben, und die Methoden sind die Dinge, die Objekte ausführen können. Lassen Sie uns das mit einigen Beispielen sehen.

// Lassen Sie uns mehrere Objekte definieren, um ein besseres Verständnis zu haben
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Das Flugzeug beginnt zu starten..."},
    land: function(){return "Das Flugzeug beginnt zu landen..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "Das Auto fährt vorwärts..."},
    smartSummon: function(){return "Das Auto beginnt, sich selbst zu Ihnen zu fahren..."}
}

// Wir können auf die Eigenschaften zugreifen und sie in der Konsole protokollieren:
console.log("Die Eigenschaften des Flugzeugs:");
console.log("Kann fliegen: " + plane.canFly);
console.log("Gesamtanzahl der Flügel: " + plane.numberOfWings);
// Wir können auch das Flugzeug Aktionen ausführen lassen
console.log(plane.takeOff());
console.log(plane.land());
// Wenn Sie genauer hinsehen, können Sie sehen, dass 
// wir die Aktionen nicht direkt in der Konsole protokollieren
// Stattdessen geben wir sie aus den Funktionen zurück
// und in diesem Fall protokollieren wir sie in der Konsole
// Auf diese Weise können wir dem Benutzer auch eine Warnung geben
// dass das Flugzeug startet
alert(plane.takeOff());
// Wir können auch über die Eigenschaften des Autos lernen 
// und sie ebenfalls zur zusätzlichen Übung protokollieren
console.log("Ist es ein Elektroauto? " + car.isElectric);
console.log("Was ist die Marke des Autos: " + car.brand);
console.log("Wie viele Türen hat es? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Wenn wir den obigen Code ausführen, sollten wir die folgende Ausgabe erhalten:

Wir haben gerade zwei Hauptbeispiele für JavaScript-Objekte gesehen: eines mit einem Flugzeug und eines mit einem Auto. So wie Flugzeuge und Autos unterschiedliche Eigenschaften und verschiedene Dinge haben, die sie tun können, können auch verschiedene Objekte, die wir erstellen, unterschiedliche Dinge tun und unterschiedliche Eigenschaften haben. Wenn Sie genauer hinsehen, können Sie ein Muster in der Art und Weise erkennen, wie wir Objekte, Eigenschaften und Methoden definieren.

Wir beginnen damit, Objekte so zu definieren, wie wir Variablen oder Konstanten definieren, in diesem Fall ist es normalerweise ausreichend, Konstanten zu verwenden, wenn wir JavaScript-Objekte definieren. Aber anstatt diese Konstante einfach einem Wert zuzuweisen, wie wir es mit regulären Konstanten getan haben, öffnen und schließen wir jetzt eine Menge geschweifte Klammern und geben im Wesentlichen die Daten in Schlüssel-Wert-Paaren an. Beachten Sie, dass die Definition von Eigenschaften und Methoden ziemlich ähnlich ist. Der Hauptunterschied besteht darin, dass wir beim Definieren von Eigenschaften die Namen einem Wert zuweisen, den wir später abrufen werden. Wenn wir jedoch eine Methode definieren, müssen wir eine Funktion bereitstellen, die wir später ausführen werden. Dieser Unterschied spiegelt sich auch darin wider, wie wir sie später aufrufen. Zum Beispiel:

// Wenn wir eine Eigenschaft abrufen, verwenden wir am Ende keine Klammern
console.log("Kann fliegen: " + plane.canFly);
// Wenn wir Methoden abrufen, 
// führen wir sie auch aus, indem wir Klammern hinzufügen
// Methoden sind hier im Wesentlichen Funktionen, die 
// zu einem bestimmten Objekt gehören
console.log(plane.takeOff());

Es ist wichtig, dass wir die Klammern nach den Methoden hinzufügen, genau wie wir es mit regulären Funktionen getan haben. Andernfalls erhalten wir nur die Funktion selbst, anstatt die Funktion auszuführen.

// Um die Objektmethode auszuführen, sollten wir
// die Klammern direkt nach dem Methodennamen hinzufügen
// andernfalls erhalten wir die Methodendefinition 
// wie in diesem Beispiel
alert(plane.takeOff);

Das angezeigte Ergebnis ist genau das, was wir bei der Erstellung der Methode definiert haben. Sie können auch sehen, dass wir eine Funktion im Vorbeigehen definieren. In diesem Fall definieren wir die Funktion ohne Namen, was in JavaScript möglich ist. Dies ist nicht immer vorzuziehen, da es klarer ist, der Funktion einen Namen zu geben, wenn wir sehen, dass sie angezeigt wird. In diesem Fall verwenden wir die Funktion jedoch nirgendwo anders außerhalb der Objektdarstellung, daher müssen wir der Funktion nicht direkt einen Namen geben. Stattdessen können wir auf die Funktion innerhalb des Objekts mit dem Methodennamen verweisen, den wir ihr zuweisen.

Eine weitere Sache, die Sie über das Abrufen von Eigenschaften oder Methoden aus einem Objekt wissen sollten, ist, dass es mehr als einen Weg gibt, dies zu erreichen. Wir haben eine der häufigsten Praktiken in den obigen Beispielen verwendet, nämlich die Verwendung der Punktnotation. Aber es gibt auch eine andere gängige Methode, um dasselbe Ergebnis zu erzielen, die Sie kennen sollten. Diese zweite Notation verwendet eckige Klammern und Anführungszeichen.

// Beide sind gleich gültig und 
// geben uns die gleichen Ergebnisse
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// Überprüfen Sie die JavaScript-Konsole auf die Ergebnisse

Es ist großartig, dass wir viele detaillierte Eigenschaften und Aktionen speichern können, die wir mit Objekten ausführen können, aber was ist, wenn wir Objekte nicht nur für 1 Auto, sondern sagen wir für 20 Autos, 100 Autos oder sogar 1.000.000 Autos mit einer eindeutigen ID und unterschiedlichen Eigenschaftswerten verwenden müssen. Müssen wir den gesamten Code für jedes Auto von Grund auf neu eingeben? Die Antwort ist nein. Stattdessen können wir etwas nutzen, das als Objektkonstruktorfunktion bezeichnet wird.

Objektkonstruktorfunktionen

Objektkonstruktoren können Ihren Programmierprozess massiv beschleunigen und Ihren Code erheblich trockener machen. Mit Objektkonstruktorfunktionen definieren wir im Wesentlichen einen Plan für das Objekt. Sobald wir einen Plan für das Objekt haben, können wir so viele Instanzen dieses Objekts auf eine viel klarere Weise erstellen, mit viel weniger Wiederholung. Lassen Sie uns das mit einigen Beispielen sehen.

// So definieren wir einen Plan für die Objekte
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// So können wir die 
// JavaScript-Objekte instanziieren, die wir aus 
// dem oben definierten Plan erstellen möchten
// In diesem Fall erstellen wir 3 Autoobjekte 
// mit unterschiedlichen Werten für die Eigenschaften
const car1 = new Car(1, "weiß", true, 4);
const car2 = new Car(2, "schwarz", true, 2);
const car3 = new Car(3, "rot", false, 4);
// Wir können auf die Objekt-Eigenschaften zugreifen, genau wie wir es zuvor getan haben
console.log("Die Farbe des ersten Autos ist: " + car1.color);
console.log("Die Farbe des zweiten Autos ist: " + car2.color);
console.log("Die Farbe des dritten Autos ist: " + car3.color);

Wenn wir den obigen Code ausführen, erhalten wir die folgende Codeausgabe:

Wie Sie aus dem obigen Code sehen können, können wir, sobald wir einen Plan haben, einfach verschiedene Werte übergeben, um verschiedene JavaScript-Objekte aus dem ursprünglichen Plan zu erstellen. Eine Sache, die Ihnen wahrscheinlich aufgefallen ist, ist, dass die Namenskonvention für Objektkonstruktoren darin besteht, den ersten Buchstaben großzuschreiben. In diesem Fall haben wir es nicht als „car“ definiert, sondern als „Car“ benannt. Wenn wir eine Flugzeugklasse erstellen würden, würden wir sie „Plane“ nennen.

Wenn wir Objekte aus unserem definierten Plan erstellen möchten, verwenden wir das Schlüsselwort „new“ und schreiben dann den Namen der Objektkonstruktorfunktion, die wir verwenden möchten. Nach dem Namen öffnen und schließen wir eine Menge Klammern und übergeben die Argumente, mit denen wir unser Objekt erstellen möchten. Beachten Sie, dass wir die Parameternamen nicht wiederholen, wir übergeben einfach die Werte in derselben Reihenfolge wie die Parameter. Sie haben vielleicht auch bemerkt, dass wir beim Erstellen des Plans ein Schlüsselwort namens „this“ verwenden. Für den Moment sollten Sie wissen, dass das Schlüsselwort „this“ auf das Objekt selbst verweist und Teil des Boilerplate-Codes ist, den wir schreiben sollten, wenn wir den Plan für das Objekt erstellen.

Wenn Sie lernen zu programmieren, hören Sie möglicherweise den Begriff „Boilerplate-Code“, der in der Webentwicklung ziemlich häufig vorkommt. Es bedeutet im Grunde, dass es Teile von Code gibt, die wir schreiben, um bestimmte Setups zu erstellen. Auch wenn es keine einzigartige Lösung gibt, die wir mit Code bereitstellen, müssen wir diese Teile schreiben, um funktionierenden Code zu haben. Je nach Boilerplate-Code bieten einige IDEs sogar Abkürzungen für die Bereitstellung dieser Boilerplate-Codes an.

Die JavaScript-Objekte, die wir gerade gelernt haben, sind ein großes Thema und haben viele Details, wenn wir tiefer eintauchen. Aber auf einer grundlegenden Ebene sollten Sie wissen, dass wir mit Code reale Objekte mithilfe von Objekten nachahmen können. Diese JavaScript-Objekte können unterschiedliche Eigenschaften und Methoden haben, auf die wir zugreifen und die wir ausführen können.

Im nächsten Tutorial werden wir weitere Themen und Konzepte entdecken, die ziemlich wichtig und häufig in JavaScript verwendet werden.