Class.create() OO mit prototype

[Schorsch]

Guten Abend

Ich versuche eine Klasse mit dem Javascript Framerwork zu erstellen.
Leider habe ich Wissenslücken.
Nun bin ich auf der Suche nach Hilfe.

Auf meiner Seite habe ich einen Link.
Er symbolisiert ein Objekt "Schuh".

<a href="#" onclick="zeige_groesse(this)"
   title="Schuhgrösse anzeigen"> Zeige ! </a>

Wenn ich auf den Schuh klicke, soll ein Objekt "Schuh" geboren werden. Dann will ich dessen Grösse wissen.
Dazu habe ich eine Schuh-Klasse gebaut:

var Schuh = Class.create();
Schuh.prototype = {
  initialize: function(element, opt){
    var defaults = {
      groesse : 40,
      farbe : "rot",
      zustand : "gut"
    }
}

Wie man sieht, sind darin bereits
ein paar default Werte gesetzt.

Klicke ich auf den Schuh-Link
wird ein neues Objekt Schuh erzeugt.
Diesem neuen Objekt will ich Werte mitgeben.
Das sollte so gehen:

function zeige_groesse(obj)
{
  opt = {
    groesse: 49
  }
  var Schuh = Class.create(obj, opt);
}

Nun wird (so stelle ich mir das vor) ein Schuh produziert.
Eine Riesenlatsche mit Grösse 49.

Dazu muss ich aber meine Schuh-Klasse etwas anpassen,
damit der Wert in "opt" drinn auch ausgelesen wird:

var Schuh = Class.create();
Schuh.prototype = {
  initialize: function(element, opt){
    var defaults = {
      groesse : 40,
      farbe : "rot",
      zustand : "gut"
    }

// Übergebene Grösse in "opt" abfangen
    // Wie muss ich das lösen?
    // (opt.groesse == 49) alert("Sehr gross!");

// defaults mit opt verschmelzen
    // wobei opt defaults überschreiben muss
    // Wie muss ich das lösen?
    // defaults = Object.extend(defaults, opt || {});
}

Am Schluss möchte ich sagen können:

alert(Schuh.groesse);

Und dann soll 49 ausgegeben werden.

Wer kann das Wirr-Warr in meinem Kopf lösen?

Schorsch

[molily]

Hallo,

var Schuh = Class.create();

Schuh.prototype = {
  initialize: function(element, opt){
    var defaults = {
      groesse : 40,
      farbe : "rot",
      zustand : "gut"
    }
}

  
Diese Defaults werden nirgendwo verfügbar sein, sie sind bloß lokale Variablen im Konstruktor. Das ist dir klar, oder? Man würde die Default-Werte von öffentlichen Eigenschaften wohl so setzen:  
  
~~~javascript
Schuh.prototype = {  
    initialize : function () {  
        ...  
    },  
    groesse : 40,  
    farbe : "rot",  
    zustand : "gut"  
};

Oder halt in initialize:

this.groesse = 40,  
this.farbe = "rot";  
this.zustand = "gut";

Klicke ich auf den Schuh-Link
wird ein neues Objekt Schuh erzeugt.
Diesem neuen Objekt will ich Werte mitgeben.
Das sollte so gehen:

function zeige_groesse(obj)

{
  opt = {
    groesse: 49
  }
  var Schuh = Class.create(obj, opt);

  
Da missverstehst du anscheinend etwas (oder ich kenne Prototype nicht gut genug).  
  
Class.create() definiert eine Klasse.  
Wenn du eine Instanz dieser Klasse erzeugen willst, machst du ganz normal  
var SchuhInstanz = new Schuh(obj, opt);  
  

>     ~~~javascript

// Übergebene Grösse in "opt" abfangen  

>     // Wie muss ich das lösen?  
>     // (opt.groesse == 49) alert("Sehr gross!");

Ja, im Prinzip.

opt = opt || {};  
if (opt.groesse == "irgendeine bestimmte Größe") {  
   // Mache irgendwas bestimmtes  
}

~~~javascript

// defaults mit opt verschmelzen

// wobei opt defaults überschreiben muss
    // Wie muss ich das lösen?
    // defaults = Object.extend(defaults, opt || {});

  
Ja, so könntest du alle Eigenschaften aus opt in defaults kopieren.  
  

> Am Schluss möchte ich sagen können:  
>   
>   alert(Schuh.groesse);  
  
\*Dafür\* musst du eben anders arbeiten. Dazu bringt dir dein defaults-Object alleine nichts, dafür brauchst du stinknormale öffentliche Eigenschaften. Deshalb würde ich dieses defaults-Object verwerfen:  
  
~~~javascript
var Schuh = Class.create();  
Schuh.prototype = {  
 initialize : function (opt) {  
  if (opt.groesse == "irgendeine bestimmte Größe") {  
   // Mache irgendwas bestimmtes  
  }  
  // Ansonsten kopiere einfach alle opt-Member in die Instanz (nicht der feine englische Stil, aber gut)  
  Object.extend(this, opt || {})  
 },  
 groesse : 40,  
 farbe : "rot",  
 zustand : "gut"  
};  
  
var opt = {  
 groesse: 49  
};  
var SchuhInstanz = new Schuh(opt);  
alert(SchuhInstanz.groesse);

Mathias

[Schorsch]

Salut Mathias

Wow, jetzt hab ich viel gelernt, vielen Dank für deine Mühe!

Diese Defaults werden nirgendwo verfügbar sein, sie sind bloß lokale Variablen im Konstruktor. Das ist dir klar, oder?

Ah ja. Habs mit "this.variable" ins Objekt rein getan.

Class.create() definiert eine Klasse.
Wenn du eine Instanz dieser Klasse erzeugen willst, machst du ganz normal
var SchuhInstanz = new Schuh(obj, opt);

Ach so. Also eine Klasse ist das Gerüst.
Sie muss immer angelegt werden.
Ist das der Fall, kann man Instanzen gründen.
Einzelne Objekte erzeugen, also verschiedene Schuhe gebären.

Jetzt siehts so aus:

var Schuh = Class.create();
Schuh.prototype = {
  initialize: function(element, opt){
    var defaults = {
   eins: "eins",
   groesse:44,
   farbe: "rosa"
 }
 var options = Object.extend(defaults, opt || {});
 this.options=options;
    }
}

Und folgendes gibt mir wie gewünscht
die Ausgabe "49":

opt = {
    groesse: 49
  }
  var SchuhInstanz = new Schuh(obj, opt);
  alert(SchuhInstanz.options.groesse);

Juhee!

Schorsch

[Schorsch]

Salut

Eine Frage hab ich noch.
Wenn man den Schuh nicht mehr braucht, also eine Instanz einer Klasse löschen will, geht das auf einen schlag?

Oder bin ich richtig in der Annahme, dass man das "manuell" machen muss?
Also eine methode extra dafür schreiben, welche die Event-Listener wieder rausbindet?

Und die Variablen? Muss man die auch noch speziell löschen?

Wie tötet man den Schuh, so dass er richtig tot ist?

Schorsch

[globe]

n'abend,

Salut

Eine Frage hab ich noch.
Wenn man den Schuh nicht mehr braucht, also eine Instanz einer Klasse löschen will, geht das auf einen schlag?

es gibt del
Soweit ich das aus Objektorientierten Sprachen kenne, bewirkt das in der Regel aber nur, dass diese Referenz auf die Objektinstanz gelöscht wird. Die Instanz als solche kann aber noch über andere Referenzen angesprochen werden. Existieren keine weiteren Referenzen auf das Objekt, kümmert sich die jweilige Javascript Implementation selbst ums Aufräumen (GarbageCollecting). (correct me if i'm wrong here!)

Oder bin ich richtig in der Annahme, dass man das "manuell" machen muss?
Also eine methode extra dafür schreiben, welche die Event-Listener wieder rausbindet?

du kannst den Eventhandler mit einem Dummy überschreiben, oder die dafür vorgesehene Funktion benutzen. (Die fällt mir aber gerade nicht ein und ich finde sie auch gerade nicht..)

Und die Variablen? Muss man die auch noch speziell löschen?
Wie tötet man den Schuh, so dass er richtig tot ist?

Sofern du nicht von riesigen Datenmengen sprichst, wirst du nicht dazu verdonnert irgendwas in Richtung aufräumen zu unternehmen. Der Browser regelt das schon.

weiterhin schönen abend...