Different outputs when using "this" with arrow operator?

Question

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