Wie kann ich einem Ereignis-Listener in der Initialisierungsfunktion eine Prototyp-Funktion hinzufügen?

Question

Ich bin nicht genau sicher, wie meine Frage Begriff, mir ein Beispiel so lassen präsentieren:

function foo() { 
    window.addEventListener("keydown", function(event) { 
     bar(event.keycode); 
} 

foo.prototype.bar = function (keycode) { 
//code 
} 

Ich habe versucht this.bar() verwenden, aber das ergibt sich die window als this in Verwendung. Gibt es eine Möglichkeit, dies zu tun, oder muss ich eine andere Initialisierungsmethode manuell aufrufen?

Answer 1

Binden Sie this.bar an this bevor Sie es übergeben.

function foo() { 
    window.addEventListener("keydown", this.bar.bind(this), false); 
} 


foo.prototype.bar = function (event) { 
    console.log(event.keyCode); 
} 

Demo http://jsfiddle.net/2tee4/

Answer 2

Eine alternative Lösung, wenn Sie nicht Function.prototype.bind verfügbar * haben, und Sie sind nicht bereit, zusätzliche Funktionen zu Function.prototype hinzuzufügen wäre, um den Anruf zu this.bar zu schließen über:

function foo() { 
    var self; 
    self = this; 
    window.addEventListener('keydown', function (e) { 
     self.bar(e); 
    }, false); 
} 
foo.prototype.bar = function (e) { 
    console.log(e.keyCode); 
} 

_{* obwohl die Nutzung von addEventListener ohne attachEvent führt mich zu glauben, dass Function.prototype.bind ein Zube wäre pTable Wahl}

---

Zusätzlich Bibliotheken wie jQuery können ihre eigene Form der bind umfassen, ist jQuery jQuery.proxy.

Answer 3

Wenn Ihre Absicht, einen neuen Hörer für jeden foo erstellt hinzuzufügen ist, ist eine weitere Option foo implementieren die Eventlistener Schnittstelle zu machen, und einfach this anstelle des Handler übergeben.

function Foo() { 
    window.addEventListener("keydown", this, false); 
} 

Foo.prototype.bar = "foobar"; 

Foo.prototype.handleEvent = function(e) { 
    console.log(e.type); // "mousedown" (for example) 
    console.log(this.bar); // "foobar" 
}; 

new Foo(); 

Beachten Sie, dass dies nur mit addEventListener() funktioniert.

DEMO:http://jsfiddle.net/k93Pr/