Could someone break down for me the behavior exhibited within this method?

Question

Could someone break down for me the behavior exhibited within this method?

Hello there, I'm a beginner so please forgive me for any lack of knowledge.

const example = {
    myFunction(){
        console.log(this);
    },
    myFunction2(){
        function myFunction3(){
            console.log(this)
        }
        return myFunction3()
    } }

When I execute the code

example.myFunction2()

I get the global window object. I'm a bit perplexed by this. My inquiries are:

Can myFunction2() access myFunction3() because of their hierarchy? If so, is there a way to directly access myFunction3() without going through myFunction2()?
Why does this in myFunction3() return the global window instead of referencing myFunction3() itself?

Thank you for your assistance!

javascript object

Answer 1

Answer №1

1. Trying to access myfunction4 using the method "test.myfunction3.myfunction4()" is not possible.

This is because myfunction4 is not a property of myfunction3, and test.myfunction3 is not an object.

2. Since myfunction4 is a function and not a method, the keyword "this" refers to the Window object within myfunction4.

In methods, "this" refers to the parent object, but in functions, it refers to the global object like Window.

Answer 2

1. Trying to access myfunction4 using the method "test.myfunction3.myfunction4()" is not possible.

This is because myfunction4 is not a property of myfunction3, and test.myfunction3 is not an object.

2. Since myfunction4 is a function and not a method, the keyword "this" refers to the Window object within myfunction4.

In methods, "this" refers to the parent object, but in functions, it refers to the global object like Window.

Answer 3

Answer №2

The reason for accessing the global object is related to how you are calling your function, not where the function is located.

When I mention "invocation," I am specifically talking about ==> test.myFunction3()

Object methods can be tricky to understand, but simply having a function inside another doesn't affect its behavior. What counts is how the function is called, like in test.myFunction3()

Answer 4

The reason for accessing the global object is related to how you are calling your function, not where the function is located.

When I mention "invocation," I am specifically talking about ==> test.myFunction3()

Object methods can be tricky to understand, but simply having a function inside another doesn't affect its behavior. What counts is how the function is called, like in test.myFunction3()

Answer 5

Answer №3

Is it possible for myfunction3() to directly access myfunction4() without going through its hierarchy? If so, how can I achieve this?

You cannot directly access myfunction4() through myFunction3(), but you can obtain a reference to it and then utilize that reference. In the example below, I also identify a mistake in your implementation of myFunction3()

const func4 = myFunction3();

func4();

Why does this in myfunction4() return the global window object instead of a reference to myfunction4()?

There are two issues at play here. Firstly, 'this' in a function is dynamically bound at runtime.

Secondly, due to a typo in myFunction3(), you are returning the result of calling myFunction4 rather than returning a direct reference to the function itself, which seems to be your intention.

myfunction3(){

    function myfunction4(){
        console.log(this)
    }
    return myfunction4; // Instead of returning the result of calling the function (remove the ())
}

Answer 6

Is it possible for myfunction3() to directly access myfunction4() without going through its hierarchy? If so, how can I achieve this?

You cannot directly access myfunction4() through myFunction3(), but you can obtain a reference to it and then utilize that reference. In the example below, I also identify a mistake in your implementation of myFunction3()

const func4 = myFunction3();

func4();

Why does this in myfunction4() return the global window object instead of a reference to myfunction4()?

There are two issues at play here. Firstly, 'this' in a function is dynamically bound at runtime.

Secondly, due to a typo in myFunction3(), you are returning the result of calling myFunction4 rather than returning a direct reference to the function itself, which seems to be your intention.

myfunction3(){

    function myfunction4(){
        console.log(this)
    }
    return myfunction4; // Instead of returning the result of calling the function (remove the ())
}

Answer 7

Answer №4

Maybe the solution was to convert it into an object for the function call to work properly, as shown below:

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

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

If you wanted to call the functions in a similar way to before, you could do so like this:

test.fun1();     // local

test.fun3();    // global (due to inside of fun4)

You cannot directly call fun4, but you can retrieve the value by calling fun3.

Answer 8

Maybe the solution was to convert it into an object for the function call to work properly, as shown below:

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

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

If you wanted to call the functions in a similar way to before, you could do so like this:

test.fun1();     // local

test.fun3();    // global (due to inside of fun4)

You cannot directly call fun4, but you can retrieve the value by calling fun3.

Could someone break down for me the behavior exhibited within this method?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The Owl Carousel npm package is experiencing issues within a ReactJS environment

Can Vuex mapActions be utilized within a module that is exported?

"Strategies for using Selenium in Python to simulate clicks without relying on class, id, or name attributes

Improving communication between Components in ReactJS

Transmitting a Custom JS Object via Vue Router

Clear existing markers from the map before inserting new markers

Converting MiniZinc CSP to JSON using a workaround for iterating through arrays in JavaScript

I want to create a custom jQuery slider totally from scratch

Numerous Customized Google Maps

Verify if the JSON response contains any data

Creating an event listener with a dynamic name

Using dynamic imports in Next.js allows us to efficiently load modules based on variables defining the path

Issue with calling hooks. Hooks can only be invoked within the body of a function component

Oops! Make sure to call google.charts.load before calling google.charts.setOnLoadCallback to avoid this error

Using importNode in the context of Microsoft Edge involves transferring a

Keying objects based on the values of an array

Connecting a controller to a directive in AngularJS: A step-by-step guide

Using the OR Operator with a different function in React

Modifying a JavaScript code with document.write(variable)

Troubleshooting: Issue with jQuery not retrieving the value of input:nth-child(n)