this in Constructors and the new Keyword in JavaScript

this in Constructors and the new Keyword in JavaScript

When you call a function with new, JavaScript creates a brand-new object and sets this to that object. This is how constructors work.

What new Does

1. Creates a new empty object.
2. Sets this to that new object inside the function.
3. Runs the function body (which typically adds properties to this).
4. Returns this (the new object), unless the function returns its own object.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const p = new Person("Kunal", 30);
console.log(p.name); // "Kunal"
console.log(p.age);  // 30

Forgetting new Is a Bug

const p = Person("Kunal", 30);
console.log(p); // undefined
console.log(window.name); // "Kunal" (polluted global!)

Without new, this is the global object (or undefined in strict mode). Properties get added to window instead of a new object. The function returns undefined.

Defensive Constructors

Some constructors check this:

function Person(name) {
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
}

With ES6 classes, forgetting new throws:

class Person {
  constructor(name) { this.name = name; }
}
const p = Person("Kunal"); // TypeError: Class constructor Person cannot be invoked without 'new'

new Binding Precedence

new overrides bind for this (but preset arguments remain):

const BoundPerson = Person.bind(null, "Kunal");
const p = new BoundPerson(30); // this is a new object, not null

this in Class Methods

Class methods are regular functions. this depends on how they are called:

class Person {
  constructor(name) { this.name = name; }
  greet() { console.log(this.name); }
}
const p = new Person("Kunal");
p.greet(); // "Kunal"
const g = p.greet;
g(); // undefined (this is lost)

The Takeaway

new creates a fresh object and sets this to it inside the constructor. Forgetting new with a function constructor pollutes the global object. ES6 classes throw if you forget new. Class methods follow regular this rules; bind them if you detach them.