Objektorientierung in JavaScript/Objekte und Klassen/Klassen

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<html>
<head>
<style>
p.dotted {border-style: dotted; padding: 10px;}
</style>
</head>
</html>

==Klassen in JavaScript==
Die Definition einzelner Objekte hat einen großen Nachteil: Es ist aufwendig, mehrere Objekte der gleichen Art zu erstellen. So muss bei vielen Objekten von Personen beispielsweise der gleiche Code für eine Funktion wie atmen() immer wieder verwendet werden. Vor allem bei Änderungen an dieser Funktion kann es zu Problemen kommen.

Klassen fassen Objekte mit ähnlichen Eigenschaften und gleichen Funktionen zusammen. Sie dienen als Bauplan für all ihre ''Instanzen'' und beschreiben, welche Attribute ein Objekt ihres Typs haben kann (ohne selbst Werte festzulegen) oder welche Funktionen diese aufweisen.
<p class=dotted>Eine Klasse fasst gemeinsame Eigenschaften und Methoden von Objekten zusammen. Sie dient als "Bauplan" für all ihre Instanzen.</p>
<p class=dotted>Eine Instanz ist ein Objekt, welches vom Typ einer Klasse ist. Sie stellt die konkrete Ausprägung des "Bauplans" dar.</p>

JavaScript ist eine '''klassenlose''' Programmiersprache. Trotzdem kann man mithilfe einer Funktion viele Objekte des gleichen Typs erzeugen.

<code id="7hbejk541sj1">
function Person(vorname, nachname, geburtsdatum) {
    this.vorname = vorname,
    this.nachname = nachname,
    this.geburtsdatum = geburtsdatum,
    this.id = function() {
        return this.vorname.substring(0, 1) + this.nachname.substring(0, 1) + this.geburtsdatum.getFullYear();
    },
    this.alter = function() {
        return Math.round((new Date().getTime() - this.geburtsdatum.getTime()) / 31536000000); //Das Schaltjahr wird in dieser Funktion nicht berücksichtigt
    }
}
</code>
Das Schlüsselwort ''this'' dient als Platzhalter für das Objekt, welches instanziiert (=erzeugt) werden soll. Für die Instanziierung verwendet man das Schlüsselwort ''new'', durch welches der Konstruktor aufgerufen wird.
<run id="7hbejk541sj2">
var alice = new Person("Alice", "Schulze", new Date("1997-12-01"));
var bob = new Person("Bob", "Müller", new Date("1998-03-12"));
var carol = new Person("Carol", "Schneider", new Date("1997-07-22"));
var dave = new Person("Dave", "Meier", new Date("1998-01-17"));

var personen = [alice, bob, carol, dave];
var result = "";
personen.forEach(function(person) {
  result += person.alter() +"\n";
});
result;
</run>

<p class=dotted>Ein Konstruktor ist eine spezielle Funktion, die zur Erstellung von Instanzen einer Klasse (Instanziierung) verwendet wird. Sie wird durch das Schlüsselwort ''new'' aufgerufen.</p>

==Klassen in UML==
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>[[Bild:Flogerlinghoff_UML_Klasse.JPG|left|300px]]</td>
<td>
Unter dem Klassennamen werden erst wieder die Attribute und dann die Methoden angegeben.
Nach dem Doppelpunkt wird der bei Attributen der Typ der Wertes, bei Methoden der Rückgabetyp angegeben. Das gleiche ist auch bei der Beschreibung von Objekten möglich. Der Datentyp der Parameter einer Methode wird auch auf diese Weise angegeben.
</td>
</table>

Eine mögliche Umsetzung der Klasse:

<code id="5427135602042016">
function Katze(alter, fellfarbe, istStubenrein, rasse) {
  this.alter = alter;
  this.fellfarbe = fellfarbe;
  this.istHungrig;
  this.istStubenrein = istStubenrein;
  this.rasse = rasse;

  this.essen = function() {
    this.istHungrig = false;
  };
  this.kratzen = function(gegenstand) {
    gegenstand.istZerkratzt = true;
  };
  this.mausFangen = function() {
    if(Math.random() < 0.75) {
      return true;
    } else {
      return false;
    }
  };
  this.miauen = function() {
    return "Miau";
  };
}

function Gegenstand() {
  this.istZerkratzt = false;
}
</code>
<run id="54271419ß2ß42016">
var katze = new Katze(12, "schwarz", true, "Britisch Kurzhaar");
katze.istHungrig = true;
katze.essen();
katze.istHungrig;
</run>
<run id="5426174102042016">
var katze = new Katze(6, "weiß", true, "Britisch Kurzhaar");
var gegenstand = new Gegenstand();
katze.kratzen(gegenstand);
gegenstand.istZerkratzt;
</run>

Instanze von Klassen werden mit der Klasse durch eine gestrichelte Linie verbunden. Die Pfeilspitze zeigt von der Instanz zur Klasse. Dadurch wird die "ist ein"-Beziehung zwischen Klasse und Instanz ausgedrückt.
[[Bild:Flogerlinghoff_UML_Klasse-Instanz-Beziehung.JPG|center|200px]]

==Aufgaben==
Erstelle die Klasse ''Moebel'' und erzeuge Instanzen von dieser.
<code id="5426185602042016">

</code>
<check>
return (typeof Moebel == "function") && (typeof (new Moebel()) == "object");
</check>
<run id="5427190002042016">

</run>