OO Javascript，从构造函数调用原型函数addEventListener

Question

我试图设置一个对象，并且当我创建该对象的实例时，id喜欢将EventListener添加到特定的对象。但是，我抛出一个异常，说明

Uncaught TypeError: Object #<HTMLDivElement> has no method 'nextSlide' 

我有以下代码

//Constructor function 
function CinnamonSlider (sliderID) { 
// Settings - must be set. 
    this.sliderID = sliderID; 

    var nextController = document.querySelector('.'+this.sliderID+'-next'); 

    nextController.addEventListener("click", function(e) { 
     this.nextSlide(); 
     e.preventDefault(); 
    }); 

} 

CinnamonSlider.prototype.nextSlide = function() { 
    console.log('next'); 
}; 

var mySlider = new CinnamonSlider('my-slider'); 

我到底错在这里干什么？

谢谢！

Answer 1

this里面的事件处理程序是元素，而不是类。将this的值存储在变量中

function CinnamonSlider (sliderID) { 

    this.sliderID = sliderID; 

    var nextController = document.querySelector('.'+this.sliderID+'-next'); 

    var self = this; 

    nextController.addEventListener("click", function(e) { 
     self.nextSlide(); 
     e.preventDefault(); 
    }); 

} 

CinnamonSlider.prototype.nextSlide = function() { 
    console.log('next'); 
}; 

var mySlider = new CinnamonSlider('my-slider');