Prototyp-Methode zum Ereignis hinzugefügt undefined

Question

Ich bin neu in OOP in Javascript, ich wollte mein Slider-Objekt mit seinen eigenen Attributen und Methoden haben. Es funktioniert gut, bis ich den Eventlistener mit meiner Methode slideNextImage hinzufügen. Sobald diese Methode ausgelöst wird, ist jedes Attribut in der Methode undefiniert. Wenn ich die Methode starte, ohne ein Ereignis anzuhängen, funktioniert es gut.

function Slider(photos, currentPhoto){ //Constructor 
    this.photos = photos; 
    this.currentPhoto = currentPhoto; 
} 

Slider.prototype.slideNextImage = function() { 
    document.getElementById("slider").style.backgroundImage = "url(" + this.photos[this.currentPhoto] + ")"; 
    console.log("La foto actual es la " + this.currentPhoto + " y en el almacen hay " + this.photos.length); 
} 

var photos = ["../imagenes/images/wallpaper_5.jpg", "../imagenes/images/wallpaper_4.jpg", "../imagenes/images/wallpaper_3.jpg", "../imagenes/images/wallpaper_2.jpg", "../imagenes/images/wallpaper_1.jpg"]; 

var slider = new Slider(photos, 0); 

document.getElementById("next").addEventListener("click", slider.slideNextImage); 

Vielen Dank im Voraus.

Answer 1

Das ist, weil 'this' in diesem Fall nicht an das Objekt gebunden ist, das Sie wirklich wollen. (In Ihrem Fall ‚this‘ wird an das Element gebunden sein, an dem das Ereignis ausgelöst wurde)

Eine Möglichkeit, es zu lösen, indem Sie explizit binden ‚dies‘ mit dem Schieber ist durch Änderung der addEventListener Linie:

document.getElementById("next").addEventListener("click", Slider.prototype.slideNextImage.bind(slider)); 

Answer 2

Ihre Methode verliert ihren Kontext, wenn sie als Event-Handler aufgerufen wird (this ist nicht länger Ihr Slider-Objekt). Sie haben ein paar Optionen, ist die einfachste Function.prototype.bind zu verwenden:

slider.slideNextImage.bind(slider);