Prototyping und Konstruktorparameter

litterauspirna · 02.02.2012, 20:01

Guten Abend allerseits,

ich versuche grad ein wenig meine ersten Gehversuche mit Javascript und OOP.

Hier mein Code.

Code:

function ShowHideElement(idEvent, idElem)
{
    this.idEvent = idEvent;
    this.idElem = idElem;
}

ShowHideElement.prototype.show = function(pEvent)
{
    document.getElementById(this.idElem).class = 'com_form_show';
}

ShowHideElement.prototype.event = function(pEvent)
{
    if(document.addEventListener) {
        document.getElementById(this.idEvent).addEventListener('click', this.show, false);
    } else {
        document.getElementById(this.idEvent).attachEvent('onclick', this.show);
    }
}

Aufrufen tu ich das ganze im windowonload so.

Code:

var comForm = new ShowHideElement('show_com_form', 'comment_form_container');
                comForm.show();
                comForm.event();

Die Ids der beiden Elemente existieren, ich vorm laden des Objektes getestet ob die IDs null sind, wäre das gewesen dann hätte kein Fehler durch den click Event auftreten können.
Aber ich bekomme bei Eventversuch die Fehlermeldung das die ID die in this.idElem steht null ist.

Was mache ich da falsch und muss ich ändern?

Vielen Dank für eure Hilfe Gruß Litter

Manko10 · 02.02.2012, 20:25

Was du beschreibst, hängt vermutlich mit Closures zusammen. Wenn du die Kontext-Referenz this in Event-Callbacks verwendet, verweist sie natürlich auf das Element, das das Event ausgelöst hat. Ein häufig missachteter Stolperstein.
Du musst den Kontext vorher in einer anderen Variablen speichern.

nikosch · 02.02.2012, 20:28

Zitat:

Was mache ich da falsch und muss ich ändern?

Hast gleich den besten Fall erwischt

Bei Events (timeout, click-Event etc) ändert sich die Referenz von this und this zeigt auf das Event-auslösende Objekt, z.B. window. Schau Dir mal das an: http://aktuell.de.selfhtml.org/artik...te-und-kontext

Btw. würde ich Dir raten, im Objekt nicht die ID, sondern eine Referenz auf den DOM Knoten zu speichern. Sonst must getById jedesmal neu den DOM Tree durchackern.

drsoong · 02.02.2012, 20:29

Ähm, musste das jetzt ziemlich oft lesen...Machst Du das, um generell Javascript der "alten Schule" zu lernen, bevor Du auf ein Framework, Library umsteigst? Der jQuery-Code hierzu wäre:

Code:

$("#show_com_form").click(function(){
$("#comment_form_container").show();
});

Sieht irgendwie übersichtlicher aus, oder?

nikosch · 02.02.2012, 20:31

Das ist schon sehr sinnvoll, drsoong. Mit JQuery alleine kommt man bei komplexeren Anwendungen nämlich nicht sehr weit. Jedenfalls nicht ohne Ressourcenverschwendung. Wie $("#comment_form_container") in Deinem Beispiel.

Manko10 · 02.02.2012, 20:36

Meiner Meinung nach sollte jeder zumindest anfänglich einmal Bare-Metal-JavaScript schreiben. Habe ich auch gemacht.
Wenn man später für den produktiven Einsatz Frameworks einsetzt ist das vollkommen in Ordnung. Aber genauso wie man PHP nicht anhand gigantischer Libraries lernt, sondern anhand simpler Hallo-Welt-Programme, sollte man auch erst einmal die Grundstruktur von JavaScript verstanden haben.

Im Übrigen ein kleiner Tipp: auf attachEvent() kannst du mittlerweile verzichten. Nutze einfach addEventListener(), das reicht. Dann wird das auch mit den Closures einfacher, weil du dann einfach eine anonyme Methode für das Event-Callback nutzen kannst ohne redundanten Code schreiben zu müssen:

***Code-Schnipsel weiter unten***

nikosch · 02.02.2012, 20:42

Manko, das wird so glaube ich nicht funktionieren. that dürfte im prototype-Setting nicht bekannt sein.

[edit] Vergiss es, hab was übersehen. Btw. falschrum: var this = that;

drsoong · 02.02.2012, 20:48

Zitat:

Jedenfalls nicht ohne Ressourcenverschwendung. Wie $("#comment_form_container") in Deinem Beispiel.

Weil...?

nikosch · 02.02.2012, 20:51

Selbe Antwort:

Zitat:

Btw. würde ich Dir raten, im Objekt nicht die ID, sondern eine Referenz auf den DOM Knoten zu speichern. Sonst must getById jedesmal neu den DOM Tree durchackern.

Manko10 · 02.02.2012, 20:53

Err, das sollte eigentlich auch andersherum gemeint sein. this kann man sowieso keinen Wert zuweisen. Auf den Prototypen-Kontext habe ich jetzt gar nicht geachtet und einfach nur das Codeschnipsel übernommen. Oje. So ist es gemeint:

Code:

function ShowHideElement(idEvent, idElem)
{
    this.idEvent = idEvent;
    this.idElem = idElem;
    
    this.show = function(pEvent)
    {
        var that = this;
        document.getElementById(this.idEvent).addEventListener('click', function() {
            document.getElementById(that.idElem).class = 'com_form_show';
        }, false);
    }
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Javascript array prototyping in namespace	rudygotya	JavaScript, Ajax und mehr	2	12.10.2009 14:45

02.02.2012, 20:01
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.170 PHP-Kenntnisse: Anfänger	Prototyping und Konstruktorparameter Guten Abend allerseits, ich versuche grad ein wenig meine ersten Gehversuche mit Javascript und OOP. Hier mein Code. Code: function ShowHideElement(idEvent, idElem) { this.idEvent = idEvent; this.idElem = idElem; } ShowHideElement.prototype.show = function(pEvent) { document.getElementById(this.idElem).class = 'com_form_show'; } ShowHideElement.prototype.event = function(pEvent) { if(document.addEventListener) { document.getElementById(this.idEvent).addEventListener('click', this.show, false); } else { document.getElementById(this.idEvent).attachEvent('onclick', this.show); } } Aufrufen tu ich das ganze im windowonload so. Code: var comForm = new ShowHideElement('show_com_form', 'comment_form_container'); comForm.show(); comForm.event(); Die Ids der beiden Elemente existieren, ich vorm laden des Objektes getestet ob die IDs null sind, wäre das gewesen dann hätte kein Fehler durch den click Event auftreten können. Aber ich bekomme bei Eventversuch die Fehlermeldung das die ID die in this.idElem steht null ist. Was mache ich da falsch und muss ich ändern? Vielen Dank für eure Hilfe Gruß Litter __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.02.2012, 20:25
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.695 PHP-Kenntnisse: Fortgeschritten	Was du beschreibst, hängt vermutlich mit Closures zusammen. Wenn du die Kontext-Referenz this in Event-Callbacks verwendet, verweist sie natürlich auf das Element, das das Event ausgelöst hat. Ein häufig missachteter Stolperstein. Du musst den Kontext vorher in einer anderen Variablen speichern. __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

02.02.2012, 20:29
drsoong Erfahrener Benutzer Registriert seit: 05.08.2008 Beiträge: 1.127	Ähm, musste das jetzt ziemlich oft lesen...Machst Du das, um generell Javascript der "alten Schule" zu lernen, bevor Du auf ein Framework, Library umsteigst? Der jQuery-Code hierzu wäre: Code: $("#show_com_form").click(function(){ $("#comment_form_container").show(); }); Sieht irgendwie übersichtlicher aus, oder? __________________ Es ist schon alles gesagt. Nur noch nicht von allen.

02.02.2012, 20:31
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.879 PHP-Kenntnisse: Fortgeschritten	Das ist schon sehr sinnvoll, drsoong. Mit JQuery alleine kommt man bei komplexeren Anwendungen nämlich nicht sehr weit. Jedenfalls nicht ohne Ressourcenverschwendung. Wie $("#comment_form_container") in Deinem Beispiel. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.02.2012, 20:36
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.695 PHP-Kenntnisse: Fortgeschritten	Meiner Meinung nach sollte jeder zumindest anfänglich einmal Bare-Metal-JavaScript schreiben. Habe ich auch gemacht. Wenn man später für den produktiven Einsatz Frameworks einsetzt ist das vollkommen in Ordnung. Aber genauso wie man PHP nicht anhand gigantischer Libraries lernt, sondern anhand simpler Hallo-Welt-Programme, sollte man auch erst einmal die Grundstruktur von JavaScript verstanden haben. Im Übrigen ein kleiner Tipp: auf attachEvent() kannst du mittlerweile verzichten. Nutze einfach addEventListener(), das reicht. Dann wird das auch mit den Closures einfacher, weil du dann einfach eine anonyme Methode für das Event-Callback nutzen kannst ohne redundanten Code schreiben zu müssen: *Code-Schnipsel weiter unten* __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”

02.02.2012, 20:42
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.879 PHP-Kenntnisse: Fortgeschritten	Manko, das wird so glaube ich nicht funktionieren. that dürfte im prototype-Setting nicht bekannt sein. [edit] Vergiss es, hab was übersehen. Btw. falschrum: var this = that; __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.02.2012, 20:53
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.695 PHP-Kenntnisse: Fortgeschritten	Err, das sollte eigentlich auch andersherum gemeint sein. this kann man sowieso keinen Wert zuweisen. Auf den Prototypen-Kontext habe ich jetzt gar nicht geachtet und einfach nur das Codeschnipsel übernommen. Oje. So ist es gemeint: Code: function ShowHideElement(idEvent, idElem) { this.idEvent = idEvent; this.idElem = idElem; this.show = function(pEvent) { var that = this; document.getElementById(this.idEvent).addEventListener('click', function() { document.getElementById(that.idElem).class = 'com_form_show'; }, false); } } __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”