In ES2015 (formerly ES6), I thought using the arrow syntax should lead the this
variable to be the object you are in, making the old var that = this
technique obsolete.
However, in my function for the then
-part of a Promise, the this
variable is the Window
object (in Chrome) or undefined
(in FF and IE11):
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
@inject(HttpClient)
export class InvoiceGenerator {
items = [];
constructor(http) {
this.http = http;
}
activate() {
this.http
.get(`http://${window.location.host}/api/invoice`)
.then(response => {
this.something = response.someProperty; // this is the Window
}).catch(err => {
console.log(err);
});
}
}
I'm using Aurelia by the way, in case it is important.
How can I get the this
variable to be the object I am currently in (my Aurelia viewmodel), without using the old var that = this
technique?
You're correct that "the arrow syntax should lead the
this
variable to be the object you are in," but you're confused about what object you're "in." When you do this:It's equivalent to this:
Defining the function inside the parentheses (
then(response => ...)
) doesn't change the fact that you're defining it in the same context in whichthis.http
exists—which in your case is apparentlywindow
.Unfortunately I can't tell you how to make
this
refer to your Aurelia viewmodel because you haven't shown your viewmodel code or any other context.