Prototypes & Inheritance

JavaScript uses prototypal inheritance - objects can inherit properties and methods from other objects via prototype chains, which is fundamentally different from classical inheritance.

🤔 What are Prototypes?

Prototypes are the mechanism by which JavaScript objects inherit features from other objects. Every object has a prototype, and prototypes themselves are objects.

Prototype Chain - Objects linked to other objects
Delegation - Property lookup delegated up the chain
Dynamic - Can modify prototypes at runtime
ES6 Classes - Syntactic sugar over prototypes

💡 Key Concepts

__proto__ - Reference to object's prototype (legacy)
Object.getPrototypeOf() - Get prototype (modern)
Object.setPrototypeOf() - Set prototype
Object.create() - Create with specific prototype
prototype property - On constructor functions

The Prototype Chain

When accessing a property, JavaScript looks up the prototype chain until it finds the property or reaches null.

📝 Prototype Basics

Understanding prototypes, constructor functions, and property lookup.

JavaScript Editor

// JavaScript Prototype Basics
console.log('=== Prototype Basics ===');

// Every JavaScript object has a prototype
const person = {
  name: 'John',
  age: 30
};

// Accessing prototype
console.log('person prototype:', Object.getPrototypeOf(person));
console.log('person.__proto__:', person.__proto__); // Legacy way

// Constructor function (old way before classes)
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// Adding method to prototype
Person.prototype.introduce = function() {
  return `Hi, I'm ${this.name} and I'm ${this.age} years old.`;
};

// Adding property to prototype
Person.prototype.species = 'Homo sapiens';

// Creating instances
const john = new Person('John', 30);
const jane = new Person('Jane', 25);

console.log(john.introduce()); // Uses prototype method
console.log(jane.introduce());
console.log('Species:', john.species); // Uses prototype property

// Prototype chain
console.log('\n=== Prototype Chain ===');
console.log('john.__proto__ === Person.prototype:', john.__proto__ === Person.prototype);
console.log('Person.prototype.__proto__ === Object.prototype:', Person.prototype.__proto__ === Object.prototype);
console.log('Object.prototype.__proto__:', Object.prototype.__proto__); // null (end of chain)

// Checking prototype relationships
console.log('\n=== Instance Checks ===');
console.log('john instanceof Person:', john instanceof Person);
console.log('john instanceof Object:', john instanceof Object);
console.log('Person instanceof Function:', Person instanceof Function);
console.log('Person instanceof Object:', Person instanceof Object);

// Property lookup in prototype chain
console.log('\n=== Property Lookup ===');

// Adding property directly to instance
john.nickname = 'Johnny';
console.log('john.nickname:', john.nickname); // Found on instance
console.log('jane.nickname:', jane.nickname); // undefined (not in prototype)

// Adding to prototype after creation
Person.prototype.greet = function() {
  return `Hello from ${this.name}!`;
};

console.log('After adding to prototype:');
console.log('john.greet():', john.greet());
console.log('jane.greet():', jane.greet()); // Works even though created earlier

// Shadowing prototype properties
console.log('\n=== Property Shadowing ===');

// Instance property shadows prototype property
john.species = 'Alien';
console.log('john.species:', john.species); // 'Alien' (instance)
console.log('jane.species:', jane.species); // 'Homo sapiens' (prototype)

// Deleting instance property reveals prototype property
delete john.species;
console.log('After delete john.species:', john.species); // Back to 'Homo sapiens'

// hasOwnProperty - checks if property is on instance (not prototype)
console.log('\n=== hasOwnProperty ===');
console.log('john.hasOwnProperty("name"):', john.hasOwnProperty('name')); // true
console.log('john.hasOwnProperty("introduce"):', john.hasOwnProperty('introduce')); // false
console.log('john.hasOwnProperty("species"):', john.hasOwnProperty('species')); // false

// in operator - checks entire prototype chain
console.log('\n=== in Operator ===');
console.log('"name" in john:', 'name' in john); // true
console.log('"introduce" in john:', 'introduce' in john); // true
console.log('"toString" in john:', 'toString' in john); // true (from Object.prototype)

// Object.create() - Creating objects with specific prototype
console.log('\n=== Object.create() ===');

const animalPrototype = {
  makeSound() {
    return `${this.name} says ${this.sound}`;
  },
  eat(food) {
    return `${this.name} is eating ${food}`;
  }
};

const dog = Object.create(animalPrototype);
dog.name = 'Buddy';
dog.sound = 'Woof!';

console.log(dog.makeSound());
console.log(dog.eat('bone'));

console.log('dog.__proto__ === animalPrototype:', dog.__proto__ === animalPrototype);

// Creating with properties
const cat = Object.create(animalPrototype, {
  name: { value: 'Whiskers', writable: true },
  sound: { value: 'Meow!', writable: false },
  color: { value: 'orange' }
});

console.log(cat.makeSound());
cat.name = 'Shadow';
console.log('Renamed cat:', cat.name);

Prototype Concepts:

Constructor Functions - Create objects with new
prototype property - Shared by all instances
__proto__ - Link to constructor's prototype
Property Shadowing - Instance properties override prototype
Object.create() - Direct prototype assignment

🧬 Prototypal Inheritance

Implementing inheritance using prototypes and comparing with ES6 classes.

JavaScript Editor

// Prototypal Inheritance
console.log('=== Prototypal Inheritance ===');

// Constructor function for Animal
function Animal(name) {
  this.name = name;
  this.energy = 100;
}

Animal.prototype.eat = function(food) {
  this.energy += 10;
  console.log(`${this.name} ate ${food}. Energy: ${this.energy}`);
  return this.energy;
};

Animal.prototype.sleep = function(hours) {
  this.energy += hours * 5;
  console.log(`${this.name} slept for ${hours} hours. Energy: ${this.energy}`);
  return this.energy;
};

// Constructor function for Dog (inherits from Animal)
function Dog(name, breed) {
  // Call parent constructor
  Animal.call(this, name);
  this.breed = breed;
}

// Set up inheritance: Dog.prototype inherits from Animal.prototype
// Method 1: Object.create() (ES5)
Dog.prototype = Object.create(Animal.prototype);

// Fix constructor property
Dog.prototype.constructor = Dog;

// Add Dog-specific methods
Dog.prototype.bark = function() {
  console.log(`${this.name} (a ${this.breed}) says: Woof Woof!`);
  this.energy -= 5;
  return this.energy;
};

Dog.prototype.fetch = function(item) {
  console.log(`${this.name} fetched the ${item}!`);
  this.energy -= 10;
  return this.energy;
};

// Constructor function for Cat (inherits from Animal)
function Cat(name, color) {
  Animal.call(this, name);
  this.color = color;
  this.lives = 9;
}

// Method 2: Using __proto__ (not recommended for production)
Cat.prototype = {
  __proto__: Animal.prototype,
  constructor: Cat,
  
  meow() {
    console.log(`${this.name} (a ${this.color} cat) says: Meow!`);
    this.energy -= 3;
    return this.energy;
  },
  
  climb(tree) {
    console.log(`${this.name} climbed the ${tree} tree!`);
    this.energy -= 15;
    return this.energy;
  },
  
  // Override parent method
  sleep(hours) {
    // Call parent method
    Animal.prototype.sleep.call(this, hours);
    console.log(`${this.name} purrs while sleeping...`);
    return this.energy;
  }
};

// Create instances
const buddy = new Dog('Buddy', 'Golden Retriever');
const whiskers = new Cat('Whiskers', 'gray');

console.log('\n=== Dog Instance ===');
console.log('buddy.name:', buddy.name);
console.log('buddy.breed:', buddy.breed);
console.log('buddy.energy:', buddy.energy);

buddy.eat('kibble');
buddy.bark();
buddy.fetch('ball');
buddy.sleep(8);

console.log('\n=== Cat Instance ===');
console.log('whiskers.name:', whiskers.name);
console.log('whiskers.color:', whiskers.color);
console.log('whiskers.lives:', whiskers.lives);

whiskers.eat('fish');
whiskers.meow();
whiskers.climb('oak');
whiskers.sleep(12); // Overridden method

// Checking inheritance
console.log('\n=== Inheritance Checks ===');
console.log('buddy instanceof Dog:', buddy instanceof Dog);
console.log('buddy instanceof Animal:', buddy instanceof Animal);
console.log('buddy instanceof Object:', buddy instanceof Object);

console.log('whiskers instanceof Cat:', whiskers instanceof Cat);
console.log('whiskers instanceof Animal:', whiskers instanceof Animal);

// Prototype chain visualization
console.log('\n=== Prototype Chain ===');
console.log('Dog.prototype.isPrototypeOf(buddy):', Dog.prototype.isPrototypeOf(buddy));
console.log('Animal.prototype.isPrototypeOf(buddy):', Animal.prototype.isPrototypeOf(buddy));
console.log('Object.prototype.isPrototypeOf(buddy):', Object.prototype.isPrototypeOf(buddy));

// ES6 class syntax (syntactic sugar over prototypes)
console.log('\n=== ES6 Classes (for comparison) ===');

class Bird {
  constructor(name) {
    this.name = name;
    this.canFly = true;
  }
  
  fly() {
    if (this.canFly) {
      console.log(`${this.name} is flying!`);
    } else {
      console.log(`${this.name} cannot fly.`);
    }
  }
  
  eat(food) {
    console.log(`${this.name} is eating ${food}`);
  }
}

class Penguin extends Bird {
  constructor(name) {
    super(name);
    this.canFly = false;
  }
  
  swim() {
    console.log(`${this.name} is swimming!`);
  }
  
  // Override
  eat(food) {
    super.eat(food);
    console.log('Penguins love fish!');
  }
}

const pingu = new Penguin('Pingu');
pingu.fly();
pingu.swim();
pingu.eat('fish');

// Under the hood, classes use prototypes
console.log('\n=== Class Prototype Chain ===');
console.log('Penguin.prototype.__proto__ === Bird.prototype:', Penguin.prototype.__proto__ === Bird.prototype);
console.log('Bird.prototype.__proto__ === Object.prototype:', Bird.prototype.__proto__ === Object.prototype);

Inheritance Patterns:

Constructor functions with Object.create()
Call parent constructor with .call() or .apply()
Reset constructor property
Use instanceof and isPrototypeOf()
ES6 classes (syntactic sugar over this pattern)

🔧 Built-in Prototypes

Exploring built-in object prototypes and extending them (with caution).

JavaScript Editor

// Built-in Object Prototypes
console.log('=== Built-in Prototypes ===');

// Array prototype
const arr = [1, 2, 3];
console.log('Array methods from prototype:');
console.log('arr.__proto__ === Array.prototype:', arr.__proto__ === Array.prototype);
console.log('Array.prototype.__proto__ === Object.prototype:', Array.prototype.__proto__ === Object.prototype);

// All arrays inherit from Array.prototype
console.log('\n=== Array Prototype Methods ===');
console.log('arr.push:', typeof arr.push);
console.log('arr.map:', typeof arr.map);
console.log('arr.filter:', typeof arr.filter);
console.log('arr.reduce:', typeof arr.reduce);

// Adding method to Array.prototype (monkey patching - use with caution!)
if (!Array.prototype.last) {
  Array.prototype.last = function() {
    return this[this.length - 1];
  };
  
  Array.prototype.first = function() {
    return this[0];
  };
}

console.log('\nCustom array methods:');
console.log('[1, 2, 3].last():', [1, 2, 3].last());
console.log('[1, 2, 3].first():', [1, 2, 3].first());

// String prototype
console.log('\n=== String Prototype ===');
const str = 'Hello World';
console.log('str.__proto__ === String.prototype:', str.__proto__ === String.prototype);
console.log('String methods:');
console.log('str.toUpperCase():', str.toUpperCase());
console.log('str.slice(0, 5):', str.slice(0, 5));
console.log('str.split(" "):', str.split(' '));

// Number prototype
console.log('\n=== Number Prototype ===');
const num = 42.5678;
console.log('num.toFixed(2):', num.toFixed(2));
console.log('num.toExponential():', num.toExponential());
console.log('num.toString(2):', num.toString(2)); // Binary

// Function prototype
console.log('\n=== Function Prototype ===');
function example() {
  return 'Hello';
}

console.log('example.__proto__ === Function.prototype:', example.__proto__ === Function.prototype);
console.log('Function methods:');
console.log('example.call():', example.call());
console.log('example.apply():', example.apply());
console.log('example.bind():', typeof example.bind());

// Date prototype
console.log('\n=== Date Prototype ===');
const now = new Date();
console.log('now.getFullYear():', now.getFullYear());
console.log('now.getMonth():', now.getMonth());
console.log('now.toISOString():', now.toISOString());

// Extending built-in prototypes (caution!)
console.log('\n=== Extending Built-ins ===');

// Safe way to extend (check if method exists first)
if (!String.prototype.capitalize) {
  String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  };
}

if (!String.prototype.reverse) {
  String.prototype.reverse = function() {
    return this.split('').reverse().join('');
  };
}

console.log('hello'.capitalize()); // 'Hello'
console.log('javascript'.reverse()); // 'tpircsavaj'

// Problem with for...in and extended prototypes
console.log('\n=== for...in Problem ===');

// Add a method to Object.prototype (DON'T DO THIS IN PRODUCTION!)
Object.prototype.customMethod = function() {
  return 'Custom';
};

const obj = { a: 1, b: 2, c: 3 };

console.log('Object.keys(obj):', Object.keys(obj)); // ['a', 'b', 'c']
console.log('for...in loop:');
for (let key in obj) {
  console.log(`  ${key}: ${obj[key]}`); // Includes customMethod!
}

// Solution: Use hasOwnProperty
console.log('\nUsing hasOwnProperty:');
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`  ${key}: ${obj[key]}`);
  }
}

// Remove the custom method
delete Object.prototype.customMethod;

// Prototype pollution protection
console.log('\n=== Prototype Pollution Protection ===');

// Freezing Object.prototype prevents modifications
// Object.freeze(Object.prototype);

// Using Object.create(null) to create objects without prototype
const pureObject = Object.create(null);
pureObject.a = 1;
pureObject.b = 2;

console.log('Pure object (no prototype):', pureObject);
console.log('pureObject.toString:', pureObject.toString); // undefined
console.log('pureObject.hasOwnProperty:', pureObject.hasOwnProperty); // undefined

// Checking prototype chain length
function getPrototypeChain(obj) {
  const chain = [];
  let current = obj;
  
  while (current) {
    chain.push(current.constructor.name || 'Anonymous');
    current = Object.getPrototypeOf(current);
  }
  
  return chain;
}

console.log('\nPrototype chain of an array:');
console.log(getPrototypeChain([1, 2, 3])); // ["Array", "Object", "null"]

Built-in Prototypes:

Array.prototype - Array methods
String.prototype - String methods
Number.prototype - Number methods
Function.prototype - Function methods
Object.prototype - Base for all objects

Extending Built-ins:

Pros: Add useful utilities
Cons: Can break libraries, collisions
Best Practice: Use utility functions instead
If you must: Check if method exists first

🎯 Practical Example: UI Framework

Building a simple UI framework using prototypal inheritance.

JavaScript Editor

// Practical Example: Custom Framework with Prototypes
console.log('=== Custom Framework with Prototypes ===');

// Base Component class using prototypal inheritance
function Component(config = {}) {
  this.id = config.id || ('component_' + Date.now());
  this.parent = config.parent || null;
  this.children = [];
  this.state = {};
  this.props = config.props || {};
  this.createdAt = new Date();
  
  if (config.parent) {
    config.parent.addChild(this);
  }
}

Component.prototype.setState = function(newState) {
  const oldState = { ...this.state };
  this.state = { ...this.state, ...newState };
  this.onStateChange(oldState, this.state);
  
  if (this.shouldUpdate(oldState, this.state)) {
    this.render();
  }
};

Component.prototype.onStateChange = function(oldState, newState) {
  console.log(`${this.id}: State changed`, { oldState, newState });
};

Component.prototype.shouldUpdate = function(oldState, newState) {
  // Simple diff - in real framework, this would be more sophisticated
  return JSON.stringify(oldState) !== JSON.stringify(newState);
};

Component.prototype.render = function() {
  console.log(`${this.id}: Rendering...`);
  // In real framework, this would update DOM
  return `<div id="${this.id}">${this.constructor.name}</div>`;
};

Component.prototype.addChild = function(child) {
  child.parent = this;
  this.children.push(child);
  console.log(`${this.id} added child: ${child.id}`);
};

Component.prototype.removeChild = function(child) {
  const index = this.children.indexOf(child);
  if (index > -1) {
    this.children.splice(index, 1);
    child.parent = null;
    console.log(`${this.id} removed child: ${child.id}`);
  }
};

Component.prototype.getHierarchy = function(level = 0) {
  const indent = '  '.repeat(level);
  let hierarchy = `${indent}└─ ${this.id} (${this.constructor.name})\n`;
  
  this.children.forEach(child => {
    hierarchy += child.getHierarchy(level + 1);
  });
  
  return hierarchy;
};

// Button Component (extends Component)
function Button(config) {
  // Call parent constructor
  Component.call(this, config);
  
  this.label = config.label || 'Click me';
  this.type = config.type || 'button';
  this.disabled = false;
  
  // Initialize state
  this.setState({
    clicks: 0,
    hover: false
  });
}

// Set up inheritance
Button.prototype = Object.create(Component.prototype);
Button.prototype.constructor = Button;

// Button-specific methods
Button.prototype.click = function() {
  if (this.disabled) {
    console.log(`${this.id}: Button is disabled`);
    return;
  }
  
  const clicks = this.state.clicks + 1;
  this.setState({ clicks });
  
  console.log(`${this.id}: Button clicked ${clicks} times`);
  
  // Trigger click handler if provided
  if (this.props.onClick) {
    this.props.onClick(this);
  }
};

Button.prototype.enable = function() {
  this.disabled = false;
  console.log(`${this.id}: Enabled`);
};

Button.prototype.disable = function() {
  this.disabled = true;
  console.log(`${this.id}: Disabled`);
};

// Override render method
Button.prototype.render = function() {
  const status = this.disabled ? 'disabled' : 'enabled';
  const clicks = this.state.clicks;
  
  console.log(`${this.id}: Rendering Button ("${this.label}") - ${status}, ${clicks} clicks`);
  
  return `<button id="${this.id}" type="${this.type}" ${this.disabled ? 'disabled' : ''}>
    ${this.label} (${clicks})
  </button>`;
};

// Form Component (extends Component)
function Form(config) {
  Component.call(this, config);
  
  this.action = config.action || '#';
  this.method = config.method || 'POST';
  this.fields = config.fields || [];
  
  this.setState({
    submitted: false,
    valid: true,
    values: {}
  });
}

// Set up inheritance
Form.prototype = Object.create(Component.prototype);
Form.prototype.constructor = Form;

Form.prototype.addField = function(field) {
  this.fields.push(field);
  this.addChild(field);
  console.log(`${this.id}: Added field ${field.id}`);
};

Form.prototype.submit = function() {
  console.log(`${this.id}: Submitting form to ${this.action}`);
  
  // Collect values from fields
  const values = {};
  let valid = true;
  
  this.children.forEach(child => {
    if (child.getValue) {
      values[child.id] = child.getValue();
      if (child.isValid && !child.isValid()) {
        valid = false;
      }
    }
  });
  
  this.setState({
    submitted: true,
    valid,
    values
  });
  
  if (valid && this.props.onSubmit) {
    this.props.onSubmit(values);
  }
  
  return { valid, values };
};

Form.prototype.validate = function() {
  let valid = true;
  
  this.children.forEach(child => {
    if (child.isValid && !child.isValid()) {
      valid = false;
      console.log(`${this.id}: Field ${child.id} is invalid`);
    }
  });
  
  this.setState({ valid });
  return valid;
};

// Input Field Component
function InputField(config) {
  Component.call(this, config);
  
  this.type = config.type || 'text';
  this.value = config.value || '';
  this.placeholder = config.placeholder || '';
  this.required = config.required || false;
  this.pattern = config.pattern || null;
  
  this.setState({
    focused: false,
    touched: false,
    error: null
  });
}

InputField.prototype = Object.create(Component.prototype);
InputField.prototype.constructor = InputField;

InputField.prototype.focus = function() {
  this.setState({ focused: true });
  console.log(`${this.id}: Focused`);
};

InputField.prototype.blur = function() {
  this.setState({ focused: false, touched: true });
  this.validateSelf();
  console.log(`${this.id}: Blurred`);
};

InputField.prototype.setValue = function(value) {
  this.value = value;
  this.setState({ touched: true });
  this.validateSelf();
  console.log(`${this.id}: Value set to "${value}"`);
};

InputField.prototype.getValue = function() {
  return this.value;
};

InputField.prototype.validateSelf = function() {
  let error = null;
  
  if (this.required && !this.value.trim()) {
    error = 'This field is required';
  } else if (this.pattern && !this.pattern.test(this.value)) {
    error = 'Invalid format';
  }
  
  this.setState({ error });
  return !error;
};

InputField.prototype.isValid = function() {
  return this.state.error === null;
};

InputField.prototype.render = function() {
  const error = this.state.error;
  const status = error ? 'invalid' : 'valid';
  
  console.log(`${this.id}: Rendering InputField - ${status} ${error ? '(' + error + ')' : ''}`);
  
  return `<input 
    id="${this.id}"
    type="${this.type}"
    value="${this.value}"
    placeholder="${this.placeholder}"
    ${this.required ? 'required' : ''}
    class="${error ? 'error' : ''}"
  >`;
};

// Usage example
console.log('=== Creating UI Components ===');

// Create form
const loginForm = new Form({
  id: 'loginForm',
  props: {
    onSubmit: (values) => {
      console.log('Form submitted with values:', values);
    }
  }
});

// Create input fields
const emailField = new InputField({
  id: 'email',
  type: 'email',
  placeholder: 'Enter your email',
  required: true,
  pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
});

const passwordField = new InputField({
  id: 'password',
  type: 'password',
  placeholder: 'Enter your password',
  required: true
});

// Create submit button
const submitButton = new Button({
  id: 'submitBtn',
  label: 'Login',
  type: 'submit',
  props: {
    onClick: (button) => {
      console.log('Submit button clicked!');
      loginForm.submit();
    }
  }
});

// Build component hierarchy
loginForm.addField(emailField);
loginForm.addField(passwordField);
loginForm.addChild(submitButton);

console.log('\n=== Component Hierarchy ===');
console.log(loginForm.getHierarchy());

// Simulate user interaction
console.log('\n=== Simulating User Interaction ===');

emailField.setValue('user@example.com');
emailField.blur();

passwordField.setValue('password123');
passwordField.blur();

console.log('\nForm validation:', loginForm.validate());

submitButton.click(); // This triggers form submission

// Check prototype chain
console.log('\n=== Prototype Chain Analysis ===');
console.log('submitButton instanceof Button:', submitButton instanceof Button);
console.log('submitButton instanceof Component:', submitButton instanceof Component);
console.log('submitButton instanceof Object:', submitButton instanceof Object);

console.log('\nPrototype chain of submitButton:');
let proto = Object.getPrototypeOf(submitButton);
while (proto) {
  console.log('  -', proto.constructor.name || 'Anonymous');
  proto = Object.getPrototypeOf(proto);
}

// Performance consideration: Methods on prototype vs instance
console.log('\n=== Performance Consideration ===');

// Method on prototype (shared)
console.log('submitButton.click === Button.prototype.click:', submitButton.click === Button.prototype.click);

// Method on instance (each instance has its own copy)
submitButton.customMethod = function() {
  return 'Instance method';
};

const anotherButton = new Button({ id: 'btn2', label: 'Another' });
console.log('submitButton.customMethod === anotherButton.customMethod:', 
  submitButton.customMethod === anotherButton.customMethod); // false

// Memory efficient: Use prototype for methods
// Faster access: Instance properties are faster to access

💡 Framework Design Insights:

Base component with shared functionality on prototype
Specialized components inherit and extend
Method overriding with parent calls
Component hierarchy management
State management with change detection
Event system using callbacks

⚡ Advanced Patterns

Advanced prototype patterns for flexible and performant code.

JavaScript Editor

// Advanced Prototype Patterns
console.log('=== Advanced Prototype Patterns ===');

// 1. Mixins using Object.assign
console.log('\n=== 1. Mixins ===');

const CanSwim = {
  swim() {
    console.log(`${this.name} is swimming`);
    return this;
  }
};

const CanFly = {
  fly() {
    console.log(`${this.name} is flying`);
    return this;
  }
};

const CanRun = {
  run() {
    console.log(`${this.name} is running`);
    return this;
  }
};

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

// Apply mixins to prototype
Object.assign(Animal.prototype, CanSwim, CanRun);

// Create specialized constructor
function Bird(name) {
  Animal.call(this, name);
}

// Inherit from Animal
Bird.prototype = Object.create(Animal.prototype);
Bird.prototype.constructor = Bird;

// Add bird-specific mixin
Object.assign(Bird.prototype, CanFly);

const eagle = new Bird('Eagle');
eagle.fly();
eagle.swim();
eagle.run();

// 2. Composition over inheritance
console.log('\n=== 2. Composition ===');

const duck = createCreature('Duck', 'swimmer', 'flyer', 'runner');
duck.swim();
duck.fly();
duck.run();

// 3. Prototype chain optimization
console.log('\n=== 3. Chain Optimization ===');

// Deep prototype chains are slower
function createOptimizedChain() {
  const level4 = {
    method4() { return 'Level 4'; }
  };
  
  const level3 = Object.create(level4);
  level3.method3 = function() { return 'Level 3'; };
  
  const level2 = Object.create(level3);
  level2.method2 = function() { return 'Level 2'; };
  
  const level1 = Object.create(level2);
  level1.method1 = function() { return 'Level 1'; };
  
  return level1;
}

const obj1 = createOptimizedChain();
console.log('Method lookup through chain:');
console.time('Deep chain lookup');
for (let i = 0; i < 100000; i++) {
  obj1.method4();
}
console.timeEnd('Deep chain lookup');

// Flattened chain is faster
function createFlattenedChain() {
  const proto = {};
  
  // Copy all methods to single prototype
  Object.assign(proto, {
    method1() { return 'Level 1'; },
    method2() { return 'Level 2'; },
    method3() { return 'Level 3'; },
    method4() { return 'Level 4'; }
  });
  
  const obj = Object.create(proto);
  return obj;
}

const obj2 = createFlattenedChain();
console.time('Flattened chain lookup');
for (let i = 0; i < 100000; i++) {
  obj2.method4();
}
console.timeEnd('Flattened chain lookup');

// 4. Prototype memoization
console.log('\n=== 4. Prototype Memoization ===');

function ExpensiveCalculator() {
  this.cache = new Map();
}

ExpensiveCalculator.prototype.compute = function(key, fn) {
  if (this.cache.has(key)) {
    console.log(`Cache hit for ${key}`);
    return this.cache.get(key);
  }
  
  console.log(`Computing ${key}...`);
  const result = fn();
  this.cache.set(key, result);
  return result;
};

const calculator = new ExpensiveCalculator();

// Expensive computation
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log('First call (computes):', calculator.compute('fib10', () => fibonacci(10)));
console.log('Second call (cached):', calculator.compute('fib10', () => fibonacci(10)));

// 5. Dynamic prototype switching
console.log('\n=== 5. Dynamic Prototype Switching ===');

const aggressiveAI = {
  attack() {
    console.log('Aggressive attack!');
  },
  defend() {
    console.log('Minimal defense');
  }
};

const defensiveAI = {
  attack() {
    console.log('Cautious attack');
  },
  defend() {
    console.log('Strong defense!');
  }
};

function GameCharacter(name) {
  this.name = name;
  this.behavior = aggressiveAI;
}

GameCharacter.prototype.setBehavior = function(newBehavior) {
  Object.setPrototypeOf(this, newBehavior);
  console.log(`${this.name} switched behavior`);
};

const hero = new GameCharacter('Hero');
hero.attack();
hero.defend();

hero.setBehavior(defensiveAI);
hero.attack();
hero.defend();

// 6. Private state with closures and prototypes
console.log('\n=== 6. Private State ===');

const counter1 = createPrivateCounter();
const counter2 = createPrivateCounter(); // Different closure

counter1.increment();
counter1.increment();
counter2.increment(); // Starts from 0

console.log('counter1 count:', counter1.getCount());
console.log('counter2 count:', counter2.getCount());

// 7. Object linking (OLOO pattern)
console.log('\n=== 7. OLOO Pattern ===');

// Objects Linking to Other Objects (alternative to classes)
const Person = {
  init(name, age) {
    this.name = name;
    this.age = age;
    return this;
  },
  
  introduce() {
    return `I'm ${this.name}, ${this.age} years old`;
  }
};

const Employee = Object.create(Person);
Employee.init = function(name, age, position) {
  Person.init.call(this, name, age);
  this.position = position;
  return this;
};

Employee.work = function() {
  return `${this.name} is working as a ${this.position}`;
};

const john = Object.create(Employee).init('John', 30, 'Developer');
console.log(john.introduce());
console.log(john.work());

console.log('\nOLOO prototype chain:');
console.log('Object.getPrototypeOf(john) === Employee:', Object.getPrototypeOf(john) === Employee);
console.log('Object.getPrototypeOf(Employee) === Person:', Object.getPrototypeOf(Employee) === Person);

Advanced Techniques:

Mixins - Multiple inheritance via Object.assign()
Composition - Combine behaviors without inheritance
Chain Optimization - Flatten for better performance
Memoization - Cache expensive computations
Dynamic Prototypes - Change behavior at runtime
Private State - Using closures with prototypes
OLOO - Objects Linking to Other Objects

Next Steps

Now that you understand prototypes, learn about the Event Loop - the mechanism that makes JavaScript's asynchronous programming possible.

← Classes Event Loop & Concurrency →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Prototypes & Inheritance

🤔 What are Prototypes?

💡 Key Concepts

The Prototype Chain

📝 Prototype Basics

Prototype Concepts:

🧬 Prototypal Inheritance

Inheritance Patterns:

🔧 Built-in Prototypes

Built-in Prototypes:

Extending Built-ins:

🎯 Practical Example: UI Framework

💡 Framework Design Insights:

⚡ Advanced Patterns

Advanced Techniques:

Next Steps

Follow Us

Our Tools

Our Company

Special Tools