studyklar
IProg · Skript 2 · Abschnitt 6

Objekte und Klassen in JavaScript: Prototypen, JSON und class

In Java gibt es kein Objekt ohne Klasse. JavaScript geht einen anderen Weg: Objekte entstehen aus Funktionen, aus anderen Objekten oder direkt aus geschweiften Klammern. Hier stehen diese Wege nach dem Skript, dazu JSON und das neuere class. Rechts stehen die Objekte, der Code und die Ausgabe. Mit Weiter geht es Schritt für Schritt voran.

Worum es geht

Skript 02 (JavaScript 1), Folien 26 bis 29: objektorientierte Programmierung, die Objekthierarchie, Objekterzeugung, Schlüsselwort class. Statt alert schreiben wir mit console.log in die Konsole des Browsers (Taste F12).

Die Frage dieses Abschnitts: Wie erzeugt man in JavaScript Objekte, und was ist eine Klasse dort? Ein Objekt bündelt Daten (Felder wie Vorname und Nachname) und Funktionen, die mit diesen Daten arbeiten (Methoden).

So gehen wir vor:

  1. Objekte aus einer Funktion mit new, Methoden über den Prototyp, Object.create.
  2. Objekte direkt anlegen, und das Datenformat JSON.
  3. Das Schlüsselwort class seit ECMAScript 6.
  4. Die vordefinierten Objekte des Browsers.
  5. Eine kurze Klausurfrage dazu.

Keine der drei Klausuren fragt Objekte in JavaScript direkt ab. In PHP (Skript 05) und in Java schreibt man Klassen ähnlich wie hier mit class; in JavaScript steckt dahinter aber der Prototyp.

Eine Funktion als Bauplan

function Person (vn, nn) {  this.vn = vn; this.nn = nn; this.stufe = 1;  this.print = function() { return this.vn + ' ' + this.nn; }}let p = new Person ('Erna', 'Schmidt');let q = new Person ('Max', 'Meier');console.log(p.print());console.log(p.stufe);console.log(p.print === q.print);
Erna Schmidt
1
false

JavaScript ist prototypenbasiert: Bis ECMAScript 6 (2015) gab es keine Klassen und kein Schlüsselwort class. Die Rolle der Klasse übernimmt eine Funktion, die Konstruktorfunktion.

new Person('Erna', 'Schmidt') erzeugt ein neues, leeres Objekt und ruft Person damit auf. In der Funktion ist this dieses neue Objekt. this.vn = vn legt also am Objekt das Feld vn mit dem Wert „Erna“ an. Am Ende liefert new das fertige Objekt.

Auch print wird hier in der Funktion angelegt. Darum bekommt jedes Objekt seine eigene Kopie. === prüft, ob links und rechts genau dasselbe stehen. p.print === q.print fragt also: Ist es dieselbe Funktion im Speicher? Bei zwei Kopien ist die Antwort false. Das Beispiel steht so auf Folie 28.

Methoden über den Prototyp

function Person (vn, nn) {  this.vn = vn; this.nn = nn;}Person.prototype.print = function() { return "Name: " + this.vn + ' ' + this.nn; };let p1 = new Person('Erna', 'Schmidt');let q1 = new Person('Max', 'Meier');console.log(p1.print());console.log(q1.print());console.log(p1.print === q1.print);
Name: Erna Schmidt
Name: Max Meier
true

Jede Funktion hat ein Objekt prototype (Prototyp, Vorlage). Jedes mit new Person erzeugte Objekt ist mit Person.prototype verbunden. Fragt man ein Objekt nach einem Feld, das es selbst nicht hat, sucht JavaScript im Prototyp weiter.

Folie 26 legt print darum einmal in Person.prototype an (Zeile 4). p1 und q1 haben selbst nur vn und nn; print finden sie im Prototyp. Beide benutzen dieselbe Funktion: p1.print === q1.print ist true. Das spart Speicher bei vielen Objekten.

Noch 9 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Abbildung 1Prototypen

Objekte aus Funktionen

pvn: 'Erna'nn: 'Schmidt'stufe: 1print: function
qvn: 'Max'nn: 'Meier'stufe: 1print: function
jedes Objekt hat seine eigene Funktion print
function Person (vn, nn) {  this.vn = vn; this.nn = nn; this.stufe = 1;  this.print = function() { return this.vn + ' ' + this.nn; }}let p = new Person ('Erna', 'Schmidt');let q = new Person ('Max', 'Meier');console.log(p.print());console.log(p.stufe);console.log(p.print === q.print);
Erna Schmidt
1
false
Legendegerade gemeintObjekte und ihr Code.