Javascript lernen | Teil 3 | Object literals + Namespaces

Im heutigen Teil 3 von meiner Serie Javascript lernen befasse ich mich mit dem sehr coolen Konstrukt Object literals und wie man das für Namespaces verwenden kann.

Object literals

Als erstes ein Sourcecode Beispiel eines Code literals:

var meinObjekt = {
    a: 3,
    b: 4,
    c: function(){
        return meinObjekt.a*meinObjekt.b;
    }
}

Wie man hier schön sieht, unterscheidet sich das Object literal gegenüber einer normalen Funktion, dass es nicht eine Variable oder eine Funktion einer Variablen zuweist, sondern dass es direkt mittels { } derklariert wird.

Mit { } wird direkt ein Objekt meinObjekt erzeugt und es können wieder beliebige “Klassenmembers” erzeugt werden (hier Variable a, b und Funktion c() ).

Das spezielle an Object literals ist, dass alle Members public sind und wie in Javascript üblich, können problemlos zur Laufzeit noch neue Members hinzugefügt werden.

meinObjekt.d = function(){
    return "all right";
}

Mit dem obigen Stück Code habe ich ganz einfach zur Laufzeit der Membervariable d vom Objekt meinObjekt eine neue Funktion zugewiesen.

Naja, nachdem ich Code literals geschnallt habe, wurde mir jQuery doch schon um einiges Verständlicher 🙂

Namespaces

var namespace = {
    caching: {},
    orm: {
        mapping: {},
        save: {},
        load: function(){ return "Hello World" }
    }
}

Will man sich nun eigene Pakete (Namespaces) generieren und nicht den globalen Namespace mit Variablen, Funktionen und Objekten verseuchen (was ja in Javascript gerne gemacht wird), kann man sich die Object literals zu nutze machen und sich so beliebig tief verschachtelte Namespaces erzeugen. Im Beispiel habe ich nun ein Paket namespace mit den Subpackages caching und orm erzeugt. orm wiederum hat 3 weitere Subpackages…

Ich kann jetzt in meinem definierten namespace z.B. die Funktion load aufrufen. Unten seht ihr 2 Aufrufmöglichkeiten, wisst ihr was der Unterschied ist? Falls nein, wird der nächste Artikel sicher interessant, da werde ich auf das Thema Funktions- bzw. Objektaufrufe eingehen und genauer beschreiben, was mich am Anfang verunsichert hat.

namespace.orm.load;
namespace.orm.mapping.load();

4 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *