javascript - OO Javascript，从构造函数 addEventListener 调用原型(prototype)函数

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');