イベントに未定義のプロトタイプメソッドが添付されました

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」はこの場合実際に必要なオブジェクトにバインドされていないためです。

：それを解決するために

一つの方法は、明示的には、addEventListenerラインを変更することにより、スライダに「これ」をバインドすることである（あなたのケースには「これは」イベントがトリガされていた上の要素にバインドされます）

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

Answer 2

イベントハンドラとして呼び出されると、メソッドのコンテキストが失われます（thisはスライダオブジェクトではなくなりました）。いくつかのオプションがありますが、最も簡単なのはFunction.prototype.bindです。

slider.slideNextImage.bind(slider);