'this' key word inside arrow functions

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?

Because arrow functions adopt the `this` of their surrounding (function) scope. Since this arrow function isn't inside any other function, its enclosing scope is global, thus its `this` is the global object. — Robin Zigmond, Jan 18 '20 at 12:39

score 4 · Answer 1 · answered Jan 18 '20 at 12:38

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.

score 1 · Answer 2 · answered Jan 18 '20 at 13:19

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).

score 0 · Answer 3 · answered Jan 18 '20 at 12:42

0

Because arrow functions do not bind their own this but instead inherit from the parent scope which in this case is the global object

answered Jan 18 '20 at 12:42

Murali Kumar

1

I know you would not be able to comment at the moment, but if you are answering, do ensure it's meaningful. – Sid Jan 18 '20 at 14:37

score 0 · Answer 4 · edited Jan 29 '20 at 03:06

The this pointer points window object as it is parent. And this in arrow functions always points to the parent scope, here it is window object.

If you wrap that arrow function with class or function(for instance), then this will point that object.

const func = {
    b: {
        d: function() {
            console.log(this)
        }
    }
}

const arrow = {
    b: {
        d: function() {
            const e = () => {
                console.log(this)
            }
            return e()
        }
    }
}

func.b.d()  >> {d:f}
arrow.b.d() >> {d:f}

'this' key word inside arrow functions

4 Answers4