Object Oriented Programming in Javascript

[Hähnchen]

Hallo an alle!!!

Ich habe ein Problem mit Javascript und zwar, wenn ich es mit der objektorientierten Variante versuche.

Beispiel:(in Rating.js)

function Rating  
{  
  this.hoverOn = true;  
  
//javascript mit jquery  
(document).ready(function{  
  
  $(".rating li").mouseover(function(){  
  
    Rating.prototype.starsMouseover(this);  
  });  
  
});  
  
}  
  
  
Rating.prototype.starsMouseover = function (obj)  
{  
 var liId = obj.id;  
  
 if(this.hoverOn)  
 {  
          //dieser Block wird nicht ausgeführt, da hoverOn undefined sei.  
          ......  
        }  
}  
  
Rating.prototype.showRating = function (rating)  
{  
 ...  
  
 this.hoverOn = false;  
  
}

Mein Problem dabei ist, dass ich laut eines Anwendungsbeispiels(http://mckoss.com/jscript/object.htm) mit this.hoverOn auf mein im constructor definiertes Attribut zugreifen kann innerhalb der Methode Rating.prototype.starsMouseover.
Das funktioniert ja auch, allerdings belegt er mir hoverOn nicht mit true vor(Testausgabe mit alert ergibt undefined), wie ich es ganz oben gemacht habe?
Wieso macht er das nicht?In einer der Methode Rating.prototype.showRating kann ich nämlich mit this.hover = false; das Attribut auf false setzen und er tut dies auch.

Falls mir jemand helfen kann, bitte ich ihn mir eine Antwort zu schreiben.
Und schon mal vielen danke im Vorraus.

[Struppi]

Ich habe ein Problem mit Javascript und zwar, wenn ich es mit der objektorientierten Variante versuche.

nur eine kurze Antwort.

Rating.prototype.starsMouseover(this);

wieso rufst du die prototype Funktion auf?
Das ist falsch, du musst die Funktion einer konkreten Instanz aufrufen.

Struppi.

[Hähnchen]

Rating.prototype.starsMouseover(this);

wieso rufst du die prototype Funktion auf?

Ich rufe die Protoype Funktion auf, weil ich sonst nicht auf die Methode innerhalb des Konstruktors zugreifen kann, da ich sie in eine extra Funktion ausgelagert habe.
In diesem Fall würde es keinen Sinn machen die Funktion auf eine konkrete Instanz anzuwenden, weil ich sie innerhalb des Objektes automatisch bei mousover brauche.
Weißt du dann zufällig wie das anders geht?

[Struppi]

Rating.prototype.starsMouseover(this);

wieso rufst du die prototype Funktion auf?

Ich rufe die Protoype Funktion auf, weil ich sonst nicht auf die Methode innerhalb des Konstruktors zugreifen kann, da ich sie in eine extra Funktion ausgelagert habe.

Das prototype Objekt ist, wie der Name schon sagt, der Prototype für alle Objekte die du davon erzeugst, d.h. es macht keinen Sinn diese Funktion so aufzurufen.

In diesem Fall würde es keinen Sinn machen die Funktion auf eine konkrete Instanz anzuwenden, weil ich sie innerhalb des Objektes automatisch bei mousover brauche.
Weißt du dann zufällig wie das anders geht?

Ich kenn mich jquery nicht aus, aber in etwa so:

var self = this;  
$(".rating li").mouseover(function(){  
    self.starsMouseover(this);  
  });  

Struppi.

[Joachim]

Hi,

var self = this;

self - da synonym für window und reserviert - lieber nicht...

Gruesse, Joachim

[ChrisB]

Hi,

var self = this;
self - da synonym für window

Wer window braucht, kann also auch window nehmen

und reserviert

Na ja, hoechstens "vorbelegt".
Und hier lediglich durch eine private Eigenschaft ueberschrieben.

MfG ChrisB

[Hähnchen]

Hallo an alle,

also mit self = this oder bzw. allgemeint mit this auf die Methode zuzugreifen funktioniert nicht, da er es nicht als definierte Funktion sieht.

Ich kann nur mit einem Objekt zugreifen, dass ich außerhalb der Datei in einem Javascript-Tag instanziere und dann denselben Namen für die Methodenaufrufe benutze.

Beispiel:

function Foo  
{  
   this.x = 1;  
  
   //durch dieses ready-event wird gewartet bis der dom ready ist  
   $(docuemnt).ready(function()  
     {  
        //alle li-tags der ul-elemente mit Klassenname rating werden  
        //zurückgeliefert und durch click-event soz. mit onclickattribut  
        //versehen.  
        (".rating li").click(function()  
         {  
            /*wird public methode blabla aufgerufen von foo über objfoo,  
              welches weiter unten außerhalb erzeugt wird.  
              this wird übergeben, damit man später in Methode weiß  
             auf welches li tag geklickt wurde.*/  
  
            objfoo.blabla(this);  
         }  
     }  
  
   this.blabla = function ()  
   {  
     //wird id des entsprechenden li-tags abgefragt, auf das geklickt wurde  
     var idLi = this.id;  
     if(this.x)  
     //die macht irgendwas  
   }  
  
  
}

Diese ganze Definition habe ich in eine js Datei ausgelagert.

In meinem Html-code erzeuge ich dann in einem javascript-tag ein objekt:

<script ...>  
   objfoo = new Foo;  
</script>

Dieses objekt "objfoo" habe ich oben benutzt um auf die Methode zuzugreifen.
Problem:
Alle Objekte die ich außerhalb dieser Datei in einem Script-Tag erzeuge, wollen dann auf ein objekt mit dem Namen objfoo zugreifen, was ja eventuell nicht immer der Fall wäre, da ich ja nicht jedes objekt objfoo nennen kann.
Z.B. ein andres Objekt mit dem Namen objfoo2 hätte dann ein Problem, weil es ja nach objfoo intern gesucht würde.

Mich würde also interessieren wie ich auf die Methode intern zugreifen kann, sodass diese auf das Objekt angewendet wird das ich gerade erzeugt habe ohne dass ich speziell einen Objektnamen angeben muss.
D.h. irgendein Operator, der meine Methode auf das aktuell erzeugte Objekt verweist.

Ich wäre sehr dankbar, wenn mir jemand weiterhelfen könnte.
Sonst wäre, dass hier eine Sackgasse für mich und ich müsste es anders umschreiben.

Hähnchen

[Joachim]

Hi,

also mit self = this oder bzw. allgemeint mit this auf die Methode zuzugreifen funktioniert nicht, da er es nicht als definierte Funktion sieht.

ich gestehe, dass es mir schwer fällt, zu verstehen, was Du eigentlich machst. Lies Dir doch als erstes mal etwas zur organisation von Javascripten durch.

Ich kann nur mit einem Objekt zugreifen, dass ich außerhalb der Datei in einem Javascript-Tag instanziere und dann denselben Namen für die Methodenaufrufe benutze.

ahem... man erzeugt eine Objekt-Instanz, die einige Methoden besitzt... so sollte es doch sein...?

[code]function Foo

function Foo()
           ^^^^^

this.x = 1;

$(docuemnt).ready(function()

was tut document.ready innerhalb Deiner Klasse? Steck die Instanziierung des Objektes und die Methodenaufrufe hinein, die dürfen erst erfolgen, wenn alles geladen ist -  und document richtig schreiben...

wie schon vorgeschlagen: definiere nun:
   var obj = this;
Du erzeugst eine Variable, in der Dein Objekt gespeichert ist.

(".rating li").click(function()

Das fehlende "$" ist ein Tippfehler?

objfoo.blabla(this);

und nutzt jetzt innerhalb der anonymen Funktion den "closure" Mechanismus - nach der Lektüre des Linkes weisst Du ja was closures sind...
               alert(obj.x)

Sonst wäre, dass hier eine Sackgasse für mich und ich müsste es anders umschreiben.

ich denke, Du wirst einiges noch öfter umschreiben müssen. Freu Dich auf den Aha Effekt ;-)

Gruesse, Joachim

[Hähnchen]

Hi an alle,

und danke für eure zahlreichen Antworten...

Ich hab es dann wie Joachim mir vorgeschlagen hat, bzw. was ich in dem Link (Organisation von Javascripten) gelesen habe, mit einem Closure gelöst.
Hatte den Artikel aber schon auch schon gefunden und dann nicht mehr ins Forum geschaut.
Trotzdem vielen Dank für den Tip.

Ich weiß nicht ob es alle andern auch so gemeint hatten.
Ich hatte nämlich das var obj = this; immer in das ready-Event gepackt und nicht oben in die Konstruktor-Funktion.
Blöder Fehler :-)....

Lg Hähnchen

[molily]

Hallo,

also mit self = this oder bzw. allgemeint mit this auf die Methode zuzugreifen funktioniert nicht, da er es nicht als definierte Funktion sieht.

Doch das funktioniert. Wenn nicht, machst du etwas falsch und wir sollten gemeinsam untersuchen, was du falsch machst.

Problem:
Alle Objekte die ich außerhalb dieser Datei in einem Script-Tag erzeuge, wollen dann auf ein objekt mit dem Namen objfoo zugreifen, was ja eventuell nicht immer der Fall wäre, da ich ja nicht jedes objekt objfoo nennen kann.

Liebes Hähnchen, wir haben dir in vollem Wissen darüber nicht diese Lösung, sondern eine andere empfohlen, die dieses Problem umgeht. Sei doch so lieb und lese dir die Postings hier im Forum und die verlinkten Dokumentationen durch, versuche sie zu verstehen und probiere diese Lösungen aus.

Mich würde also interessieren wie ich auf die Methode intern zugreifen kann, sodass diese auf das Objekt angewendet wird das ich gerade erzeugt habe ohne dass ich speziell einen Objektnamen angeben muss.
D.h. irgendein Operator, der meine Methode auf das aktuell erzeugte Objekt verweist.

Dein Problem ist uns klar. Die Lösung(en) wurden schon genannt. Bitte setze dich mit diesen auseinander. Dann kannst du gerne nachfragen, gerne können wir dir bei der Umsetzung weiterhelfen. Es macht aber keinen Sinn, dass du einfach deine Frage wiederholst, ohne auf die bisherigen Antworten einzugehen.

Mathias

[Struppi]

var self = this;
self - da synonym für window und reserviert - lieber nicht...

dann halt nicht. Aber das self hat nichts mit window.self zu tun.

Struppi.

[Joachim]

Hi,

dann halt nicht. Aber das self hat nichts mit window.self zu tun.

natürlich nicht. Aber imho führen solche Namensverwandschaften leicht zu Problemen, und seien es nur irreführende Fehlermeldung - vor allem, wenn Unerfahrene damit arbeiten. In welchem Scope die dann landen weiss man ja nie...

Gruesse, Joachim

[Struppi]

dann halt nicht. Aber das self hat nichts mit window.self zu tun.
natürlich nicht. Aber imho führen solche Namensverwandschaften leicht zu Problemen, und seien es nur irreführende Fehlermeldung - vor allem, wenn Unerfahrene damit arbeiten. In welchem Scope die dann landen weiss man ja nie...

Wie du die lokale Kopie des Objektes letztendlich benennst, bleibt natürlich dir überlassen.

Struppi.

[molily]

Wie du die lokale Kopie des Objektes letztendlich benennst, bleibt natürlich dir überlassen.

»ratingInstance« wäre z.B. ganz sprechend.

Mathias

[Timo "God's Boss" Reitz]

dann halt nicht. Aber das self hat nichts mit window.self zu tun.
natürlich nicht. Aber imho führen solche Namensverwandschaften leicht zu Problemen, und seien es nur irreführende Fehlermeldung - vor allem, wenn Unerfahrene damit arbeiten. In welchem Scope die dann landen weiss man ja nie...

Dann sind sie gezwungen, sich noch weiter mit der Materie zu beschäftigen. Also eigentlich eine gute Sache. :-)

[nam]

Hi

Das funktioniert ja auch, allerdings belegt er mir hoverOn nicht mit true vor(Testausgabe mit alert ergibt undefined), wie ich es ganz oben gemacht habe?
Wieso macht er das nicht?In einer der Methode Rating.prototype.showRating kann ich nämlich mit this.hover = false; das Attribut auf false setzen und er tut dies auch.

Wenn ich das richtig verstanden habe, hast du hoverOn im Objekt Rating definiert. Später versuchst du auf diese Methode im Prototype-Objekt des Objekts Rating Rating.prototype zurückzugreifen. So rum funktioniert die Prototype-Chain nicht.

Gruss,
Mathias

[molily]

Mein Problem dabei ist, dass ich laut eines Anwendungsbeispiels(http://mckoss.com/jscript/object.htm) mit this.hoverOn auf mein im constructor definiertes Attribut zugreifen kann innerhalb der Methode Rating.prototype.starsMouseover.

Lies dir mal diesen Artikel durch:
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/
Speziell ab diesem Absatz:
http://aktuell.de.selfhtml.org/artikel/javascript/organisation/#object-methoden-und-kontext

Dort wird die dir von Struppi empfohlene Methode erklärt sowie andere.

Wieso macht er das nicht?

Der Begriff dafür ist: Kontext!
Eine Methode wird immer im Kontext eines Objektes ausgeführt.

Die Bedeutung von this ist folgendermaßen:
1. Es gibt ein Objekt und daran hängt ein Funktionsobjekt als Unterobjekt bzw. Methode. Die Funktion ist also über objekt.methode ansprechbar.
2. Wenn diese Funktion nun folgendermaßen aufgerufen wird: objekt.methode(), dann und nur dann verweist this in der Funktion auf »objekt«. Andernfalls, wenn die Funktion nicht auf diese Weise aufgerufen wurde, verweist this als Fallback auf das globale Objekt window. Nichts anderes gibt this wieder als diese Unterobjekt-Beziehung beim Aufruf. (Trickserei mit call() und apply() mal außen vor.)

In deinem Fall liegt noch ein Sonderfall vor: Der Mouseover-Event-Handler wird im Kontext des HTML-Elements ausgeführt, bei dem der Event-Handler registriert wurde. this zeigt in dieser Funktion also auf dieses Element (siehe auch).

Mathias