附加到事件的原型方法未定义

Question

我是 Javascript 的 OOP 新手，我想让我的 Slider 对象具有自己的属性和方法。在我使用我的方法 slideNextImage 添加 Eventlistener 之前，它工作正常。一旦触发此方法，方法内的每个属性都是未定义的。如果我在不附加任何事件的情况下启动该方法，它会很好用。

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' 没有绑定到您在这种情况下真正想要的对象。（在您的情况下 'this' 将绑定到触发事件的元素）

解决它的一种方法是通过将 addEventListener 行更改为：

将 'this' 显式绑定到滑块

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

Answer 2

您的方法在作为事件处理程序调用时会丢失其上下文（this 不再是您的滑块对象）。您有几个选择，最简单的是使用 Function.prototype.bind:

slider.slideNextImage.bind(slider);

附加到事件的原型方法未定义

Prototype method attached to event getting undefined

javascript

addeventlistener

prototype-programming