JavaScript Prototypes and Inheritance Explained — How Objects Really Share Behaviour

// --- Demonstrating the prototype chain from scratch ---

// A plain object — no constructor, no class
const vehicleBlueprint = {
  describe() {
    // 'this' refers to whatever object called the method
    return `I am a ${this.type} that travels at ${this.topSpeed} km/h`;
  }
};

// Create a new object whose prototype IS vehicleBlueprint
const bicycle = Object.create(vehicleBlueprint);
bicycle.type = 'bicycle';       // own property — lives directly on bicycle
bicycle.topSpeed = 30;          // own property

const sportsCar = Object.create(vehicleBlueprint);
sportsCar.type = 'sports car';
sportsCar.topSpeed = 300;

// Both objects share ONE describe() function — it lives on vehicleBlueprint
console.log(bicycle.describe());    // JS looks on bicycle first — no describe() there
                                    // then walks up to vehicleBlueprint — found it!
console.log(sportsCar.describe());

// Confirm the chain
console.log(Object.getPrototypeOf(bicycle) === vehicleBlueprint); // true
console.log(Object.getPrototypeOf(vehicleBlueprint) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype)); // null — end of chain

// Checking OWN properties vs inherited properties
console.log(bicycle.hasOwnProperty('type'));      // true  — own property
console.log(bicycle.hasOwnProperty('describe'));  // false — inherited from vehicleBlueprint

// --- Prototype-based inheritance using constructor functions ---

// PARENT constructor
function Animal(name, sound) {
  // These become OWN properties on each instance
  this.name = name;
  this.sound = sound;
}

// Shared method — added to Animal.prototype so ALL instances share one copy
Animal.prototype.speak = function() {
  return `${this.name} says ${this.sound}!`;
};

Animal.prototype.describe = function() {
  return `${this.name} is an animal.`;
};

// CHILD constructor
function Dog(name) {
  // Step 1: Call the parent constructor to set up own properties
  // Without this, 'name' and 'sound' would never be set on the Dog instance
  Animal.call(this, name, 'Woof');
  this.tricks = [];  // Dog-specific own property
}

// Step 2: Wire up the prototype chain
// Dog.prototype must have Animal.prototype in ITS chain
// Object.create() creates a new object whose [[Prototype]] is Animal.prototype
Dog.prototype = Object.create(Animal.prototype);

// Step 3: Fix the constructor reference (Object.create broke it)
// Without this, dog.constructor would point to Animal — wrong!
Dog.prototype.constructor = Dog;

// Dog-specific method — only Dogs have this, not Animals
Dog.prototype.learnTrick = function(trick) {
  this.tricks.push(trick);
  return `${this.name} learnt: ${trick}`;
};

// --- Usage ---
const myDog = new Dog('Rex');

console.log(myDog.speak());              // Found on Animal.prototype via the chain
console.log(myDog.describe());           // Also from Animal.prototype
console.log(myDog.learnTrick('sit'));    // Found on Dog.prototype
console.log(myDog.tricks);              // Own property on the instance

// Verifying the chain
console.log(myDog instanceof Dog);       // true
console.log(myDog instanceof Animal);    // true — chain reaches Animal.prototype
console.log(myDog.constructor === Dog);  // true — because we fixed it in Step 3

// What the chain looks like:
// myDog --> Dog.prototype --> Animal.prototype --> Object.prototype --> null

// --- ES6 class inheritance — same prototype chain, readable syntax ---

class BankAccount {
  // Private field — NOT on the prototype, not accessible outside this class
  #balance;

  constructor(owner, initialDeposit) {
    this.owner = owner;          // own property
    this.#balance = initialDeposit;  // private own property
  }

  deposit(amount) {
    if (amount <= 0) throw new Error('Deposit must be positive');
    this.#balance += amount;
    return this; // enables method chaining
  }

  getBalance() {
    return this.#balance;
  }

  toString() {
    return `${this.owner}'s account: $${this.#balance}`;
  }
}

// SavingsAccount EXTENDS BankAccount
// Under the hood: SavingsAccount.prototype = Object.create(BankAccount.prototype)
class SavingsAccount extends BankAccount {
  #interestRate;

  constructor(owner, initialDeposit, annualInterestRate) {
    // super() MUST be called before accessing 'this' in a derived class
    // It runs BankAccount's constructor on the new instance
    super(owner, initialDeposit);
    this.#interestRate = annualInterestRate;
  }

  applyInterest() {
    // getBalance() is inherited from BankAccount.prototype via the chain
    const interest = this.getBalance() * this.#interestRate;
    this.deposit(interest);  // deposit() also inherited
    return `Interest of $${interest.toFixed(2)} applied`;
  }

  // Override toString — but call the parent version inside it
  toString() {
    // super.toString() walks up to BankAccount.prototype.toString
    return `${super.toString()} [Savings @ ${this.#interestRate * 100}% interest]`;
  }
}

// --- Usage ---
const currentAccount = new BankAccount('Alice', 1000);
currentAccount.deposit(500);  // method chaining is possible because deposit returns this
console.log(currentAccount.getBalance());  // 1500
console.log(currentAccount.toString());

const savingsAccount = new SavingsAccount('Bob', 2000, 0.05);
console.log(savingsAccount.applyInterest());
console.log(savingsAccount.toString());

// instanceof still works — class inheritance IS prototype inheritance
console.log(savingsAccount instanceof SavingsAccount); // true
console.log(savingsAccount instanceof BankAccount);    // true

// The prototype chain is identical to the manual version:
// savingsAccount --> SavingsAccount.prototype --> BankAccount.prototype --> Object.prototype --> null
console.log(
  Object.getPrototypeOf(SavingsAccount.prototype) === BankAccount.prototype
); // true — confirms extends wired this up

// --- Mixins: composing behaviour without deep inheritance ---

// Mixin factory: a function that takes a Base class and returns an extended class
// This lets us 'snap in' abilities without a fixed hierarchy

const Serialisable = (BaseClass) => class extends BaseClass {
  toJSON() {
    // Serialise all own enumerable properties to a JSON string
    const ownProps = {};
    for (const key of Object.keys(this)) {
      ownProps[key] = this[key];
    }
    return JSON.stringify(ownProps);
  }

  static fromJSON(json) {
    const data = JSON.parse(json);
    // Creates an instance and copies all properties on to it
    return Object.assign(new this(), data);
  }
};

const Timestamped = (BaseClass) => class extends BaseClass {
  constructor(...args) {
    super(...args);
    // Automatically stamp with created time when constructed
    this.createdAt = new Date().toISOString();
  }

  getAge() {
    const ms = Date.now() - new Date(this.createdAt).getTime();
    return `${Math.floor(ms / 1000)} seconds old`;
  }
};

// The base class stays lean — only core identity
class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }

  greet() {
    return `Hello, I'm ${this.username}`;
  }
}

// Compose: User + Timestamped + Serialisable
// Read right to left: start with User, add Timestamped, add Serialisable
class PlatformUser extends Serialisable(Timestamped(User)) {
  constructor(username, email, role) {
    super(username, email);  // chains up through all the mixins to User
    this.role = role;
  }
}

// --- Usage ---
const admin = new PlatformUser('sarah_dev', 'sarah@example.com', 'admin');

console.log(admin.greet());          // from User
console.log(admin.getAge());         // from Timestamped mixin
console.log(admin.toJSON());         // from Serialisable mixin

// instanceof still works for all layers
console.log(admin instanceof User);  // true
console.log(admin instanceof PlatformUser); // true

// The prototype chain records every mixin link:
// admin
//   --> PlatformUser.prototype
//   --> Serialisable(Timestamped(User)).prototype  [anonymous class]
//   --> Timestamped(User).prototype               [anonymous class]
//   --> User.prototype
//   --> Object.prototype
//   --> null