Visibility of "this" in Arrow Functions

Question

I have two cases

const test = {
    foo: function (){
        this.bar();
    },
    bar: function (){
        console.log('bar');
    }
}
test.foo();

in this case, everything works correctly.

const test = {
    foo: () => {
        this.bar();
    },
    bar: () => {
        console.log('bar');
    }
}
test.foo();

In second case I get error:

Uncaught TypeError: Cannot read property 'bar' of undefined

I know I can wrote test.bar() in foo function, but I'm interested why this not available in arrow functions scope in this case.

scope in fat arrow function doesn't take context of the object it was called on — Daniel Lizik, Sep 22 '16 at 13:17

score 4 · Accepted Answer · answered Sep 22 '16 at 13:17

Normally, the value of this in a function depends on how that function is called.

Arrow functions import the value of this from the scope in which the function was created.

In the middle of an object literal, the value of this will depend on what is around the object literal, but certainly won't be the object itself.

1 Answers1