Скачать или смотреть Understanding the this Keyword in JavaScript: How new Function() Affects Context

Discover how the `new Function()` constructor initializes `this` in JavaScript and how it behaves similarly to regular functions but differently from arrow functions.
---
This video is based on the question https://stackoverflow.com/q/66370070/ asked by the user 'chetzacoalt' ( https://stackoverflow.com/u/12237715/ ) and on the answer https://stackoverflow.com/a/66370230/ provided by the user 'georg' ( https://stackoverflow.com/u/989121/ ) 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: how does new Function() initialise this

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

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding How new Function() Initializes this in JavaScript

When working with JavaScript, one of the concepts that often trips up even seasoned developers is the behavior of the this keyword. A common point of confusion arises when using the new Function() constructor. Many wonder how this is initialized, especially in comparison to other types of functions, such as arrow functions. In this post, we'll clarify how new Function() behaves regarding this and provide practical examples to enhance understanding.

The Problem: How is this Initialized?

In JavaScript, the context of this can vary based on how a function is called. Using the new Function() constructor can introduce some nuances. A user recently tested the new Function() in a Node.js environment and observed that it seemed to exhibit the same behavior as arrow functions, implying that this wasn't set due to lack of closure.

Through their testing, they created an object o with a property f initialized using new Function('return this;'). The expectation was that calling o.f() would yield the same context as o, but this assumption turned out to be incorrect based on their findings.

The Solution: Understanding Function Initialization

Let's clarify the behavior. When you instantiate a function using the new Function() constructor, you're creating a standard function. This means that the rules governing this for regular functions apply. Notably, here's what you need to know:

Standard Function Behavior: Functions created with new Function() do not establish a closure, and thus do not have a this binding at the time of creation. The context of this is determined by how the function is invoked.

Comparison with Arrow Functions: Arrow functions capture the this value of the enclosing lexical context, meaning that this refers to the surrounding scope where the function was defined, not where it's called. In contrast, new Function() behaves like a normal function.

Practical Examples for Clarity

To illustrate the differences clearly, consider the following JavaScript code:

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

In the code above:

o.x() returns the object itself, as it uses this within a method of the object.

o.y() also returns the object itself, despite being created through new Function(). However, it’s essential to note that this behavior can be somewhat misleading, as it depends on how the function is called.

Conversely, o.z() returns window instead of o. This behavior occurs due to the lexical scoping of arrow functions, which don't bind this but rather inherit it from their surrounding context.

Conclusion

So, how does new Function() initialize this? It behaves as a standard function without establishing closure, retaining the ability to refer back to the value of this based on how it is invoked. Understanding this subtlety can greatly affect how you design your functions and use this within your JavaScript code.

For more insights into JavaScript functions and the this keyword, stay tuned for further discussions!