javascript - Variable inside setTimeout says it is undefined, but when outside it is defined

In JavaScript the this keyword is used to access the context in which a function is invoked. Functions in JavaScript are always invoked with a context whether you invoke them using the .methodName() syntax or without it, unless the 'use strict' flag is set in the current scope.

When a function is invoked without a context like this:

myFunction()

the context is assumed by the runtime to be the global window object (unless the 'use strict' flag is set, in which case the context will be undefined.)

Note: When using ES6 with a transpiler like Babel, strict mode is set by default in the output.

When a reference to a function is saved on an object, you can invoke that function with the object as the context of 'this' using the dot syntax.

var myObj = {
    myFunc: function(){}
};
// myFunc invoked like this, the value of 'this' inside myFunc will be myObj.
myObj.myFunc();

Manipulate 'this':

Call and Apply

You can always change the context of a function by invoking it with the .call or .apply methods. In this case you have an anonymous function which is not invoked by you, but rather is invoked by the setTimeout function. Because of that, you won't be able to take advantage of .call or .apply.

Bind

Instead, you can create a new function that has a custom context by using the .bind method. By invoking .bind() on your anonymous function, an new function will be returned which has your custom context bound to 'this'. That way you can pass your custom bound function as data to setTimeout.

setTimeout(function(){
   // your code.
}.bind(this), 1000);

now inside the anonymous function the 'this' keyword would be bound to the correct value.

Lexical 'this':

In ES6 however, when using an arrow function the rules about 'this' change. If you use this syntax you will see the context of 'this' will stay the same as whatever it is in the current scope.

setTimeout(() => {
    // Hey I can access 'this' in here!
}, 1000);

Saving a reference:

If you look at the compiled output from Babel you will see Babel keeps track of the context by saving references to 'this' with _this1, _this2 and so forth.

To use this method yourself simply declare a new variable ( it's common to use 'that' or 'self' ) and access the value using it inside your anonymous function like so:

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

Hope this helps.

For more explanation developer.mozilla.org has a good article describing the behavior of 'this' inside a functions scope.