JavaScript – Call a function of the prototype from another prototype function?

Question

I am trying to write a simple slider using plain JavaScript. As these are my first steps using the prototype of an object & following an object oriented approach in general, I am quite confused sometimes, so please bear with me.

Here is what I have:

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

Unfortunately, this isn't working, after the 2 seconds wait because of setInterval, I get the following error: TypeError: MySlider.nextSlide is not a function.

While I understand what the problem is, I don't know what to change. I already tried it with this.nextSlide() but that didn't work either. My guess is that it has something to do with the prototype chain, but I am still trying to understand this.

How to solve this problem? Or is it a bad idea in general to it this way?

possible duplicate of How to access the correct `this` / context inside a callback? — Felix Kling
– Felix Kling, Commented Nov 30, 2013 at 17:43
"My guess is that it has something to do with the prototype chain" No, not at all. If you want to learn more about this, I recommend to read the MDN documentation — Felix Kling
– Felix Kling, Commented Nov 30, 2013 at 17:44
@FelixKling I understand that you are fed up with repeating questions, I was just unable to find your answer using the search. I just gave you an upvote, great info! Especially the mention of common names as that and self are great as it helps to understand scripts written by others. — Sven
– Sven, Commented Nov 30, 2013 at 17:52
No worries, I'm not blaming you :) I know that it is not always easy to find the right question/answer to a problem. But that's why we have the ability to close vote. It just doesn't make sense to repeat the same solution over and over again. — Felix Kling
– Felix Kling, Commented Nov 30, 2013 at 17:54

Pointy · Accepted Answer · 2013-11-30 17:39:48Z

7

You need to preserve the context (the value of this) when you set up the timer handler:

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

By saving the value of this, you ensure that when the interval timer goes off it'll be able to invoke the "nextSlide" function in the context of the correct object.

answered Nov 30, 2013 at 17:39

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sven Over a year ago

Thanks for your answer, its working! But why can't I simply use this.nextSlide();?

Pointy Over a year ago

@Sven because the value of this is determined upon each function call. When the system (the JavaScript runtime) calls your timer handler function, it does not know what value to use for this. Functions in JavaScript do not maintain any sort of "strong" permanent relationship to objects (like the prototype object, in this case).

Collectives™ on Stack Overflow

JavaScript – Call a function of the prototype from another prototype function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related