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

Question

我正在尝试设置一个对象，当我创建该对象的实例时，我希望将 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');