this inside an async object method [duplicate]

Question

I creating an object that uses async function methods with babel-polyfill/babel-preset-es2017, however I am having a problem with this:

let obj = () => {
    return {
        doAsync: async () => {
            let thing = await longProcess()
            return this.transform(thing)
        },

        transform: (thing) => {
            return psuedoCodeTransform(thing)
        }
    }
}

let instance = obj()
instance.doAsync()
// TypeError: cannot read property 'transform' of undefined`.

Is this something described in ES2017, a babel-polyfill/regeneratorRuntime gotcha?

Barmen

This has nothing to do with async/await and everything with arrow functions. – Enchorial

ES7 !== ES2017 ... – Quiet

Answer 1

Arrow functions do not create their own context. They don't have their own this and this will refer to the enclosing scope's context. In this case (no pun intended), this does not refer to the same object as instance at all.

If you log this inside doAsync, you'll notice it's the window global.

Ungual

Interesting. I am doing this inside an Angular service constructor, which gave me console.log(this) // undefined. That is what threw me off. – Barmen

Answer 2

Joseph the Dreamer's response is exactly right obviously, but since I work best by example, here is your code changed which should make it work. Notice the only change is actually defining doAsync as a normal function instead of arrow function:

let obj = () => {
    return {
        doAsync: async function() {
            let thing = await longProcess()
            return this.transform(thing)
        },

        transform: (thing) => {
            return psuedoCodeTransform(thing)
        }
    }
}

let instance = obj()
instance.doAsync()
// TypeError: cannot read property 'transform' of undefined`.

Dragelin

Or simply async doAsync() { ... }. I don't understand why someone wants to use arrow functions in object literals (unless for this of course). Method definitions are shorter. – Quiet