JavaScript - 从另一个原型函数调用原型的函数？

Question

我正在尝试使用纯JavaScript编写一个简单的滑块.由于这些是我使用对象原型并遵循面向对象方法的第一步,有时候我很困惑,所以请耐心等待.

这是我有的:

function MySlider(noOfSlides, startSlide){
    this.noOfSlides = noOfSlides;
    this.startSlide = startSlide;
    this.currentSlide = this.startSlide;
}

MySlider.prototype.nextSlide = function(){
    this.currentSlide++;
    console.log(this.currentSlide);
    return this.currentSlide;
};

MySlider.prototype.startSlider = function(){
    setInterval(function(){
        MySlider.nextSlide();
    }, 2000);
};

var slides = new MySlider(4, 1);

document.getElementById("button").addEventListener("click", function(){
    slides.startSlider();
}, false);

不幸的是,这是行不通的,经过2秒等待因为setInterval,我得到以下错误:TypeError: MySlider.nextSlide is not a function.

虽然我明白问题是什么,但我不知道该改变什么.我已经试过了this.nextSlide()但是那也没用.我的猜测是它与原型链有关,但我仍然试图理解这一点.

如何解决这个问题呢？或者这样一般来说这是一个坏主意吗？

Answer 1

this设置计时器处理程序时,需要保留上下文(值):

MySlider.prototype.startSlider = function(){
    var slider = this;
    setInterval(function(){
        slider.nextSlide();
    }, 2000);
};

通过保存值this,可以确保当间隔计时器关闭时,它将能够在正确的对象的上下文中调用"nextSlide"函数.