"this" in top level functions

Question

I understand in how the this keyword works in that it is contextual to what it is being called in, that it can be bound etc. one thing I do not get though is in an example like this:

function Person(first, last, age, gender, interests) {
 this.name = {
 first,
 last
 };
 this.age = age;
 this.gender = gender;
 this.interests = interests;
};

what I assumed would happen here is this will attach to the window object and add those properties. what is making the "this" keyword work differently in this situation compared to the way I thought this worked in a method or a constructor function, where this is bound to the surrounding function?

• Jaromanda X: depends on how you "call" Person
• Ry-: "it is contextual to what it is being called in" – no, it’s about how it’s called. Where the function appears doesn’t matter. (And it’s the opposite for arrow functions.)

Answer 1

Precisely, that when you invoke the Person function via the new operator it becomes a constructor, with this representing the newly created object by new.

In other words, think of new as creating a new empty object, and then invoke Person on this newly created object and finally returning it fully "constructed".

Answer 2

In your example above, the function is an es5 class constructor.

When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.

Hope this helps :)

• user9315861: As a matter of terminology, there is no such thing as an "ES5 class constructor". ES5 does not even have the notion of "class". And technically speaking, the function in and of itself is not a constructor, although it may be intended for use as such (in other words, to be invoked with new).