Web Development

Ein Lehrbuch für das Informatik oder Medien-Informatik Studium.

Javascript ist eine objektorientierte Sprache. Achtung, hier kommt es leicht zu einem Missverständniss: Objektorientierung hat nicht zwingend etwas mit Klassen zu tun, sondern eben mit Objekten. Und während z.B. in Java, C++, C#, PHP diese Objekte immer in Klassen organisiert sind, ist das in Javascript nicht zwingend der Fall.

Ein einzelnes Objekt

Wie Sie ein einzelnes Objekt mittels JSON erzeugen wissen Sie ja schon:

Javascript Code Objekt in JSON Schreibweise

var hs = {
  name: "FH Salzburg",
  typ: "Fachhochschule",
  seit: 1996,
  alter: function() { return  (new Date).getYear() + 1900 - this.seit }
};

console.log( hs.alter() );  // 20

Klassen

In Javascript 2015 wurden Klassen in JavaScript eingeführt:

Javascript Code Klasse mit Constructor und einer Methode


class Studiengang {

  constructor (name, seit, hs) {
    this.name = name;
    this.seit = seit;
    this.hs = hs;
  }


  toString () {
    return "Studiengang " + this.name +
      " (seit " + this.seit +
      " @ " + this.hs.name + ")";
  }

}

typeof Studiengang;  // function!



mmtb = new Studiengang( "BSc MultiMediaTechnology", 2008, hs );
mmtm = new Studiengang( "MSc MultiMediaTechnology", 2011, hs );

mmtb.toString();  // ruft toString Methode auf

Vererbung mit Klassen

Javascript Code Vererbung von Attributen

class Pet {
  constructor() {
    this.status = "sleeping";
  }
  log() {
    console.log("i am " + this.status +
      ". " + this.word + "!");
  }
}

class Dog extends Pet {
  constructor (b) {
    super();
    this.breed = b;
    this.word = "wau";
  }
  sit() {
    this.status = "sitting";
  }
}


d = new Dog("beagle");
d.word    // wau
d.sit()

d.status  // sleeping

Contructor ohne Klasse

Vor den Klassen gab es in JavaScript eine andere Art mehrere gleichartige Objekte zu erzeugen: die Constructor Funktion wurde als normale Funktion angelegt:

Javascript Code Konstruktor für Objekte

function Studiengang(name, seit, hochschule) {
  this.name = name;
  this.seit = seit;
  this.hs = hochschule;
}

mmad = new Studiengang( "DI(FH) MultiMediaArt", 1996, hs);
mmab = new Studiengang( "BA MultiMediaArt", 2006, hs);
mmtb = new Studiengang( "BSc MultiMediaTechnology", 2008, hs);
mmtm = new Studiengang( "MSc MultiMediaTechnology", 2011, hs);

Jedes dieser Objekte hat nun eine Eigenschaft name und eine Eigenschaft seit.

Die so erzeugten Objekte bleiben mit der Konstruktor-Funktion verbunden - falls keine verwendet wurde auf die Funktion Object():

Javascript Code Fortsetzung: Konstruktor-Funktionen

// folgende Ausdrücke sind true:
mmtb.constructor === Studiengang;
hs.constructor === Object;

Abbildung: Objekt mit Konstruktor

Dieser Konstruktor wird auch verwendet, um die Frage instanceof zu beantworten:

Javascript Code Fortsetzung: Operator instanceof

mmtb instanceof Studiengang;
hs instanceof Object;
mmtb instanceof Object;

mmtb ist auch eine Instanz von Object! Es muss also eine Art Vererbungs-Hierarchie geben, die wir noch nicht kennen, in der Studiengang als Kind von Object geführt wird. Wie funktioniert das? Die Antwort lautet: mit dem Prototypen.