← Prototype Inheritance Object Property Descriptors →

Classes vs Prototypes

🎭 Two Syntaxes, One Mechanism

ES6 classes are syntactic sugar over JavaScript's existing prototype-based inheritance. They don't introduce new inheritance model, but provide cleaner syntax.

Transformation: Class → Prototype

ES6 Class Syntax

class Animal {
  constructor(name) {
    this.name = name;
  }
  
  eat() {
    return 'eating';
  }
  
  static isAnimal(obj) {
    return obj instanceof Animal;
  }
}

class Dog extends Animal {
  bark() {
    return 'woof';
  }
}

Equivalent Prototype Code

function Animal(name) {
  this.name = name;
}

Animal.prototype.eat = function() {
  return 'eating';
};

Animal.isAnimal = function(obj) {
  return obj instanceof Animal;
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(
  Animal.prototype
);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  return 'woof';
};

Example 1: ES6 Classes - Modern Syntax

JavaScript Editor

// ES6 Classes - Syntactic Sugar for Prototypes

// Class declaration
class Animal {
  constructor(name, energy = 100) {
    // Instance properties
    this.name = name;
    this.energy = energy;
  }
  
  // Instance method (goes to prototype)
  eat(amount) {
    console.log(`${this.name} is eating.`);
    this.energy += amount;
    return this;
  }
  
  sleep(length) {
    console.log(`${this.name} is sleeping.`);
    this.energy += length;
    return this;
  }
  
  play(length) {
    console.log(`${this.name} is playing.`);
    this.energy -= length;
    return this;
  }
  
  // Static method (on class itself)
  static isAnimal(obj) {
    return obj instanceof Animal;
  }
  
  // Getter
  get isTired() {
    return this.energy < 20;
  }
  
  // Setter
  set nickname(value) {
    this._nickname = value;
  }
  
  get nickname() {
    return this._nickname || this.name;
  }
  
  // Private field (ES2022)
  #secret = 'I am an animal';
  
  revealSecret() {
    return this.#secret;
  }
}

// Inheritance with extends
class Dog extends Animal {
  constructor(name, energy, breed) {
    // Call parent constructor
    super(name, energy);
    this.breed = breed;
  }
  
  // Override parent method
  eat(amount) {
    super.eat(amount); // Call parent method
    console.log(`${this.name} eats like a dog!`);
    return this;
  }
  
  // Dog-specific method
  bark() {
    console.log(`${this.name} says Woof!`);
    this.energy -= 0.1;
    return this;
  }
  
  // Static method inheritance
  static isDog(obj) {
    return obj instanceof Dog;
  }
}

// Create instances
const animal = new Animal('Generic', 50);
const dog = new Dog('Buddy', 100, 'Golden Retriever');

console.log('Class instances:');
console.log('animal.name:', animal.name);
console.log('dog.name:', dog.name);
console.log('dog.breed:', dog.breed);

console.log('\nMethod calls:');
animal.eat(10).play(5);
console.log('Animal energy:', animal.energy);
console.log('Animal tired?', animal.isTired);

dog.eat(20).bark().play(10);
console.log('Dog energy:', dog.energy);
console.log('Dog nickname:', dog.nickname);
dog.nickname = 'Bud';
console.log('After nickname:', dog.nickname);

console.log('\nStatic methods:');
console.log('Animal.isAnimal(dog):', Animal.isAnimal(dog));
console.log('Dog.isAnimal(dog):', Dog.isAnimal(dog));
console.log('Dog.isDog(dog):', Dog.isDog(dog));

console.log('\nPrivate field:');
console.log('dog.revealSecret():', dog.revealSecret());
// console.log(dog.#secret); // SyntaxError: Private field

console.log('\nUnder the hood - still prototypes:');
console.log('typeof Animal:', typeof Animal); // function
console.log('Animal.prototype.eat:', typeof Animal.prototype.eat); // function
console.log('dog.__proto__ === Dog.prototype:', dog.__proto__ === Dog.prototype);
console.log('Dog.prototype.__proto__ === Animal.prototype:', Dog.prototype.__proto__ === Animal.prototype);

✅ Advantages of ES6 Classes

Readability

Clean, familiar syntax
Less boilerplate
Clear inheritance with extends
Built-in getters/setters

Features

Private fields (ES2022)
Static methods and properties
Method shorthand syntax
Super keyword for parent access

Tooling

Better IDE support
TypeScript compatibility
Modern framework support
Better documentation

Example 2: Constructor Functions - Traditional Approach

JavaScript Editor

// Constructor Functions - The "Old Way"

// Constructor function (equivalent to class)
function AnimalConstructor(name, energy = 100) {
  // Instance properties
  this.name = name;
  this.energy = energy;
  
  // Private variable (closure)
  let secret = 'I am an animal';
  
  // Public method accessing private variable
  this.revealSecret = function() {
    return secret;
  };
}

// Instance methods (on prototype)
AnimalConstructor.prototype.eat = function(amount) {
  console.log(`${this.name} is eating.`);
  this.energy += amount;
  return this;
};

AnimalConstructor.prototype.sleep = function(length) {
  console.log(`${this.name} is sleeping.`);
  this.energy += length;
  return this;
};

AnimalConstructor.prototype.play = function(length) {
  console.log(`${this.name} is playing.`);
  this.energy -= length;
  return this;
};

// Static method
AnimalConstructor.isAnimal = function(obj) {
  return obj instanceof AnimalConstructor;
};

// Getter/setter using Object.defineProperty
Object.defineProperty(AnimalConstructor.prototype, 'isTired', {
  get: function() {
    return this.energy < 20;
  }
});

// Inheritance
function DogConstructor(name, energy, breed) {
  // Call parent constructor
  AnimalConstructor.call(this, name, energy);
  this.breed = breed;
}

// Set up prototype chain
DogConstructor.prototype = Object.create(AnimalConstructor.prototype);
DogConstructor.prototype.constructor = DogConstructor;

// Override parent method
DogConstructor.prototype.eat = function(amount) {
  // Call parent method
  AnimalConstructor.prototype.eat.call(this, amount);
  console.log(`${this.name} eats like a dog!`);
  return this;
};

// Dog-specific method
DogConstructor.prototype.bark = function() {
  console.log(`${this.name} says Woof!`);
  this.energy -= 0.1;
  return this;
};

// Static method inheritance
DogConstructor.isDog = function(obj) {
  return obj instanceof DogConstructor;
};

// Create instances
const animalOld = new AnimalConstructor('Generic', 50);
const dogOld = new DogConstructor('Buddy', 100, 'Golden Retriever');

console.log('Constructor function instances:');
console.log('animalOld.name:', animalOld.name);
console.log('dogOld.name:', dogOld.name);
console.log('dogOld.breed:', dogOld.breed);

console.log('\nMethod calls:');
animalOld.eat(10).play(5);
console.log('Animal energy:', animalOld.energy);
console.log('Animal tired?', animalOld.isTired);

dogOld.eat(20).bark().play(10);
console.log('Dog energy:', dogOld.energy);

console.log('\nStatic methods:');
console.log('AnimalConstructor.isAnimal(dogOld):', AnimalConstructor.isAnimal(dogOld));
console.log('DogConstructor.isAnimal(dogOld):', DogConstructor.isAnimal(dogOld));
console.log('DogConstructor.isDog(dogOld):', DogConstructor.isDog(dogOld));

console.log('\nPrivate field (closure):');
console.log('dogOld.revealSecret():', dogOld.revealSecret());

console.log('\nPrototype chain:');
console.log('dogOld.__proto__ === DogConstructor.prototype:', dogOld.__proto__ === DogConstructor.prototype);
console.log('DogConstructor.prototype.__proto__ === AnimalConstructor.prototype:', DogConstructor.prototype.__proto__ === AnimalConstructor.prototype);
console.log('animalOld instanceof AnimalConstructor:', animalOld instanceof AnimalConstructor);
console.log('dogOld instanceof DogConstructor:', dogOld instanceof DogConstructor);
console.log('dogOld instanceof AnimalConstructor:', dogOld instanceof AnimalConstructor);

⚠️ When to Use Constructor Functions

Advantages

Maximum browser compatibility
More control over prototype chain
Closures for true privacy
No transpilation needed
Familiar to legacy codebases

Disadvantages

Verbose syntax
Easy to make mistakes
No built-in private fields
Inheritance is cumbersome
Less intuitive for OOP developers

Example 3: Performance Comparison

JavaScript Editor

// Performance Comparison

// Setup: Create 10000 instances of each

// Class version
class PerfClass {
  constructor(value) {
    this.value = value;
  }
  
  getDouble() {
    return this.value * 2;
  }
  
  static staticMethod() {
    return 'static';
  }
}

// Constructor version
function PerfConstructor(value) {
  this.value = value;
}

PerfConstructor.prototype.getDouble = function() {
  return this.value * 2;
};

PerfConstructor.staticMethod = function() {
  return 'static';
};

// Factory function version
function createPerfFactory(value) {
  return {
    value,
    getDouble() {
      return value * 2;
    }
  };
}

// Performance tests
console.log('Performance Comparison (10000 instances)\n');

// Class instantiation
console.time('Class instantiation');
const classInstances = [];
for (let i = 0; i < 10000; i++) {
  classInstances.push(new PerfClass(i));
}
console.timeEnd('Class instantiation');

// Constructor instantiation
console.time('Constructor instantiation');
const constructorInstances = [];
for (let i = 0; i < 10000; i++) {
  constructorInstances.push(new PerfConstructor(i));
}
console.timeEnd('Constructor instantiation');

// Factory instantiation
console.time('Factory instantiation');
const factoryInstances = [];
for (let i = 0; i < 10000; i++) {
  factoryInstances.push(createPerfFactory(i));
}
console.timeEnd('Factory instantiation');

// Method call performance
console.log('\nMethod call performance:');

console.time('Class method calls');
for (let i = 0; i < 10000; i++) {
  classInstances[i].getDouble();
}
console.timeEnd('Class method calls');

console.time('Constructor method calls');
for (let i = 0; i < 10000; i++) {
  constructorInstances[i].getDouble();
}
console.timeEnd('Constructor method calls');

console.time('Factory method calls');
for (let i = 0; i < 10000; i++) {
  factoryInstances[i].getDouble();
}
console.timeEnd('Factory method calls');

// Memory usage comparison
console.log('\nMemory usage (approximate):');

function getMemoryUsage(obj) {
  return JSON.stringify(obj).length;
}

const classInstance = new PerfClass(1);
const constructorInstance = new PerfConstructor(1);
const factoryInstance = createPerfFactory(1);

console.log('Class instance size:', getMemoryUsage(classInstance), 'chars');
console.log('Constructor instance size:', getMemoryUsage(constructorInstance), 'chars');
console.log('Factory instance size:', getMemoryUsage(factoryInstance), 'chars');

// Inheritance performance
console.log('\nInheritance performance:');

class BaseClass {
  method() { return 'base'; }
}

class DerivedClass extends BaseClass {
  method() { return super.method() + ' derived'; }
}

function BaseConstructor() {}
BaseConstructor.prototype.method = function() { return 'base'; };

function DerivedConstructor() {
  BaseConstructor.call(this);
}
DerivedConstructor.prototype = Object.create(BaseConstructor.prototype);
DerivedConstructor.prototype.constructor = DerivedConstructor;
DerivedConstructor.prototype.method = function() {
  return BaseConstructor.prototype.method.call(this) + ' derived';
};

console.time('Class inheritance method call');
const derivedClass = new DerivedClass();
for (let i = 0; i < 100000; i++) {
  derivedClass.method();
}
console.timeEnd('Class inheritance method call');

console.time('Constructor inheritance method call');
const derivedConstructor = new DerivedConstructor();
for (let i = 0; i < 100000; i++) {
  derivedConstructor.method();
}
console.timeEnd('Constructor inheritance method call');

📊 Performance Results Summary

Operation	Classes	Constructors	Factory Functions	Winner
Instantiation	Fast	Fast	Slowest	Classes/Constructors
Method Calls	Fastest	Fast	Medium	Classes
Memory Usage	Medium	Medium	Highest	Classes/Constructors
Inheritance	Optimized	Manual	N/A	Classes
Encapsulation	Good (ES2022+)	Best (closures)	Best (closures)	Constructors/Factories

Example 4: When to Use Which Pattern

JavaScript Editor

// When to Use Which Pattern

// Scenario 1: Simple Data Object
// Use: Object literal or factory function
const userData = {
  name: 'John',
  age: 30,
  getInfo() {
    return `${this.name}, ${this.age}`;
  }
};

// Better: Factory function for encapsulation
function createUser(name, age) {
  let privateData = 'secret';
  
  return {
    name,
    age,
    getInfo() {
      return `${this.name}, ${this.age}`;
    },
    getPrivate() {
      return privateData;
    }
  };
}

// Scenario 2: Multiple Instances with Shared Behavior
// Use: Class or Constructor function
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  
  applyDiscount(percent) {
    return this.price * (1 - percent/100);
  }
  
  static comparePrice(p1, p2) {
    return p1.price - p2.price;
  }
}

// Scenario 3: Inheritance Hierarchy
// Use: Classes (cleaner syntax)
class Vehicle {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }
  
  start() {
    return 'Vehicle started';
  }
}

class Car extends Vehicle {
  constructor(make, model, doors) {
    super(make, model);
    this.doors = doors;
  }
  
  honk() {
    return 'Beep beep!';
  }
}

// Scenario 4: Mixins and Composition
// Use: Object composition
const canEat = {
  eat() { console.log(`${this.name} eats`); }
};

const canSleep = {
  sleep() { console.log(`${this.name} sleeps`); }
};

function createAnimal(name) {
  return {
    name,
    ...canEat,
    ...canSleep
  };
}

// Scenario 5: Singleton Pattern
// Use: Module pattern or static instance
class Database {
  constructor() {
    if (Database.instance) {
      return Database.instance;
    }
    
    this.connection = null;
    Database.instance = this;
  }
  
  connect() {
    this.connection = 'Connected';
    return this;
  }
  
  static getInstance() {
    if (!Database.instance) {
      Database.instance = new Database();
    }
    return Database.instance;
  }
}

// Scenario 6: Functional Programming
// Use: Factory functions with closures
function createCounter() {
  let count = 0;
  
  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    }
  };
}

// Scenario 7: Library/Framework Development
// Use: Constructor functions for maximum compatibility
function MyLibrary(options) {
  if (!(this instanceof MyLibrary)) {
    return new MyLibrary(options);
  }
  
  this.options = options;
  this.initialized = false;
}

MyLibrary.prototype.init = function() {
  this.initialized = true;
  return this;
};

// Decision Tree:
// 1. Need inheritance? → Classes
// 2. Need encapsulation? → Factory functions
// 3. Need multiple inheritance? → Mixins
// 4. Need singleton? → Module pattern
// 5. Need FP style? → Factory + closures
// 6. Need browser compatibility? → Constructor functions
// 7. Simple data? → Object literals

console.log('Pattern examples created successfully.');

Exercise: Convert Between Patterns

JavaScript Editor

// Task 1: Convert this constructor function to ES6 class
function User(name, email) {
  this.name = name;
  this.email = email;
  this.createdAt = new Date();
  
  // Private variable using closure
  let loginCount = 0;
  
  this.incrementLogin = function() {
    loginCount++;
    return loginCount;
  };
}

User.prototype.getInfo = function() {
  return `${this.name} <${this.email}>`;
};

User.prototype.isActive = function() {
  const monthAgo = new Date();
  monthAgo.setMonth(monthAgo.getMonth() - 1);
  return this.createdAt > monthAgo;
};

User.admin = function(name, email) {
  const user = new User(name, email);
  user.isAdmin = true;
  return user;
};

// Your ES6 class implementation here
// class UserClass { ... }

// Task 2: Convert this ES6 class to constructor function
class Product {
  #sku; // Private field
  
  constructor(name, price, sku) {
    this.name = name;
    this.price = price;
    this.#sku = sku;
  }
  
  applyDiscount(percent) {
    const discount = this.price * (percent / 100);
    this.price -= discount;
    return this.price;
  }
  
  getSku() {
    return this.#sku;
  }
  
  static createFromJSON(json) {
    const data = JSON.parse(json);
    return new Product(data.name, data.price, data.sku);
  }
  
  get formattedPrice() {
    return `$${this.price.toFixed(2)}`;
  }
  
  set formattedPrice(value) {
    const num = parseFloat(value.replace(/[^0-9.]/g, ''));
    if (!isNaN(num)) {
      this.price = num;
    }
  }
}

// Your constructor function implementation here
// function ProductConstructor() { ... }

// Task 3: Convert to factory function (composition)
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  eat() {
    return `${this.name} eats`;
  }
  
  sleep() {
    return `${this.name} sleeps`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  bark() {
    return `${this.name} barks`;
  }
}

// Your factory function implementation here
// function createDog() { ... }

// Test your implementations
console.log('=== Testing Conversions ===');

// Test Task 1
const user1 = new User('John', 'john@example.com');
console.log('Original User:', user1.getInfo());

// Test your UserClass
// const user2 = new UserClass('Jane', 'jane@example.com');
// console.log('Class User:', user2.getInfo());

// Test Task 2
const product1 = new Product('Laptop', 999, 'LP123');
console.log('Original Product price:', product1.formattedPrice);

// Test your ProductConstructor
// const product2 = new ProductConstructor('Phone', 499, 'PH456');
// console.log('Constructor Product price:', product2.formattedPrice);

// Test Task 3
const dog1 = new Dog('Buddy', 'Golden');
console.log('Original Dog:', dog1.bark());

// Test your createDog
// const dog2 = createDog('Max', 'Labrador');
// console.log('Factory Dog:', dog2.bark());

💡 Modern JavaScript Recommendations

Use ES6 classes for most OOP scenarios (cleaner, better performance)
Use constructor functions only for legacy browser support
Use factory functions for functional programming patterns
Use composition over inheritance when possible
Consider TypeScript for better type safety with classes
Use private fields (#) for true encapsulation (ES2022+)
Benchmark performance for critical code paths

🎯 Interview Questions: Classes vs Prototypes

What happens when you extend a class in JavaScript?
How do private fields (#) work in ES6 classes?
What's the difference between static methods in classes vs constructors?
How does super() work in classes?
Can you achieve true encapsulation in constructor functions?
What are the performance implications of classes vs constructors?
How would you implement multiple inheritance in JavaScript?
What happens if you forget new with a constructor function?
How do getters and setters work in classes?
What are the trade-offs between factory functions and classes?

🔧 Migration Guide: Constructor Functions → Classes

Constructor Pattern	ES6 Class Equivalent	Notes
`function User()`	`class User`	Basic conversion
`User.prototype.method`	Method inside class	No prototype syntax needed
`function Child() Parent.call(this);`	`class Child extends Parent constructor() { super(); }`	Use `extends` and `super()`
`Object.create(Parent.prototype)`	`extends` keyword	Automatic prototype setup
Closure for privacy	Private fields (`#field`)	ES2022+ feature
`User.staticMethod`	`static staticMethod()`	Inside class declaration
`Object.defineProperty` getter/setter	`get prop()` / `set prop()`	Syntactic sugar

← Prototype Inheritance Object Property Descriptors →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Classes vs Prototypes

🎭 Two Syntaxes, One Mechanism

Transformation: Class → Prototype

ES6 Class Syntax

Equivalent Prototype Code

Example 1: ES6 Classes - Modern Syntax

✅ Advantages of ES6 Classes

Readability

Features

Tooling

Example 2: Constructor Functions - Traditional Approach

⚠️ When to Use Constructor Functions

Advantages

Disadvantages

Example 3: Performance Comparison

📊 Performance Results Summary

Example 4: When to Use Which Pattern

Exercise: Convert Between Patterns

💡 Modern JavaScript Recommendations

🎯 Interview Questions: Classes vs Prototypes

🔧 Migration Guide: Constructor Functions → Classes

Follow Us

Our Tools

Our Company

Special Tools