const objectLiteral = {
  x: 5,
  getX: () => {
      console.log(`The value of x is ${this.x}`); 
  }
} 
x.getX(); // The value of x is undefined

Why this doesn't bind to the getX method when I use an object literal? Doesn't the arrow function get their this from the parent scope? In this case the objectLiteral. But it does when I use class generated object.

class classObject {
  x = 5;
  getX = () => {
      console.log(`The value of x is ${this.x}`);
  }

  const classObjectInstance = new classObject();
  classObjectInstance.getX(); // The value of x is 5
}