Klassen, Objekte, Eigenschaften und Methoden
Auf dieser Seite stelle ich 4 verschiedene Möglichkeiten vor ein Javascript Objekt zu erzeugen. Javascript ist eine prototypen basierte Sprache, später mehr dazu. Man kann Objekte erzeugen und diesen Objekten Attribute (Eigenschaften) und Methoden (Funktionen) zuweisen.
new Object()
var Auto = new Object();
Auto.tueren = 5;
Auto.raeder = 4;
Auto.extras = ["Autoradio", "Navi", "Spoiler"];
Auto.aboutExtras = function(){
console.log("Extras: "+ this.extras);
}
Auto.aboutExtras();
Im Beispiel wird mit dem Schlüsselwort new ein neues Objekt Auto erzeugt. Dieses bekommt die Attribute: tueren, raeder, geschwindigkeit und die Methode aboutExtras zugewiesen. In der letzten Zeile wird die Methode aboutExtras aufgerufen.
this
Beachte das Schlüsselwort this in der Funktion. Es bezieht sich auf das Objekt. Ohne this wäre extras undefiniert.
Objekte kopieren
Auf diese Weise kann man zwar keine weitere Instanz der Klasse Auto erzeugen, man könnte jedoch ein Duplikat des Objekts erzeugen:
var Klapperkiste = Object.create(Auto);
Das Objekt Klapperkiste besässe die gleichen Eigenschaften und Methoden wie Auto. Diesen Attributen und Methoden könnte man andere Werte zuweisen. Außerdem könnte man weitere Attribute und Methoden anhängen.
Klapperkiste.raeder = 3;
Klapperkiste.radio = true;
JSON
Man kann Objekte auch im JSON Format darstellen.
var Auto = {
raeder : 4,
tueren : 5,
besitzer :
{
vorname : "Albert",
nachname : "Hirsch"
} ,
extras : ["Autoradio", "Navi", "Spoiler"],
aboutExtras: function(){console.log("Extras "+ this.extras);}
};
Auto.aboutExtras();
In JSON erzeugt man ein Objekt mittels geschweifter Klammern. Darin befinden sich die Attribute mit ihren Werten durch Kommata getrennt. Im folgenden Beispiel ist das Attribut Besitzer ein weiteres Objekt. Das Attribut extras ist ein Array. Beachte auch hier die Schreibweise.
Geschweifte Klammern umschließen nicht nur Funktionsdefinitonen und if Anweisungen, sondern können auch Javascript Objekte umschließen. Objekte ermöglichen es uns, etwas auf unterschiedliche Art zu beschreiben. Hier sind es die Anzahl der Räder und Türen, die Extras und der Besitzer des Autos. Diese Informationen nennt man Attribute. Das kann vieles sein z.B.: Strings, Zahlen, boolsche Werte oder sogar Funktionen. Funktionen werden in Objekten Methoden genannt.
JSON bedeutet Javascript Objekt Notation und wird dazu benötigt um über verschiedene Programmiersprachen Objekte / Daten / Eigenschaften auszutauschen. So wird JSON beispielsweise auch oft für eine Client Server Kommunikation verwendet (z.B.: Ajax). Im Gegensatz zu XML ist die JSON Datenstruktur einfacher und kürzer.
Konstruktorfunktion
Jede Funktion ist eine Konstruktorfunktion, sofern man sie als solche verwendet. Über den Aufruf mit dem Schlüsselwort new wird aus einer Funktion eine Konstruktorfunktion und es wird ein neue Objektinstanz zurückgegeben.
Konstruktorfunktionen gibt es auch in anderen Programmiersprachen. Es ist eine Funktion die beim Erzeugen einer neuen Instanz aufgerufen wird. Also quasi eine Startfunktion. In Javascript kann jede Funktion als Konstruktorfunktion dienen.
var Auto = function(tueren, raeder)
{
this.tueren = tueren;
this.raeder = raeder;
this.extras = ["Autoradio", "Navi", "Spoiler"];
this.aboutExtras = function(){ console.log("Extras "+ this.extras);}
}
var opel = new Auto(2,4);
opel.aboutExtras();
var benz = new Auto(4,4);
In diesem Beispiel wird eine Klasse Auto mittels function erzeugt. Eine Funktion kann also auch dazu dienen, ein Objekt zu erzeugen. Es gab in Javascript früher keinen Begriff class um eine Klasse zuerzeugen. Um das Erzeugen einer Klasse mittels function von einer normalen Funktion zu unterscheiden. Programmierer schreiben den Namen der Funktion groß, um deutlich zu machen, dass es sich um einen Klassennamen handelt. Das ist eine sinnvolle Konvention. Die Funktion ist außerdem die Konstruktorfunktion. Eine Konstruktorfunktion wird beim Initiieren der Instanz ausgeführt wird. Es ist also eine Startfunktion.
Desweiteren gibt es hier noch einen Unterschied zu den oben vorgestellten Möglichkeiten: Hier wurden die Werte der Attribute mittels Argumenten (Parameter) der der Konstruktorfunktion übergeben.
Auto function (tueren){.....
this.tueren = tueren;
Beachte dass tueren hinter dem Gleichheitszeichen sich auf tueren in den Klammern bezieht. ( siehe Funktionen und Parameter)
new
Eine Funktion, die als Objekt dient, wird mit Schlüsselwort new aufgerufen. Dadurch werden neue Objekte erzeugt. Sie haben zwar die gleichen Attribute und Methoden, aber diese können mit unterschiedlichen Werten versehen werden, da man sie in der Konstruktorfunktion als Argument übergeben kann.
typeof, instanceOf
Auf der Seite Datentypen, bin ich auf die Opertoren typeof und instanceOf eingegangen.
Wendet man diese Operatoren auf das obige Beispiel an, erhält man folgendes:
console.log(typeof opel) // Object console.log(ford instanceOf Auto) // true
class
Mit ECMAScript6 kann man auch über das Schlüsselwort class eine Klasse erzeugen.
'use strict';
class Hut {
constructor(ecken, farbe){
this.ecken = ecken;
this.farbe = farbe;
}
singMeinLied(){console.log("Mein " + this.farbe + "er Hut der hat " + this.ecken + " Ecken.")};
}
let zylinder = new Hut(3, "rot");
zylinder.singMeinLied();
Das folgende Thema eval() kann man getrost erstmal überschlagen.
eval()
Mittels dem Javascript Befehl eval() kann man Strings zu einem Objekt auflösen. Strings lassen sich verschicken und können dann empfangen und mittels eval() zu einem Objekt zusammengesetzt werden.
var auto = "({tueren:4, raeder:3})";
So eine Zeichenkette kann man an den Server schicken, der es dann verarbeitet. Oder man bekommt so eine Zeichenkette vom Server und kann diese dann mittesl eval() in ein Objekt umwandeln.
fahrzeug = eval(auto);
console.log(fahrzeug);
