JS Constructor Functions: A Complete Tutorial

// Constructor function — PascalCase convention
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
// Called with new
const alice = new Person("Alice", 30);
console.log(alice.name); // "Alice"
console.log(alice.age);  // 30

// What new does under the hood:
function simulateNew(Constructor, ...args) {
  // Step 1 + 2: Create object linked to prototype
  const obj = Object.create(Constructor.prototype);
  // Step 3: Call constructor with new object as this
  const result = Constructor.apply(obj, args);
  // Step 4: Return new object (or explicit object return)
  return result instanceof Object ? result : obj;
}
 
function Animal(type) {
  this.type = type;
}
 
const dog1 = new Animal("dog");
const dog2 = simulateNew(Animal, "dog");
console.log(dog1.type === dog2.type); // true

function Person(name, age) {
  this.name = name;
  this.age = age;
  // WRONG: creates a new greet function for every Person instance
  // this.greet = function() { return `Hi, I'm ${this.name}`; };
}
 
// CORRECT: shared via prototype — all instances use one function object
Person.prototype.greet = function() {
  return `Hi, I'm ${this.name}, ${this.age} years old.`;
};
 
Person.prototype.birthday = function() {
  this.age += 1;
};
 
const alice = new Person("Alice", 30);
const bob = new Person("Bob", 25);
 
console.log(alice.greet()); // "Hi, I'm Alice, 30 years old."
console.log(bob.greet());   // "Hi, I'm Bob, 25 years old."
 
// Both instances share the exact same function object
console.log(alice.greet === bob.greet); // true

function Car(make) { this.make = make; }
 
console.log(Car.prototype.constructor === Car); // true
 
const myCar = new Car("Toyota");
console.log(myCar.constructor === Car);         // true (inherited via prototype)
console.log(myCar.constructor.name);            // "Car"

function Vehicle(type) { this.type = type; }
 
// Replacing the entire prototype object — LOSES constructor
Vehicle.prototype = {
  describe() { return `A ${this.type}`; },
  // Missing constructor!
};
 
const v = new Vehicle("bus");
console.log(v.constructor === Vehicle); // false — broken!
console.log(v.constructor === Object);  // true — inherits Object.prototype.constructor
 
// Fix: restore the constructor property
Vehicle.prototype = {
  constructor: Vehicle, // ← Explicitly restore
  describe() { return `A ${this.type}`; },
};

function Dog(name) { this.name = name; }
function Animal() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
 
const rex = new Dog("Rex");
 
console.log(rex instanceof Dog);    // true
console.log(rex instanceof Animal); // true (via chain)
console.log(rex instanceof Object); // true (everything is)

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  return `${this.name} makes a sound.`;
};
 
function Dog(name, breed) {
  Animal.call(this, name); // Call parent constructor to initialize inherited properties
  this.breed = breed;
}
 
// Link Dog.prototype to Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Restore constructor
 
// Override speak
Dog.prototype.speak = function() {
  return `${this.name} barks.`;
};
 
const rex = new Dog("Rex", "Labrador");
console.log(rex.speak());        // "Rex barks."
console.log(rex instanceof Dog); // true
console.log(rex instanceof Animal); // true

// Factory function — no new, no this, returns an object literal
function createPerson(name, age) {
  return {
    name,
    age,
    greet() { return `Hi, I'm ${name}`; },
  };
}
 
const alice = createPerson("Alice", 30);
console.log(alice.greet()); // "Hi, I'm Alice"

function Example() {
  this.x = 1;
  return { x: 999 }; // ← Returning an object — this replaces the new object!
}
function Example2() {
  this.x = 1;
  return 42; // ← Returning a primitive — ignored, new object returned
}
 
const e1 = new Example();
console.log(e1.x); // 999 — override with returned object
 
const e2 = new Example2();
console.log(e2.x); // 1 — primitive return ignored, normal behavior

// Constructor function pattern
function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function() {
  return `(${this.x}, ${this.y})`;
};
 
// Equivalent ES6 class
class PointClass {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return `(${this.x}, ${this.y})`;
  }
}
 
// Both produce the same prototype structure
const p1 = new Point(1, 2);
const p2 = new PointClass(1, 2);
console.log(p1.toString()); // "(1, 2)"
console.log(p2.toString()); // "(1, 2)"