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!

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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 () )
}

CodePudding user response：

In JavaScript, essentially all your functions are treated as objects and hence the reason why you able to access myfunction4 by calling via myfunction3.

this, inside any of the javaScript function, will be the object on which the function is invoked. So, by default this refer to global object, in your browser, it is the window object.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics#what_is_this