CountDown timer object using the wrong 'this' value

Question

I am having trouble with making a counter Object. What I want it to do is to start a timer with a newly created object. The timer does not start unless the object variables are set as global variables. Can someone take a look at this and help me out?

Here is the code:

function Clock(timeInMinutes){
    this.seconds = timeInMinutes * 60;
    this.current = 0;
}

Clock.prototype = {
    constructor: Clock,
    start: function(){
        function increase(){
            if(this.current <= this.seconds){
                console.log(this.current);
                this.current++;
            }
        }
        setInterval(increase,1000);
    }
};

When I enter this code nothing happens:

var clock = new Clock(1);
clock.start();

Things only happen when i do this:

this.current = 0;
this.seconds = 60;

Why is the 'this' value inside the start function not working as I want it do be?

Try `setInterval(increase.bind(this),1000);`. MDN has an explanation of [how `this` works](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this). — nnnnnn, Dec 08 '16 at 07:12
@nnnnnn Can you explain how this works? When the increase function is called from the newly created object, isn't the 'this' value bound to the object. — , Dec 08 '16 at 07:15
No it isn't. The value of `this` within a function depends on how that function is called. Using "dot" notation like `clock.start()` means that within `start()` the `this` value is `clock`, but `increase()` isn't called like that. Read the page I linked to (unfortunately it's been edited a few times and isn't as clear as it used to be, but it covers the basics). — nnnnnn, Dec 08 '16 at 07:18

Nitish Kumar · Answer 1 · 2016-12-08T07:15:22.103

0

Try this.

Clock.prototype = {
    constructor: Clock,
    start: function(){
        var that = this;
        function increase(){
            if(that.current <= that.seconds){
                console.log(that.current);
                that.current++;
            }
        }
        setInterval(increase,1000);
    }
};

http://jsbin.com/nasuyuyove/1/edit?js,console,output

edited Dec 08 '16 at 07:15

answered Dec 08 '16 at 07:14

Nitish Kumar

4,808
2
18
38

Close...need to move the `that` declaration to outside `increase()`. Would be nice to explain why that is necessary in the first place... – nnnnnn Dec 08 '16 at 07:15

score 0 · Answer 2 · answered Dec 08 '16 at 07:18

Try with : var that=this; start function & inside another one function also there.Prototype only with start function. Inside function is different one.so declare the prototype function of that= this .Then call the that.its act as the prototype this

function Clock(timeInMinutes){
    this.seconds = timeInMinutes * 60;
    this.current = 0;
}

Clock.prototype = {
    
    constructor: Clock,
   start: function(){
     var that=this;
        function increase(){
            if(that.current <= that.seconds){
                console.log(that.current);
                that.current++;
            }
        }
        setInterval(increase,1000);
    }
}
var clock = new Clock(1);
clock.start();

CountDown timer object using the wrong 'this' value

2 Answers2