prototype printing undefined in console with setInterval function in javascript

Question

I am trying to print something in prototype function using setInterval it's showing undefined in console.

function newFunc(){           
           this.name = "this is person name";
           this.Age = "16 Years";           
       }

       newFunc.prototype.init = function(){           
           setInterval(function(){newFunc.prototype.xyz()}, 1000);           
       }
       
       
       newFunc.prototype.xyz = function(){           
           console.log(this.Age);           
       }


       var abc = new newFunc();
        
        abc.init();

Because you call `xyz` in the context `newFunc.prototype`, that becomes your `this`. Also the `setInterval` callback has its own context which you have not bound. See referenced Q&A for full explanation of how `this` is set. — trincot, Nov 08 '16 at 10:15
Read the paragraph *"Unless you bind the context"* in the referenced answer. You should try to find out yourself from reading about it, but OK, here it is:.... you need: `setInterval(function(){this.xyz()}.bind(this), 1000);`, or shorter: `setInterval(this.xyz.bind(this), 1000);` — trincot, Nov 08 '16 at 10:25

Thalaivar · Answer 1 · 2016-11-08T10:24:57.170

1

newFunc.prototype.init = function(){           
     this.xyz();           
}

Change to this.xyz(), as you are in the same instance. It won't work in setInterval because this is lost here. You need to have a reference of this.

newFunc.prototype.init = function(){           
  var that = this;
  setInterval(function(){that.xyz()}, 1000);           
}

A Working fiddle:

https://jsfiddle.net/ptvckunk/

edited Nov 08 '16 at 10:24

answered Nov 08 '16 at 10:11

Thalaivar

20,946
5
57
67

but how do i do setinterval in init() – Mohsin Nov 08 '16 at 10:14
@Mohsin: look my updated answer... – Thalaivar Nov 08 '16 at 10:15
You mean, `var that = this` :) – Keith Nov 08 '16 at 10:15
@Keith: that's just a reference... .:) – Thalaivar Nov 08 '16 at 10:16
nop, i know you mean that = this but nop – Mohsin Nov 08 '16 at 10:17
No, it needs to be `var that = this`, if you do `var this = that` your assigning undefined to this, and that's not what you wanted. The idea of `var that=this` is to capture scope, so than inside your callback function `that` will equal the objects `this`. – Keith Nov 08 '16 at 10:19
@Mohsin Doing `var that=this` works fine, I did the snippet but couldn't post because now put on hold, marked as duplicate. – Keith Nov 08 '16 at 10:21
@Keith: Thanks buddy, thats a typo in hurry... it should work now.. – Thalaivar Nov 08 '16 at 10:22
can you please email me at mohsinali.net@hotmail.com – Mohsin Nov 08 '16 at 10:23
@Mohsin: https://jsfiddle.net/ptvckunk/ here is a working fiddle for you... – Thalaivar Nov 08 '16 at 10:24

prasanth · Accepted Answer · 2016-11-08T10:42:07.027

0

Its also inside the function.so apply with this.xyz() .this declare with some variable and apply into the setInterval(copy.xyz())

Why use this

this.xyz() only applicable on newFunc.prototype.init.Not ah setInteval(function (){}).These Two function are seperate. so to passing with setInterval function .We need one variable.So only i was declare with var copy

function newFunc(){           
           this.name = "this is person name";
           this.Age = "16 Years";           
       }

       newFunc.prototype.init = function(){  
       var copy = this;//in `this` applicable only  newFunc.prototype.init.it copy from another variable
           setInterval(function(){//in this function are different.
             copy.xyz()//passing variable and excute the function
           
           }, 1000);           
       }
       
       
       newFunc.prototype.xyz = function(){           
           console.log(this.Age);           
       }


       var abc = new newFunc();
        
        abc.init();

edited Nov 08 '16 at 10:42

answered Nov 08 '16 at 10:13

prasanth

19,775
3
25
48

I want to do it with setInterval in the same function – Mohsin Nov 08 '16 at 10:15
@Mohsin see my updated answer – prasanth Nov 08 '16 at 10:21
yes prasad it's working – Mohsin Nov 08 '16 at 10:25
can you please tell me why this not work directly – Mohsin Nov 08 '16 at 10:25
I liked the `that=this`, as it's kind of a standard. Anyway, for the OP if you can use new Javascript features like arrow function's you could do -> `setInterval(()=>{this.xyz(); })` No need for the `that` scope capture. – Keith Nov 08 '16 at 10:26
1

`can you please tell me why this not work directly` The anonymous function `function(){}` is not bound to anything, as such it's `this` will equal the `window` object. Only function attached to the Object or the Object's prototype will have a meaningful `this`. – Keith Nov 08 '16 at 10:31
1

@Mohsin .1. `newFunc.prototype.init` & `newFunc.prototype.xyz` both are in same function.So need to call with `newFunc.prototype.xyz` .Thats why apply with `this`. 2.for why apply `copy = this` .beacause the `newFunc.prototype.xyz` function and setInterval function both are different function.But `this` only applicable on `newFunc.prototype.init` so to passing with setInterval function .We need one variable.So only i was declare with `var copy` – prasanth Nov 08 '16 at 10:35
ok keith so how that becoms this and how it works, please also refer me some direct material on binding and related to this problom – Mohsin Nov 08 '16 at 10:35
1

`ok keith so how that becoms this and how it works`,. Well `that` becomes what is called a reference, in other languages like C++ etc, passing reference's likes this was a sure way to get a General Protection Fault, but in Javascript it's the done thing. So what `that=this` is doing is capturing a reference to the `this`, and because the anonymous function is inside the the same scope, it has access to `that` too, IOW: it has access to `this` via a reference `that`. – Keith Nov 08 '16 at 10:58
The reason Javascript can do this, is because it can do 3 things really well, these 3 things are so useful modern languages now implement them too. eg. C#. 1. Anonymous functions, 2. Closures , 3. Garbage Collection. What I would suggest is you read up on these 3 things in detail, understanding these will really help. The Garbage Collection part does not have any coding concerns, but understanding how it works can also be useful, because even though you don't have to worry about freeing objects in Javascript it's still possible to leak memory if you don't do things right. – Keith Nov 08 '16 at 11:09

prototype printing undefined in console with setInterval function in javascript

2 Answers2