Why is Object constructors property globally scoped?

Question

Given the following:

function MyClass() {
  this.name = "Agnus"

  return function() {
    console.log(this.name)
  }
}


const user = new MyClass() //this = "MyClass"
const r = MyClass() //this = "window"

console.log(name) //Agnus, this = "window"
r() //Agnus, this = "window"

My expectation was that on calling r(), I will get a error as the value of "this" is window for its case but instead it returned me "Agnus". On checking, I found that the properties of the object constructor MyClass are available from global.

I am having little difficulty to wrap my mind around such behavior, so it will be really nice if someone can explain me a bit about this.

Thank you for your help.

When you call `MyClass()` without `new`, you essentially run `this.name = "Angus"` where `this` is `windows`. Thats why `window.name` is set to `"Angus"` — Ricky Mo, Sep 21 '21 at 02:40
`const r = MyClass() //this = "window"` calls the constructor as a function, so that sets the global *name* property to *Angus*. Properties of the global object are available as variables (they're virtually interchangeable, but not quite). See [*What is the scope of variables in JavaScript?*](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — RobG, Sep 21 '21 at 02:42

score 1 · Accepted Answer · answered Sep 21 '21 at 02:38

When you use new, you set the this to a new empty object whose internal prototype is the constructor's .prototype. That is:

new MyClass()

function MyClass() {
  // `this` is now equivalent to Object.create(MyClass.prototype)

But if you explicitly return an object from a constructor function, the this will essentially be discarded, and the returned object will be used instead. Here, the returned object is the function, and the

this.name = "Agnus"

line assigns to an object which is never referenced again.

In contrast, when you don't use new, and the function you call isn't a property of an object (or bound, or an arrow function), this will be either the global object (in sloppy mode), or undefined (in strict mode). In sloppy mode,

function MyClass () {
    this.name = "Agnus"

does

window.name = "Agnus";

And then when you invoke the returned function later with r(), since it's not a property of an object, its this is the global object - whose name is Angus.

To reduce confusion, I recommend

Avoiding returning objects explicitly from constructors
Always using new when invoking a constructor

You don't have to, but if you do that, you'll confuse yourself (and other readers of the code) less.

Strict mode is a good idea too.

Why is Object constructors property globally scoped?

1 Answers1