javascript - 附加到事件的原型(prototype)方法未定义

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 7 年前。

我是 Javascript 中的 OOP 新手，我想让我的 Slider 对象拥有自己的属性和方法。它工作正常，直到我使用我的方法 slipNextImage 添加事件监听器。一旦触发此方法，该方法内的每个属性都是未定义的。如果我启动该方法而不附加任何事件，它会很好地工作。

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

提前谢谢您。

Answer 1

那是因为在这种情况下“this”并未绑定(bind)到您真正想要的对象。 (在您的情况下，“this”将绑定(bind)到触发事件的元素)

解决此问题的一种方法是通过将 addEventListener 行更改为:将“this”显式绑定(bind)到 slider :

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