Arrow Functions and this


#1

const goat = {
dietType: ‘herbivore’,
makeSound() {
console.log(‘baaa’);
},
diet: () => {
console.log(this.dietType);
}
};

goat.diet(); // Prints undefined

In the code snippet above, the value of this is the global object , or an object that exists in the global scope, which doesn’t have a dietType property and therefore returns undefined .

Here I can’t understand why since ‘this’ is the global object, then it refers to ‘goat’ object, it doesn’t have a ‘dietType’ property??
The goat object doesn’t have a ‘dietType’ property??


#2

this refers to the window object, because you can’t use arrow syntax for declaring method:

Does `this` always refer to an object?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions