Can someone explain This behaviour inside of method?

Question

Hi Beginner here so sorry for any ignorance if I showed.

const test = {
    myfunction(){
        console.log(this);
    },
    myfunction3(){
        function myfunction4(){
            console.log(this)
        }
        return myfunction4()
    } }

and when I run

test.myfunction3()

I receive global object as a window. I am a little bit confused how this happened. My question is

1. myfunction3() can access to myfunction4() because of its hierarchy? If so, is there anyway I can access to myfunction4() directly instead of going through myfunction3()?
2. Why this in myfunction4() returned global window instead of a reference to myfunction4()?

Thank you for your help!

Answer 1

1. You cannot access myfunction4 in such method of "test.myfunction3.myfunction4()"

Because myfunction4 is not property of myfunction3 and especially, test.myfunction3 is not object.

2. Since myfunction4 is not method, instead it is function, "this" refer Window object in myfunction4.

"this" in method refer the parent object but in function, it refer global object like Window.

Answer 2

The reason you're getting the global object has to do with your function call/invocation and not with the function placement itself.

Invocation, I'm referring to ==> test.myFunction3()

Object methods often times are a bit confusing, but just because a function sits inside of another function means nothing. It's not about placement of a function but its invocation.. so here what matters is test.myFunction3()

Answer 3

myfunction3() can access to myfunction4() because of its hierarchy? If so, is there anyway I can access to myfunction4() directly instead of going through myfunction3()?

You can't access the function directly through myFunction3(), but you can return a reference to it, which you can then use. See below where I point out that you have a typo in your implementation of myFunction3()

const func4 = myFunction3();

func4();

Why this in myfunction4() returned global window instead of a reference to myfunction4()?

There are two issues, first this in a function is bound at runtime.

Second, because of typo in myFunction3() you are returning the result of calling myFunction4 rather than returning a reference to the function itself, which I assume is what you are trying to do.

myfunction3(){

    function myfunction4(){
        console.log(this)
    }
    return myfunction4; // this returns the function, rather than return the result of calling the function (drop the () )
}

Answer 4

Perhaps you just needed to convert it into an object for the function call to work like this:

var name = 'global';   // when 'this' scope is global

var test = {
    name: 'local',   // when 'this' scope is local to test
    fun1: function() { //same fun as an object
        console.log(this.name);
    },
    fun3: function() {
        function myfunction4(){
            console.log(this.name);
        }
        return myfunction4()
    } 
}

And if you wanted to call the functions in the same way you were doing it above, then you could it have done so like this:

test.fun1();     // local

test.fun3();    // global (that's what inside of fun4) 

You cannot call fun4 directly but can findout the value by calling fun3.