Javascript OOP - lost this in asynchronous callback
callback, javascript, oop, prototype, this
Solution
There are a couple of ways to do this. The most direct is to simply save a copy of the value you need:
Auth.prototype.auth = function () {
var request = new XMLHttpRequest();
var self = this; // save "this" value
request.open('GET', this.getAuthServerURL() + '/token', true);
request.send();
request.onloadend = function () {
var response = JSON.parse(request.responseText);
console.log(response);
if(response.result == 'found') {
var token = response.token;
self.setToken(token); // use saved "this" value
self.isSigned = true;
} else {
console.log('Not logged yet.');
}
}
}
Another way is to use `bind`:
request.onloadend = (function () {
var response = JSON.parse(request.responseText);
console.log(response);
if(response.result == 'found') {
var token = response.token;
this.setToken(token); // use saved "this" value
this.isSigned = true;
} else {
console.log('Not logged yet.');
}
}).bind(this);
The second approach is "cleaner", but it has browser compatibility issues (IE < 9 does not support it).
Problem
I have problem which still bothers me on js oop - I'm sure I'm doing it bad, but I cant get how to do it right. For example, I have this code ``` Auth.prototype.auth = function () { var request = new XMLHttpRequest(); request.open('GET', this.getAuthServerURL() + '/token', true); request.send(); request.onloadend = function () { var response = JSON.parse(request.responseText); console.log(response); if(response.result == 'found') { var token = response.token; this.setToken(token); this.isSigned = true; } else { console.log('Not logged yet.'); } } } ``` The problem is that I cant access to function setToken from context of "request.onloadend" function - its probably because I lost reference to "this". Whats a solution of this problem? Can I somehow pass the "this" var to context of this function? Thanks!