Javascript class property return undefined when called with a method

Question

So This is a pomodoro clock. When I call the inter method (who call countdown every 1s) this.work return undefined and I don't know why. If I call the property from outside the class (t1.work for eg) it's defined, but calling it from inside countdown (this.work) won't work. Anyone knows why?

class Timer {

  //constructor de la clase, se definen las propiedades  
  constructor(work, rest) {
    this.work = work;
    this.rest = rest;
    this.interval = undefined;
  }

  //countdown method (dhu)
  countdown(){
    if (this.work >= 0) {
      console.log(this.work);
      this.work -= 1;
      return;
    } else {
      console.log(this.rest);
      (this.rest > 0) ? this.rest -= 1 : clearInterval(this.interval);
    }
  }

  //interval to invoque countdown method every second
  inter(){
    this.interval = setInterval(this.countdown, 1000);
  }

}

//Creating an object with the timer class, passing values.
var t1 = new Timer(5, 3);

//Calling the method inside object t1
t1.inter();

At first, I thought it was an If problem, but tried to do a simple console.log(this.work) And didn't work either. Thanks

Possible duplicate of Javascript setInterval and `this` solution — Ele
– Ele, Commented Feb 17, 2018 at 11:28
In the constructor add the line this.inter = this.inter.bind(this);.Do the same for the other methods that use this too. — Andy
– Andy, Commented Feb 17, 2018 at 11:31
Hooo thanks!!! So the problem was that inside the inter method "this" refers to the method perse? — Chantun
– Chantun, Commented Feb 17, 2018 at 11:40

Mamun · Accepted Answer · 2018-02-17 11:56:27Z

3

In your case you are not binding this to current context inside the setInterval function

just bind this when call function from setInterval -

this.countdown.bind(this),

class Timer {

  //constructor de la clase, se definen las propiedades  
  constructor(work, rest) {
    this.work = work;
    this.rest = rest;
    this.interval = undefined;
  }

  //countdown method (dhu)
  countdown(){
    if (this.work >= 0) {
      console.log(this.work);
      this.work -= 1;
      return;
    } else {
      console.log(this.rest);
      (this.rest > 0) ? this.rest -= 1 : clearInterval(this.interval);
    }
  }

  //interval to invoque countdown method every second
  inter(){
    this.interval = setInterval(this.countdown.bind(this), 1000);
  }

}

//Creating an object with the timer class, passing values.
var t1 = new Timer(5, 3);

//Calling the method inside object t1
t1.inter();

edited Feb 17, 2018 at 11:56

Mamun

69k9 gold badges51 silver badges62 bronze badges

answered Feb 17, 2018 at 11:43

Devraj verma

4063 silver badges14 bronze badges

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

2 Comments

Chantun Over a year ago

Thanks! So the problem was that inside the inter method "this" refers to the method scope and not the class scope?

Ryan H Over a year ago

I was stuck on this for a bit doing some code refactoring and I didn't even consider the setTimeout as a possible culprit. Thanks a bunch for the question and answer

Collectives™ on Stack Overflow

Javascript class property return undefined when called with a method

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related