Value of this inside arrow function inside an Object [duplicate]

Answer 1

TLDR;

Think of it this way, "if I used non arrow function, what would be this" From that you can then recall that this in an arrow function would be the more outer scope this compared to its counterpart.

Example

let arrow = {
  test: () => {
    console.log('arrow: this === window...', this === window);
  }
};

let nonarrow = {
  test: function() {
    console.log('non-arrow: this === window...', this === window);
  }
};

arrow.test()
nonarrow.test();

Answer 2

Your understanding of arrow functions is mostly correct: Arrow functions have a lexical this and its value within the arrow function is determined by the surrounding scope.

You probably assume that this gets a different value within the person object literal. This is not the case.

So let's see what this refers to in your (global) scope:

console.log(this === window); // true

let person = {
  name: 'Jim',
  test: console.log(this === window), // true
  sayName: () => {
    console.log(this === window); // true
  }
};

person.sayName();

As you can see, when the arrow function assigned to sayName is created, this refers to the window object.

Answer 3

There is no binding of "this", so here is a working version of what you tried:

let person = {
  name: 'Jimmy the Greek',
  sayName: (obj) => {
    console.log(obj.name);
  }
};

person.sayName(person);

More to read on Mozilla DEV.