'this' key word inside arrow functions [duplicate]

Question

trying to learn the 'this' key word inside an arrow function properly.

after reading and watching some videos i understood that with the regular function the 'this' key word will be defined whenever the function is invoked.

and 'this' inside the arrow function will be defined according to the value of 'this' wherever you build that function.

so i opened the console and played with two objects and the two functions.

i did this:

const reg = {
    reg1: "reg1",
    reg2: {
            reg3: 'reg3',
            regFunc: function(){console.log(this)}
    }
}

const arrow = {
    arrow1: "arrow1",
    arrow2: {
            arrow3: 'arrow3',
            arrowFunc: () => {console.log(this)}
    }
}

reg.reg2.regFunc()
VM712:5 {reg3: "reg3", regFunc: ƒ}

arrow.arrow2.arrowFunc()
VM712:13 Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …}

for the reg Object i get it because it was invoked inside the reg2 object which it shows me.

but for the arrow Object the this keyword in the arrow function was created inside the arrow2 object inside arrow.

so why isn't the value of it in the arrow object arrow2? why is it the global window?

Answer 1

this is defined for a function execution context.

In the code that defines const arrow there is no function context, only the arrow function. So the lexical this is the global object (in sloppy mode) or undefined in strict mode.

It is a common misunderstanding that an object literal (the one assigned to arrow or to arrow2) would somehow bind this to it.

Answer 2

In arrow functions this is treated similarly to a normal variable (a constant one). An arrow function records the value of this at the moment of creation and this will always point to that value inside the arrow function (since you can't reassign this).