Javascript timeout can't catch the value in class

Question

function MyClass(){
  this.field1 = "Field in MyClass";
}

MyClass.prototype.print = function() {
  console.log("print in MyClass:" + this.field1);
}

function useMyClassPrint() {
  var mc = new MyClass();
  mc.print(); 
  setTimeout(mc.print, 10);
  setTimeout("mc.print()", 10);
}

I get these results:

mc.print(); // this one is easy, it returns "print in MyClass:Field in MyClass"  
// but ...  
setTimeout(mc.print, 10); // "print in MyClass:undefined" why?!  
setTimeout("mc.print()", 10); // runtime error?!@@

`setTimeout(function() {mc.print();}, 10);` or `setTimeout(mc.print.bind(mc), 10);` — Jaromanda X, Feb 10 '17 at 02:21

Julian · Accepted Answer · 2017-02-10T02:58:00.757

function MyClass(){
  this.field1 = "Field in MyClass";
}

MyClass.prototype.print = function() {
  console.log("print in MyClass:" + this.field1);
}

  var mc = new MyClass();
  mc.print(); /*ok*/
  setTimeout(mc.print, 10); /*it's just a reference to function*/
  setTimeout(mc.print.bind(mc),10);/*binded*/

When you define

function MyClass(){
  this.field1 = "Field in MyClass";
}

the field1 is seted when you instantiate the class. field 1 is not a constant.

Try in console:

MyClass.field1 -> /*undefined*/

new MyClass().field1 -> /*Field in MyClass*/

The setInterval() Function receives a Function:

setTimeout(mc.print, 10);

mc.print is just a reference to a function, has no reference to your "mc" instance.

Javascript timeout can't catch the value in class

1 Answers1