[oop] this bei Funktionsaufruf durch Eventhandler

[Struppi]

Achtung: Dieser Beispielcode läuft nur unter Mozilla.

1. Ich klicke den Link. Richtigerweise zeigt die Funktion e als undefiniert an und gibt mir in this.foo den Wert "bar" zurück.

Du kannst im HTML Tag den event auch übergeben.
<a href="#" onclick="myTest.showFoo(event);">Show Foo</a>
(nur als Info)

2. Ich mache einen Rechtsclick. Der Eventhandler ruft die Funktion auf und zeigt e richtig als [Object Event] an. In this allerdings finde ich nicht die erwartete Instanz, sondern ein [Object HTMLDocument], dessen nodeName #document ist. this.foo ist daraus folgend undefiniert.

this im Event ist die Referenz auf das Objekt.

[Object].event()
{
   this == [Object]
}

Frage 1: Woher kommt diese Referenz in this auf ein HTMLDocument-Object? Bug oder Feature?

s.o.

Frage 2: Wenn dieser Weg nicht gangbar ist, wie kann ich auf die Instanz und damit zum Beispiel auf die Eigenschaft foo zurückgreifen?

Wie Siechfried schon sagte, mit einer anonymen Funktion:

myTest = new test();
document.oncontextmenu = function(e)
{
myTest.showFoo(e);
}

Problematisch wird es wenn du im Objekt den Eventhandler zufügen willst:

<a href="#" id="x">Show Foo</a>

<script>
function test(id)
{
    this.obj = document.getElementById(id);
    if(!this.obj) return;
    this.foo = "bar";
    this.obj.onclick = function (e)
    {
          alert("Event:" + e + "\nthis:" + this + "\nFoo: " + this.foo);
          return false;
    }
}

myTest = new test('x');

</script>

Hier hast du erstmal keinen Zugriff auf das äußere this und musst dem Objekt das aktuelle Objekt übergeben (es gibt sicher auch andere Lösungen, mir ist aber noch keine bessere eingefallen):

...
    this.foo = "bar";
    this.obj.parent = this;
    this.obj.onclick = function (e)
    {
          alert("Event:" + e + "\nthis:" + this + "\nFoo: " + this.parent.foo);
          return false;
    }

HTH
Struppi.