Different outputs when using "this" with arrow operator?

Asked Aug 12 '16 at 18:43

Active Aug 12 '16 at 18:43

Viewed 23 times

Consider for example

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

myObject.bar.baz(); // Prints 'bar'

Whereas with arrow operator it produces

const myObject = {
     foo: 'foo',
     bar: {
          foo: 'bar',
          baz: () => console.log( this.foo ),
     }
};
myObject.bar.baz(); // Prints 'undefined'

Can anyone please explain why behaviour is different ?

I know that arrow functions are lexically scoped, but unable to understand reference to this

asked Aug 12 '16 at 18:43

actor203

2

Arrow functions use the value of `this` at the time they were created, not when they're called. – Barmar Aug 12 '16 at 18:45
makes sense. Please post comment as answer. – actor203 Aug 12 '16 at 18:46
1

See also: [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](http://stackoverflow.com/q/34361379/218196) – Felix Kling Aug 12 '16 at 18:46
Can't answer a closed question. – Barmar Aug 12 '16 at 18:47

Different outputs when using "this" with arrow operator?

0 Answers0