Variable inside setTimeout says it is undefined, but when outside it is defined [duplicate]

Question

I have a class. I need to do some http work inside of a timeout. The problem I am faceing is the http variable inside the timeout keeps saying it is undefined.

export class MyClass {      http:Http:      constructor(private http:Http) {         this.http = http;     }      sendFriendRequest(){      this.http.post( ...//http variable is defined here            setTimeout(function(){                this.http.post(...  //http is not defined here         }    } } 

Answer 1

The reason for this is that the callback function inside setTimeout is in a different lexical environment. This is why in ES6+ functions can be defined using =>. This is so that the code within a function shares the same scope as the function.

To fix this, you can either use ES6+ syntax, where instead of function(a,b,args){...} you would use (a,b,args) => {...}:

setTimeout(() => {   this.http.post(...); }); 

or with ES5 syntax:

var root = this;  setTimeout(function(){     root.http.post(...); }); 

Hope this helps!