Lesson 05: Objects

JavaScript und Objekte bzw. Klassen

Eine der ersten Hürden die ein erfahrener OO-Programmierer überwinden muss, ist das Fehlen des class Schlüsselwortes. Man könnte vielleicht eine Trennlinie ziehen zwischen objekt-orientiertem Programmieren und einem neuen Pendant klassen-orientierte Programmierung. Dabei lässt sich dann JavaScript bei Ersterem einordnen.

In JavaScript ist quasi alles ein Objekt. Das beinhaltet damit String,Number, Function, Array und so weiter und natürlich das Object selbst. Die Spezifikation sagt, dass ein String-Literal "on-the-fly" umgewandelt wird in ein String-Objekt, wenn ein Eigenschaften- oder Methoden-Zugriff erfolgt. Objekte sind ganz allgemein zu verstehen als Sammlungen von key-value Paaren (plus interne "Magie").

Klassen im Sinne der herkömmlichen Objekt-Orientierten Programmierung existieren wiederum gar nicht. JavaScript verfolgt hier einen komplett anderen Ansatz, der uns zwingt, zunächst einmal die bekannte OOP zu verlernen.

Creating Objects

Ein JavaScript-Objekt kann auf unterschiedlichste Weise erzeugt werden. Die Varianten können reduziert werden auf:

1. Objekt-Initialisierer
2. Konstruktor - Funktion
3. Object.create - Methode

Beginnen wir mit dem Objekt-Initialisierer

var e1 = {};

var c1 = {
    nr: 1,
    firstname: "Klaus",
    lastname: "Lage"
};

var c2 = new Object({
    nr: 1,
    firstname: "Klaus",
    lastname: "Lage"
});
        

Eigenschaften

Properties können jederzeit definiert werden. Sowie bei der Definition als auch beim Abruf sind zwei syntaktische Varianten erlaubt:

Punkt-Operator

objekt.prop = value

Array-Zugriff

objekt["prop"] = value

Bisher sehen unsere Objekte eher aus wie Datenstrukturen. Deswegen zum nächsten Schritt:

Konstruktor-Funktionen

function Leer() {};
var e2 = new Leer();

var Article = function( nr, name ) {
    this.nr = nr;
    this.name = name;
}
var a1 = new Article(1, "Berliner Weiße");
        

Anmerkung: Konstruktor-Funktionen beginnen nach Konvention mit einem Großbuchstaben.

Aber was macht dieses this hier?

Zunächst ist this ein Verweis. Worauf this verweist entscheidet der Kontext:

• Global: window (oder das global unter z.B. node)
• In einer Funktion: ebenso diesen globalen Kontext (bzw. undefined falls wir uns im strict-Mode befinden).
• In einem Konstruktor bzw. einer Methode(!): das Objekt.

Methoden

Wie sieht denn jetzt eine Methode aus? Die Spezifikation sagt: Eine Methode ist eine Funktion die ein Wert einer Eigenschaft ist.

function Customer( id, firstname, lastname ) {
    this.id = id;
    this.firstname = firstname;
    this.lastname = lastname;
    this.fullname = function () { return this.firstname +  " " + this.lastname };
}
        

Natürlich lassen sich Methoden genau wie Properties auch dynamisch hinzufügen.

Eigenschaften und Methoden des Object-Typs

Prinzipiell erzeugt also unsere Konstruktor-Funktion ein Object mit zusätzlichen Eigenschaften. Die vorhandenen Eigenschaften fasst die Referenz zusammen. Unter anderem ist das eine constructor-Property, die unsere Konstruktor-Funktion enthält, sowie zum Beispiel auch eine toString-Methode.