Notationen und Kürzel in JavaScript
August 8th, 2008JavaScript ist seit dem “Erscheinen” von AJAX ist der Bekanntheitsgrad von JavaScript unaufhaltsam gestiegen, mittlerweile ist es von modernen Webseiten schon nicht mehr wegzudenken. Spätestens nach dem Erscheinen von diversen JavaScript-Frameworks erhielt auch die Verwendung von weniger bekannteren Syntaxmöglichkeiten in JavaScript einen Aufschwung. Trotzdem sind viele dieser Syntaxmöglichkeiten in JavaScript nicht sehr weit verbreitet.
Function Expressions
Function Expressions sind momentan schon sehr weit verbreitet und in jedem JS-Framework vertreten. Function Expressions werden wie Funktionen deklariert, dies führt oft zu Missverständnissen beim Debuggen und Einlesen. Der Vorteil von Function Expressions liegt klar auf der Hand: Es kann, wann immer Expressions gültig verwendet werden können, eine Function Expression verwendet werden. Dies kann z.B als Rückgabewert oder Definition erfolgen.
Folgender Code zeigt eine normale Funktion und Function Expression als Rückgabe. An diesem Beispiel erkennt man gut den Vorteil von Function Expressions, jedoch auch wie verwirrend die Notation teilweise ist.
// normale Funktion
function checkDocument() {
if(document)
alert("Das Document-Objekt ist verfügbar!");
}
window.onload = checkDocument();// Function Expression
window.onload = function() {
if(document)
alert("Das Document-Objekt ist verfügbar!");
}
Object Literal
Sehr oft werden Object Literals in den aktuellen JavaScript-Frameworks eingesetzt und zwar als Klassennotation. Diese sind seit JSON “entdeckt” wurde gerne gesehen und vorallem auch einfach einzusetzen. Klassen die mittels Object Literals definiert wurden, würden in anderen Programmiersprachen wie z.B PHP wahrscheinlich Helper-Klassen oder sogenannte statische Klassen genannt werden, aus dem Grund, dass bei diesen Klassen das Schlüsselwort “new” für eine neue Objektinstanz nicht verwendbar ist.
Folgendes Beispiel zeigt eine Sammlung von Daten, im Grunde nur Strings, in einem Object Literal. Um genau zu werden ist es nichts anderes als ein JSON-String. Man beachte die 2 verschiedenen Zugriffsmöglichkeiten auf die Eigenschaften bzw. Felder.
var MyCar = {
'type' : 'Audi A3',
'color' : 'Metallic Blue',
'PS' : '124'
}// Möglichkeit mittels "."-Operator auf das Feld "type" zuzugreifen
alert(MyCar.type);
// Möglichkeit mittels Zugriff wie auf ein Array (also mit eckigen Klammern)
alert(MyCar['color']);
Wie man sieht hat man mit Object Literals also ein weiteres Speichermedium, dass vorallem einfacher und stärker handzuhaben ist als Arrays.
Object Literals werden jedoch auch für die oben angesprochenen Klassennotationen verwendet, vorallem in der Kombination mit den Function Expressions werden sie zu einem mächtigen Werkzeug.
Folgende Klasse zeigt ein einfaches Beispiel dieser Notation.
var MyClass = {
'color' : 'white',
'alert' : function() {
alert(MyClass.color);
}
}
MyClass.alert();
Konditional Operator
Ein recht bekannter Operator, der in fast allen gängigen Programmiersprachen zum Einsatz kommt bzw. kommen kann, ist auch in JavaScript vertreten. Um unübersichtliche If-Else-Verzweigungen für eine einzelne Variablenzuweisung zu verhindern, wurde der Konditional Operator ins Leben geführt.
Folgendes Beispiel zeigt die Anwendung des Konditional Operators in der Gegenüberstellung zu einer If-Else-Verzweigung.
// If-Else
if(document.getElementById('content'))
var test = true;
else
var test = false;// Konditional Operator
var test = document.getElementById('content') ? 'true' : 'false';
// test ist true
Or-Operator
Der logische Or-Operator in JavaScript (||) hat die besondere Fähigkeit das er bei Vergleichen von 2 Werten keinen boolschen Wert (also True oder False) zurückgibt, sondern das Element welches den Wert “true” besitzt.
Somit ergibt sich bei Vergleichen die Möglichkeit, einen Standardwert zu definieren. Auch in diesem Beispiel wird wieder der “normale” Weg und der Weg über den Or-Operator gegenübergestellt.
// Herkömmlicher Weg
var test = document.getElementById('test');
if(!test)
test = document.getElementById('not_test');// Weg über Or-Operator
var test = document.getElementById('test') || document.getElementById('not_test');
) und einmal die “nicht-privilegierte öffentliche Methode” “getCarInfosOutside”. Die Methode in der Klasse hat natürlich vollen Zugriff auf alles was drinnen so abläuft, d.h ich kann auf alle Eigenschaftn und Methoden zugreifen. Die Methode außerhalb der Klasse kann lediglich auf öffentliche Eigenschaften und Methoden zugreifen.