Objektmethode mit HTML-Listener verknüpfen

Question

Ich versuche, einem EventListener auf einem HTML-Element eine Objektmethode hinzuzufügen. Aber wenn ich das tue, wird die this Variable die Elemente selbst anstelle des Objekts.

class Foo { 
    constructor(element, data) { 
    this.data = data; 
    this.input = element; 
    this.input.oninput = this.update; 
    } 

    update() { 
    this.data; // The context has changed to the element 
    } 
} 

Hier ist meine Abhilfe:

class Foo { 
    constructor(element, data) { 
    this.data = data; 
    this.input = element; 
    this.input.Foo = this; 
    this.input.oninput = this.update; 
    } 

    update() { 
    this.Foo.data; 
    } 
} 

aber ich fühle mich wie diese Formatierung dies nicht der eleganteste Weg ist. Wie programmiere ich es so, dass die Methode des Objekts sich an das Objekt erinnert, von dem es getrennt war?

Answer 1

Function.prototype.bind() kann helfen - es dauert ein Argument und verwendet es als this Wert.

var foo = new Foo(); 
var boundUpdate = foo.update.bind(foo); 
boundUpdate();