Javascript lernen | Teil 4 | Alles ist ein Objekt

Natürlich stimmt die Aussage, alles ist ein Objekt nicht ganz, es gibt schon verschiedene Typen (primitive Datentype wie integer, string und auch Funktionen und Objekte), aber man kann jede deklarierte Variable aufrufen, wie wenn sie eine Funktion oder ein Objekt wäre. Dies hat mich am Anfang ziemlich verwirrt und darum möchte ich mit ein paar Beispielen aufzeigen, wie die verschiedenen Datentypen auf verschiedene Aufrufe reagieren.

Als erstes setzen wir eine Ausgangslage auf:

function TheGreat() {}

TheGreat.imGreater = function () {
    return "imGreater";
}

TheGreat.imAlsoGreater = function () {
    this.a = 11;
    this.b = 12;
    this.c = function(){return true}
    return "imAlsoGreater";
}
TheGreat.imTheGreatest = {
    d: 11,
    e: 12,
    f: function(){return true}
}

Beispiel 1 – imGreater

//type object - an empty object
var imGreaterObject = new TheGreat.imGreater;
console.log(imGreaterObject);

//type function
var imGreaterFunction = TheGreat.imGreater;
console.log(imGreaterFunction);

//type string - "imGreater"
var imGreaterFunctionExecuted = TheGreat.imGreater();
console.log(imGreaterFunctionExecuted);

Fall 1 – Erzeugen Objekt: Es wird ein leeres Objekt erzeugt, return wird ignoriert.
Fall 2 – Zuweisen Funktion: In der Variable imGreater ist eine Funktion gespeichert. Darum wird bei Fall 2 einfach der Inhalt der Variable, in diesem Falle also die Funktion der neuen Variable imGreaterFunction zugewiesen.
Fall 3 – Im letzten Fall wird imGreater ausgeführt und dem Ergebnis zugewiesen. Dies kann mit () bei der Zuweisung erreicht werden. So kann ich die Funktion, wie sonst auch, aufrufen. Es ist also imGreaterFunctionExecuted der String imGreater zugewiesen worden.

Beispiel 2 imAlsoGreater

//type object - with members a,b,c - return is irrelevant
var imAlsoGreaterObject = new TheGreat.imAlsoGreater;
console.log(imAlsoGreaterObject);

//type function
var imAlsoGreaterFunction = TheGreat.imAlsoGreater;
console.log(imAlsoGreaterFunction);

//type string - "imAlsoGreater"
var imAlsoGreaterFuctionExecuted = TheGreat.imAlsoGreater();
console.log(imAlsoGreaterFuctionExecuted);

Eigentlich wieder dasselbe wie in Beispiel 1. Der einzige Unterschied ist, dass in Fall 1 das Objekt jetzt nicht mehr leer ist, sondern Membervariablen und -Funktionen enthält.

Beispiel 3 – imTheGreatest

//TheGreat.imTheGreatest is an object literal and therefore always an instanced object

//error - an object can not be reinstanced
//var imTheGreatestObject = new TheGreat.imTheGreatest;

//type object - with members d,e,f
var imTheGreatest = TheGreat.imTheGreatest;
console.log(imTheGreatest);

//error - an object can not executed as a function
//var imTheGreatestFunctionExecuted = TheGreat.imTheGreatest()

Das letzte Beispiel verwendet ein object literal, also ein bereits instanziertes Objekt.

Fall 1 – Erzeugen Objekt: Javascript erzeugt hier einen Fehler, weil das Objekt ja schon bereits instanziert ist. Diesen Fall kann man nicht anwenden.
Fall 2 – Zuweisen Objekt: Da in der Variable TheGreat.imTheGreatest ein instanziertes Objekt abgelegt ist, wird bei einer Zuweisung dementsprechend auch ein Objekt der neuen Variablen imTheGreatest abgelegt.
Fall 3 – Hier wird versucht, ein Objekt als Funktion auszuführen. Dies ist nicht möglich und es wird ein Fehler ausgelöst.

Fazit

Ich hoffe euch damit gezeigt zu haben, dass je nachdem wie man eine Variable aufruft, sich verschiedene Ergebnisse daraus ergeben. Dies muss man bei der Arbeit mit Javascript zuerst verstehen.

So, jetzt bin ich vorerst ausgeschossen. Bin ja eigentlich selber noch ziemlich neu in Javascript. Gibt es Themen, die euch noch interessieren würden? Ich bin gerade noch eine Javascript Fizzbuzz Kata am vorbereiten, welche ich euch bei Gelegenheit präsentieren kann.

6 Responses

  1. Hallo,
    vielen Dank für die gute Erklärung!

    Ich habe eine kleine Anmerkung:
    Ist das nicht beides das Gleiche nur das die erste Variable mit Object endet und die zweite mit Function?
    //type object – an empty object

    var imGreaterObject = new TheGreat.imGreater;
    console.log(imGreaterObject);

    //type function

    var imGreaterFunction = TheGreat.imGreater;
    console.log(imGreaterFunction);

    Viele Grüße
    Clemens

Leave a Reply

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