« »

JavaScript Klassen mit Object-Literal Syntax erstellen

29. März 2009 Roland

Dieser Artikel ist Teil 21 von 26 der Artikelserie Programmieren

Programmieren

JavaScript tut sich meiner Meinung nach ein wenig schwer mit der schönen Darstellung von Klassen.
Zum Glück gibt es da die sogenannten Object-Literale

Object-Literale für die Kurzschreibweise

Um die Object-Literale Darstellung näher zu bringen, habe ich hier ein Beispiel eines Personenmodells dargestellt.
Das Modell nimmt den Namen und den Vornamen einer Person entgegen und liefert, falls ein Name / Vorname vorhanden ist, diesen mit einem Postfix “_vomModel” zurück.

  1. /**
  2.  * Das Modell, welches eine Person verwaltet.
  3.  */
  4. function Person(){
  5.     this.name = "";
  6.     this.firstName = "";
  7. }
  8.  
  9. Person.prototype={
  10.     setName:function(name){
  11.         this.name = name;
  12.     },
  13.  
  14.     getName:function(){
  15.         if(this.name != ""){
  16.             return this.name+"_vomModel";
  17.         }
  18.         return "";
  19.     },  
  20.  
  21.     setFirstname:function(firstName){
  22.         this.firstName = firstName;
  23.     },
  24.  
  25.     getFirstname:function(){
  26.         if(this.firstName != ""){
  27.             return this.firstName+"_vomModel";
  28.         }
  29.         return "";
  30.     }  
  31. }

Ich habe absichtlich auf Kommentare verzichtet um auf die Eigenschaften dieser Darstellung aufmerksam machen zu können.
Du siehst zuerst den Konstruktor. (funktion Person(){})
Der ist wie gehabt aufgebaut.
Danach siehst du die Deklaration des Prototypen:

  1. Person.prototype={
  2. …
  3. }

Innerhalb der Deklaration des Prototypen habe ich nun alle Methoden mit der Schreibweise methodenname:function(){} erstellt.
Die einzelnen Methoden werden durch Kommas separiert.
Da JavaScript intern alles mit Arrays darstellt, handelt es sich hierbei um ein Funktionenarray.

Mit dieser Klasse kannst du wie gehabt arbeiten. Du kannst dir mit

  1. var person = new Person();
  2. person.setName("horscht");
  3. alert(person.getName());
  4. }

eine Person anlegen, die Methoden set- und get aufrufen und damit rumspielen.

Fazit

Ich finde diese Darstellungsform sehr angenehm. Die Methoden haben eine angenehm kurze Deklaration und das Ganze ist relativ übersichtlich.

Merken und weiterempfehlen Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Technorati
  • Wikio DE
  • Webnews
  • MisterWong
  • Y!GG
  • Digg
  • del.icio.us

Der Beitrag wurde am Sonntag, den 29. März 2009 um 13:28 Uhr veröffentlicht und wurde unter Programmieren abgelegt.
Kurzlink: http://www.baldenhofer.eu/blog/?p=805

Dir gefiel der Artikel? Dann abonniere doch den RSS Feedrss

Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Eine Reaktion zu “JavaScript Klassen mit Object-Literal Syntax erstellen”

  1. Objekte in JavaScript mit JSON deklarieren  Guggat emol Blog sagt:
    26. April 2009 um 21:45

    [...] Einbinden der JavaScript Timer Klasse in eine Webseite AJAX Kommunikation ohne Fassaden Pattern JavaScript Klassen mit Object-Literal Syntax erstellen Knackpunkte bei der Klasse AsyncCommunication Speicherverbrauch in AJAX Applikationen Auch bei [...]

Schreibe mir

zum Seitenanfang