"Dieses" Schlüsselwort in Ereignismethoden bei der Verwendung von JavaScript-Prototyp-Objekt

Question

Ich versuche auf die Member-Variablen einer Prototyp-Klasse in JavaScript in einem Event-Handler zuzugreifen - etwas, das ich normalerweise verwenden würde das "this" -Schlüsselwort für (oder "Das" [Kopie davon] im Falle von Ereignishandlern). Unnötig zu sagen, dass ich in Schwierigkeiten gerate.

Nehmen wir zum Beispiel das HTML-Snippet:

<a id="myLink" href="#">My Link</a> 

Und das JavaScript-Code:

function MyClass() 
{ 
    this.field = "value" 
    this.link = document.getElementById("myLink"); 
    this.link.onclick = this.EventMethod; 
} 

MyClass.prototype.NormalMethod = function() 
{ 
    alert(this.field); 
} 

MyClass.prototype.EventMethod = function(e) 
{ 
    alert(this.field); 
} 

ein MyClass-Objekt instanzieren und NormalMethod Aufruf funktioniert genau wie ich es (Alarm sagen "erwarten value "), aber das Klicken auf den Link führt zu einem undefinierten Wert, da das Schlüsselwort" this "jetzt auf das Ereignisziel verweist (das HTML-Element anchor()).

Ich bin neu in dem Prototyp-Stil JavaScript, aber in der Vergangenheit, mit Verschlüssen, ich habe einfach eine Kopie von „this“ im Konstruktor gemacht:

var that = this; 

Und dann kann ich Mitglieder zugreifen Variablen in Ereignismethoden über das Objekt "that". Das scheint nicht mit Prototyp-Code zu funktionieren. Gibt es einen anderen Weg, dies zu erreichen?

Danke.

Answer 1

Ihre "that=this" Idiom Schließung ist noch anwendbar:

function MyClass() 
{ 
    ... 

    var that = this; 
    this.link.onclick = function() { 
     return that.EventMethod.apply(that, arguments); 

     // that.EventMethod() works too here, however 
     // the above ensures that the function closure 
     // operates exactly as EventMethod itself does. 

    }; 
} 

Answer 2

Sie sollten versuchen,

this.link.onclick = this.EventMethod.bind(this); 

Answer 3

Sie benötigen:

this.link.onclick = this.EventMethod.bind(this); 

... 'bind' Teil von Prototype ist, und gibt eine Funktion zurück, die Ihre Methode aufruft, wenn 'this' richtig gesetzt ist.

Answer 4

Wie oben erwähnt, ist die Verwendung von bind, das ein Teil der Prototype-Bibliothek ist, ein sauberer Weg, um dieses Problem zu lösen. Diese Frage ist ein Duplikat einer anderen SO Frage, die hier bei der Umsetzung der Methode bind beantwortet wird, ohne die gesamte Prototyp Bibliothek einschließlich:

https://stackoverflow.com/a/2025839/1180286