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

不幸的是，由于setInterval等待2秒后，这不起作用，我收到以下错误：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”函数。

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

1 个答案: