Etkinleştirilmemiş olaya iliştirilmiş prototip yöntemi

Question

Javascript'te OOP'da yeniyim, Slider nesnesini kendi özniteliklerine ve yöntemlerine sahip olmak istedim. Eventlistener'ı yöntemim slideNextImage ile ekleyene kadar iyi çalışıyor. Bu yöntem tetiklendiğinde, yöntem içindeki her özellik tanımsızdır. Herhangi bir olayı eklemeden yöntemi başlatırsam iyi çalışır.

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); 

Şimdiden teşekkür ederiz.

Answer 1

Çünkü 'bu', bu durumda gerçekten istediğiniz nesneye bağlı değil.

: o kadar addEventListener hattını değiştirerek 'bu' kaydırıcı bağla açıkça gereğidir çözmek için

bir yolu (sana göre 'bu' olayı harekete hangi elemana bağlı olacaktır)

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

Answer 2

Yönteminiz, olay işleyicisi olarak çağrıldığında bağlamını kaybeder (this artık kaydırma nesnesiniz değildir). Sen birkaç seçenek var, en basit Function.prototype.bind kullanmaktır:

slider.slideNextImage.bind(slider);