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

那是因为＆＃39;这个＆＃39;在这种情况下，它不受您真正想要的对象的约束。（在你的情况下＆＃39;这个＆＃39;将被绑定到触发事件的元素）

解决这个问题的一种方法是明确地绑定这个＆＃39;通过将addEventListener行更改为：

来滑块

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

Answer 2

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

slider.slideNextImage.bind(slider);

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

2 个答案: