Here this keyword which is in arrow function points to obj's variable environment

var greeting = 'hi';

const obj = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';
    
      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
  },
};

obj.fo(); //logs: hey

Here this keyword which is in arrow function points to obj's variable environment

var greeting = 'hi';

const obj = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';
    
      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
  },
};

obj.fo(); //logs: hey

var greeting = 'hi';

const obj = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';

    const fo2 = function () {
      const greeting = 'hello';

      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
    };
    fo2();
  },
};

obj.fo(); //logs: hi

• javascript

• That's one of the differences between using an arrow function vs a regular function – Major_Ash Commented Mar 7, 2021 at 15:17
• 4 The this keyword never points to an "environment", it points to a value (typically an object). It refers to the this value in fo2, which is the global object since you called fo2() (not as a method). – Bergi Commented Mar 7, 2021 at 15:17
• 4 this inside foo2 refers to the window object and not the obj because of the way you have called fo2. Replace fo2() with fo2.call(this); and you will see the expected output. – Yousaf Commented Mar 7, 2021 at 15:17
• @Yousaf That would still not print hello but hey which is present on obj since now this will be obj. I think the asker is confusing const/let/var declared variables being accessed via this. – Lakshya Thakur Commented Mar 7, 2021 at 15:24
• @LakshyaThakur I though OP expected "hey" as the output - thank you for pointing that out. – Yousaf Commented Mar 7, 2021 at 15:28

2 Answers 2

Arrow functions have no this value in their scope, so you can access this value of the object. But Normal functions have this value in their scope, in this example this value of the normal function is globalThis or window. and it allows to you access the global scope. if you call fo2 with this value of object instead of globalThis you get '"hey"'

var greeting = 'hi';

const obj  = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';

    const fo2 = function () {
      const greeting = 'hello';

      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
    };
    fo2.call(this) // Use this instead of fo2()
  },
};

In JavaScript the this object is really based on how you make your function calls. the fo2() function is not binded in any object for this purpos it get the this of global context

you have to declare your function with the this like this :

var greeting = 'hi';

const obj = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';

     this.fo2 = function () {
      const greeting = 'hello';

      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
    };
    this.fo2();
  },
};

obj.fo(); //logs: hi

or use arrow function like this :

var greeting = 'hi';
const obj = {
  greeting: 'hey',
  fo() {
    const greeting = 'hola';
    fo2 =  () => {
      const greeting = 'hello';
      const arrowFo = () => {
        console.log(this.greeting);
      };
      arrowFo();
    };
    fo2();
    
  },
};
obj.fo();