Understanding this in JavaScript: Why Global Object is Returned

Dive into JavaScript's behavior of `this` in methods and functions. Learn how to access inner functions and understand their context.
---
This video is based on the question https://stackoverflow.com/q/70357081/ asked by the user 'Gwen Lee' ( https://stackoverflow.com/u/11616489/ ) and on the answer https://stackoverflow.com/a/70357917/ provided by the user 'Volodymyr Ivanenko' ( https://stackoverflow.com/u/16973044/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Can someone explain This behaviour inside of method?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding this in JavaScript: Why Global Object is Returned

As a beginner in JavaScript, it’s common to encounter challenges around how this behaves within functions and methods. A recent question posed by a learner highlights this exact issue. The learner is confused about how the context of this varies between methods and standalone functions, especially when observing unexpected behavior while using them.

Let’s take a closer look at the JavaScript code in question, analyze the issues, and provide a clear explanation regarding the behavior of this.

The JavaScript Code

The learner shared the following code snippet to illustrate their question:

[[See Video to Reveal this Text or Code Snippet]]

When the learner calls test.myfunction3(), they are surprised to see the global object, which is typically window in browsers, logged to the console. Let’s break down the behavior of this code and address the learner's questions.

Key Points Explained

1. Accessing myfunction4 Directly

The learner's first question pertains to whether myfunction4() can be accessed directly from myfunction3(). The answer is no, you cannot access myfunction4() as test.myfunction3.myfunction4 because:

myfunction4() is defined as a standalone function within myfunction3().

It does not exist as a property of myfunction3(), which means it cannot be called that way.

To access myfunction4() directly, it would need to be defined as part of the test object like this:

[[See Video to Reveal this Text or Code Snippet]]

2. Why Does this Refer to the Global Object?

The learner's second inquiry is about why this in myfunction4() refers to the global object instead of a reference to myfunction4(). This occurs due to how this works in JavaScript, which can be summarized as follows:

In Methods: When a function is defined as a method of an object (e.g., myfunction()), this refers to the parent object (test in this case).

In Functions: When a function is defined as a stand-alone function (like myfunction4() within myfunction3()), and invoked without an object context, this defaults to the global scope. In browsers, this global scope is represented by the window object.

Conclusion

To summarize the key takeaways regarding the behavior of this in the example provided:

myfunction4() cannot be accessed directly through myfunction3() because it’s not a property of myfunction3() or the test object.

The context of this changes depending on how a function is called. In the case of a plain function (not a method of an object), it defaults to the global object.

Understanding how this works in JavaScript can be challenging at first, but with practice, it will become clearer. If you have any further questions or need help with other concepts, feel free to ask!

Видео Understanding this in JavaScript: Why Global Object is Returned канала vlogize